Friday, March 1, 2024

Create MultiStep Form With Conditional Logic and Icons Using Elementor

With WordPress, it is very easy for anyone to create forms for various purposes. However, it is sometimes difficult for the non techies to integrate it with various CRMs, SMTP services or Databases to store the results.

But with elementor pro, it is very easy for anyone to create the form, specify redirection, integrate it with email marketing services such as Mailchimp or aweber, make it multistep (after the introduction of Elementor v2.10 ) and what not.

Even though these functions are enough for those who are looking to have a form on their website or landing page for leads.

However, if you want some conditional logics on your form or use icons in the fields then currently it is not possible with elementor pro only. As such, to add this and many other functionalities, we will use Dynamic Content for Elementor Plugin which is an awesome plugin to make your elementor based WordPress website more powerful and dynamic.

Dynamic Content for Elementor Form Widgets and Extensions
Dynamic Content's Elementor Pro Form Extension

Required Plugins: Elementor & Elementor Pro, Dynamic Content for Elementor

Once installed you can manually toggle the features of dynamic content for elementor plugin:

  1. Go to: Elementor> Dynamic ContentDynamic Content Elementor Settings
  2. Now you can enable/disable the features that you want.Dynamic Content Plugin WordPress Settings
  3. Here, make sure that features related to Elementor Pro form are enable.Elementor Pro Dynamic Form Extensions
  4. Sometimes, multistep extension of conflicts with the existing elementor pro widget. To eradicate that issue, you can disable ‘Form Steps‘ extension.

How To Make MultiStep Form With Conditional Logic and Icons Using Elementor

Add A Simple Form

From the Elementor widgets, find Form widget and drag it inside the column where you want to display.

Elementor Pro Form Multistep with conditions


Adding Icons inside the form fields (input)

To show icons on the label or inside the form field make sure the dynamic content plugin is activated, and now go to the specific fields and click the magic stick icons. Here you can define the maximum and minimum length for the fields, enable the address autocomplete if it is related to geo and use the icons.

Icons in form fields elementor

Click on whether you want to show it on ‘label' or ‘input' and then select the icon for the field.

icons for form fields in elementor pro

Making the Elementor Form Conditional

To make your form conditional you have to define the conditional logics. We are going to make it conditional using dynamic content plugin. So, make sure you can have installed and activated this plugin.

When the plugin is activated, you can find the condition tab on the fields. Where you can set the conditions based on other fields' values.

conditional logic form with elementor

Turning to Step Form

In order to make your form as a multistep form, you can follow the below steps:

To make your form as multistep, you have to first segregate your form in various steps. For say, you have 6 fields in your form viz. First Name, Last Name, Email, Phone, Subject & Message.

Now you want to make it a multistep form where 3 fields are shown in the step one and the rest in step two. To do this, you will simply add a field after the third field or above the fourth field and choose its type to be “step” (as shown in the screenshot below).

Multistep Elementor Form

You can also do some settings with your step form:

Multistep Elementor Pro Form

Once the structure is ready, you can go ahead to the “style” tab and decorate your form according to your website look and feel.

Don't forget to define the form's actions after submit. Also, you can use Google Capcha to make sure you are not flooded with spam when your form is live on the production website.


Leave a Reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

Related Posts

Stay tuned with us

Table of Contents

Welcome Back!

Login to your account below

Retrieve your password

Please enter your username or email address to reset your password.

Add New Playlist

DroidCrunch Giveaway

Amazon Gift Card worth $15

Participate now and get a chance to become a lucky winner to receive the reward.​