Use the Divi's Contact Form to condition the revealed Button!
Take advantage of the “Conditional Logic” functionality included with Divi’s “Contact Form” module, to alternately display different Buttons based on the user’s selection of selected dropdown menus.
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!