How to Create Multistep forms

A- A+

You can easily create multistep forms using WP User Frontend Pro. In this documentation, we will demonstrate the process of creating, editing and adding multistep forms to your website frontend.

Enabling Multistep form Post Settings

Before creating the form, you have to enable the Multistep Feature form –

WP Dashboard → User Frontend → Forms → Add Forms → Post Settings

Now, scroll down to the bottom of the page and you will find the Enable Multistep option.
Please Remember, this settings is only for this certain form you are creating. You have to enable this setting every time you create a multistep form.

After enabling the multistep option, you will get the Multistep Form Settings. You can change the type of the progressbar from here. There are two options included- one for a progress bar and another one for step by step.

You can select either one of them as they are just for styling. You can also change the active text color and active background color.

Bonus Tips

You can enable the saving as draft option from the post settings. This will allow your users to save the progress and come back later to finish it when you have a large multistep form.

Creating Multistep Forms

Now, navigate to Form Editor tab and add a Step Start Field from the Custom Fields.

After that you can add other fields according to your requirements.

Please note that you have to add a Step Start field to create a new step.

When you are done with creating the form hit the Publish/Update button.

Congratulations, You have successfully created a multistep form.

Adding Multistep Forms to your Web Frontend

Adding the multistep form is similar to other forms. Just copy the form id and paste it to a new post or page of your website. Hit the publish button and visit the page to see your newly created multistep form.

How the Multistep Form Looks

In this tutorial, we have used step by step progressbar type. This is how the form looks from frontend. After entering relevant information on the fields, you can click on the next button to view the next step.

This is the last step of the multistep form. You can also use the previous button to navigate back to the previous steps of your form.

Here, you will get the submit button.