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](https://wpmet.com/wp-content/uploads/2021/11/step-one-metform-documentation.png)
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](https://wpmet.com/wp-content/uploads/2021/01/step-2-click-to-create-form.png)
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](https://wpmet.com/wp-content/uploads/2021/01/step-3-create-new-form.png)
Step-> 4 #
Click the ‘Plus’ sign button to add a new section.
![Choose layout to create WordPress multi-step form with MetForm](https://help.wpmet.com/wp-content/uploads/2019/12/multi-step-04.png)
Step-> 5 #
Now build your Form using any widgets
![Drag and drop fields to create multi-step from](https://help.wpmet.com/wp-content/uploads/2019/12/multi-step-05.png)
Step-> 6 #
Drag and drop the Next Step button widget.
![Drag and drop multi-step form widget with MetForm](https://wpmet.com/wp-content/uploads/2021/11/next-step.png)
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](https://wpmet.com/wp-content/uploads/2021/01/Edit-multi-step.png)
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](https://wpmet.com/wp-content/uploads/2021/11/Add-a-new-tab.png)
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](https://wpmet.com/wp-content/uploads/2021/01/Second-steps.png)
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](https://wpmet.com/wp-content/uploads/2021/01/third-step.png)
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](https://wpmet.com/wp-content/uploads/2021/01/update-and-close.png)
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](https://wpmet.com/wp-content/uploads/2021/01/multi-step-settings.png)
Step-> 13 #
Finally, click on update to save.
![How to add multi-step form with MetForm](https://wpmet.com/wp-content/uploads/2021/01/Click-on-updae-to-save.png)
Here is a created multi-step form example by Metfrom:
![Multi-step form example that is built with MetForm](https://wpmet.com/wp-content/uploads/2021/01/Multi-step-form-preview-documentaion-Metform.gif)