Paste this into Contact Form → Advanced → CSS ID:
custom-form
By assigning this ID only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
#custom-form p.et_pb_contact_field { padding: 0; } #custom-form .et_pb_contact_form { margin: 30px!important; padding: 30px 0!important; } #custom-form .et_pb_contact_field_options_title { display: none; } #custom-form .et_pb_contact p input[type=checkbox]+label i { display: none; } #custom-form .et_pb_contact p input[type=checkbox]+label a { background: #000000; color: #ffffff; text-decoration: none!important; padding: 15px 30px; border-radius: 50px; }
This code automatically adjusts the spacing of some containers within the Contact Form and customizes the Checkbox fields as Buttons.
Applying the Conditional Logic
Just Enable the “Conditional Logic” toggle and choose your own Rules!

(Rule applied to reveal the button: “Learn Spanish with Ramon!”)
Boost your creativity!
🥳 That’s it!