Divi Builder is a versatile tool that empowers website creators to design stunning and interactive pages effortlessly. One of the fascinating features it offers is the ability to create a logical path with multiple choices, where users make a series of selections and are ultimately redirected to a specific page based on their combined choices. In this blog post, we will explore how to achieve this without using any plugins, solely utilizing the Divi theme or Divi Builder.

Step 1: Set up the Divi Contact Form To begin, open the Divi Builder and navigate to the page where you want to create the logical path. Insert a new section and add the Divi Contact Form module. The contact form will serve as the foundation for the user’s journey.

Step 2: Customize the Contact Form Fields Customize the contact form fields according to the choices you want users to make. For example, if you are creating a logical path for selecting a preferred destination, you might include fields for continent, country, and city. You can add more fields as per your requirements.

Step 3: Add Conditional Logic Now, it’s time to apply conditional logic to the contact form fields. This logic will determine the user’s journey based on their selections. Click on the field you want to apply the logic to and navigate to the ‘Conditional Logic’ tab in the module settings.

Step 4: Define Conditional Rules In the conditional logic settings, you can create multiple conditional rules that will define the path the user follows. For each rule, you will specify the field value that triggers the redirection to a specific page. For example, if the user selects “Europe” as the continent and “France” as the country, you can set the condition to redirect them to a page about France.

Step 5: Create a new field (one for each end of path) where to insert the Link URL to Each Path. This will redirect users to the appropriate page based on their selections, you need to link the desired URLs to each path. In the conditional logic settings, you will find the option to enter a URL for each rule. Simply paste the URL of the page you want the user to land on, corresponding to their choices.

For example:

Field 1 – dropdown =

  • Travel to Europe
  • Travel to Asia
  • Travel to America

User selects Europe

Field 2 – dropdown =

  • France
  • Spain
  • Italy
  • Germany

User select France

Last field created for this path would be “France” page with the url you added

Step 6: Hide the Submit Button Since we are using the contact form for its conditional logic and not for submitting data, it is advisable to hide the submit button to prevent confusion. You can do this by adding custom CSS to the Divi custom CSS section. Use the CSS property “display: none;” to hide the submit button.

You would have someting like this:

body.page-id-352 .et_pb_contact_submit.et_pb_button {
display: none;
}

REPLACE WITH YOUR ID PAGE

Shout a comment below to tell me how it worked for you 🙂