Divi Builder has two modules that you can use to create a form: the Email Optin module to create an email opt-in form and the Contact Form module to create a contact form. Although it is basically designed to create a contact form, you can also use the Contact Form module to create other form types. A survey form, for instance. Unlike Elementor (read: Elementor vs Divi) which supports up to 20 field types, the Divi Contact Form module supports only 6 field types, but it has a feature that Elementor doesn’t have one: conditional logic. With this feature, you can show/hide a certain field on your form based on a certain parameter or more.
The ability to show/hide a field allows you to create a more appealing, interactive form. Take a look at the following screencast.
As you can see on the form above. The Last Name field only shows up when the first field (the First Name field) is filled in. You can also implement the same rule to other fields if you want it. For instance, you can set the Phone Number field to show up only when the Email Address field is filled in.
In addition to showing up a form field when the previous field is filled in (as shown on GIF above), you can also apply several other rules. For instance, you can display a field when the previous field (or any field to your liking) contains certain letters or numbers. There are 8 rules supported by Divi:
- Equals: Displays a field when another field equals the defined text or letter.
- Does not equal: Displays a field when another field does not equal the defined text or letter.
- Greater than: Displays a field when another field is greater than the defined value.
- Less than: Displays a field when another field is less than the defined value.
- Contains: Displays a field when another field contains the defined word.
- Does not contain: Displays a field when another field does contain the defined word.
- Empty: Display a field when another field is empty
- Is not empty: Display a field when another field is not empty
How to Add a Conditional Logic
Assuming you already know how to create a form in Divi, click the gear icon of the Contact Form module to open the settings panel.
On the appearing settings panel, click the gear icon on the field you want to add the conditional logic to.
Under the Content tab, click the Conditional Logic block and toggle the switch.
On the Rules section, set rule you want to apply. First, select the field to trigger the rule on the first column then select the rule on the second column. Lastly, define the value on the third column.
If you want to add more than one rules, you can simply click the plus button to add a new rule.
If you use multiple rules, you can toggle the Relation switch.
- ALL: The field will be displayed when all rules are fulfilled
- ANY: The field will be displayed when one of the rules is fulfilled
The Bottom Line
The Contact Form module of Divi is designed to create a contact form. Even so, you can also use it create other form types. If you want to create a long form using this module, you can make use of its conditional logic feature to show the form fields only when the rules are fulfilled. Your creativity is the limit to use the feature.