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.

Step-> 2  #

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

Step-> 3 #

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

Step-> 4  #

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

Step-> 5  #

Now build your Form using any widgets

Step-> 6  #

Drag and drop the Next Step button widget.

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.

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.

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

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.

Step-> 11 #

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

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.

Step-> 13 #

Finally, click on update to save.

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