Multi-Step Form (Pro)

Get Started #

Metform lets you create a lengthy form with great ease. Now, create WordPress Multi-Step Forms easily by using any widgets.

Watch the video guide to add Elementor multi-step form:

Or, follow the step by step instructions below to add a WordPress multi-step form:

Step-> 1  #

Search the Metform widget and drag it to the widget placement area.

Use MetForm to add a multi-step form

Step-> 2  #

Click on the  Edit Form button on the left to open a window to create a form.

How to create a multi-step from with MetForm

Step-> 3 #

Choose New to create a new form. GIve at Title. Now, you can select a blank template and click on Edit Form

Create a new form with MetForm

Step-> 4  #

Click the ‘Plus’ sign button to add a new section.

Choose layout to create WordPress multi-step form with MetForm

Step-> 5  #

Now build your Form using any widgets

Drag and drop fields to create multi-step from

Step-> 6  #

Drag and drop the Next Step button widget.

Drag and drop multi-step form widget with MetForm

Step-> 7  #

To name the section. Click on the six dots to go to the settings of the section. Then go to layout ⇒ multistep. Here change the multi-step tab title and add an icon if you want. You can add an icon from the library or upload a new one.

Layout adjustment of multi-step form with MetForm

Step-> 8 #

To add a new step/ phase of the form again take a new section by clicking on the + sign. 

Note: Remember, you need to start a new section (not the inner section) for a new tab/step of the form.

Add new step to your multi-step form

Step-> 9 #

Now drag and drop the widgets again to build your second step. After that add Prev and Next buttons. Then follow step 7 to give a proper name and icon to this section/tab

Change layout of the multi-step form

Step-> 10  #

Repeat steps 7,8 and 9 to create another step of the form. But this time add submit button instead of Next to complete Elementor multi-step form.

How to add multi-step form in WordPress

Step-> 11 #

Finally, click on update and close to save the multi-step form design and go back to settings.

Update the WordPress multi-step form design

Step-> 12 #

Now it’s time to turn on the multi-step feature. To do that go to Go to Content ⇒ Multistep Settings and edit the following settings:

  • Enable Multistep: Turn this option on to enable the multistep option. 
  • Adaptive Form Container Height: This option will enable the form to take the height of the current step.
  • Display Multistep Nav:  You can disable this option in case you don’t want to show the nav option on the top.
  • Enable scroll to the top: Turn this option on to have a scroll to the top option.
  • Alignment:  Here you can set the alignment of the multi-step nav to left, right, or center.
  • Typography: You can change the family, weight, transform, line height, etc for the multi-step.
  • Padding:  Set the left, right, top, and bottom padding for the multi-step form.
  • Margin: Adjust the left, right, top, and bottom padding for the multi-step form.
  • Text
    • Normal: Here you can edit the Color, Background Color, Border Type, Icon size, icon spacing, and icon size for the normal mode.
    • Active: Choose the Color, Background Color, Border Type, Icon size, icon spacing, and icon size for the Active mode.
    • Hover: Edit the Color, Background Color, Border Type, Icon size, icon spacing, and icon size for the hover mode.
Create a multi-step form with MetForm

Step-> 13 #

Finally, click on update to save.

How to add multi-step form with MetForm

Here is a created multi-step form example by Metfrom:

Multi-step form example that is built with MetForm
What are your feelings
Updated on June 12, 2022