Elementor – Multi Step Forms

Elementor – Multi Step Forms

Required plugins: Elementor (free),  Advanced Custom Fields (free), and ACF Frontend Pro

Multi Step Forms allow you to create forms which are split into multiple steps or “pages”. This is especially useful for longer forms or forms with multiple parts. The user can navigate through the pages when filling out the form.

Creating the Form

First you create a form like any other. Create the page and hit Edit in Elementor. Then add the appropriate widget. Multi step forms are supported by all the form types. 

You can start adding fields right away and convert it to a multi-step form later, as well as convert existing forms to multi-step.

Turn on Multi Step Forms

Under the “Form Fields” section, near the top, there is a selector to enable Multi Step. Turn this on and the multi-step feature will be activated. This will add a few new fields to the form which have the field type of “Step”.

Configure the Steps

The fields are grouped into the different steps by the new “Step” field which is added to the form. The first field is set in place as you need to have at least one step. Add another step field and move it to the point in the form where you want the second step to start. All fields between the step fields will be shown in the first step.

To add a third step, duplicate the step field and move it to where you want the border of the next step to be.

There is no need to add a step at the end of the form.

Step Options

Each Step Field has several options. In addition to the actual fields within the form, multi-step forms contain several other elements. This includes a step title at the top of the form, the name of the step in the navigation tabs, forward and backward buttons for navigating the form, and the submit button. Note that in multi-step forms there is no distinct submit button, the submit button is actually the “Next Button” in the last Step field.

  • Step Emails: You can define an email to send at the end of the step.
  • Step Title: This adds a title for that step. This is shown at the top of the form for that step.
  • Step Tab Text: This defines the name of the step in the navigation tabs.
  • Previous Button: Here you can set the text for the button which navigates to the previous step.
  • Next Button: Here you can change the text of the button which navigates to the next step. In the last step of the form this button acts as the submit button for the whole form.

Steps Settings

In addition to the individual step options, there are several controls to configure the entire form.

Steps Display

This defines what types of navigation info and buttons will be visible. By default this includes the tabs. You can disable this if you wish. There is also an option to add a counter which is shown at the top of the form. This will show the user how far along the form they are.

Step Tabs Display and Position

Here you can add responsive formatting for the tabs. Choose which devices you would like to show the tabs, and the other devices the tabs will be hidden. The user will then be able to navigate via the step button at the bottom of the page.

You can also configure the tabs to be shown beside the form instead of above it.

Step Counter Display

Similar to the tabs, you can configure the counter to only show on certain sized screens. 

Step Counter Prefix and Suffix

This defines the text shown before and after the actual numerical step counter. By default, the prefix is “Step” and the suffix is blank, but you can set them to be anything you like, including dynamic tags.

Step Number in Tabs

This adds a prefix to the step titles which show the step number. You can also set each step’s title manually if that fits your needs better.

Link to Step in Tabs

By default the step tabs are simply for display. If you enable this option the tabs will all be changed into links the user can use to navigate the form. This allows them to jump around instead of needing to navigate a single step at a time.

Conclusion

Make sure you save the page with your edits and your form will be ready to use!

Elementor – Multi Step Forms

Still stuck? 
Contact our support team here.