Amay Web Design

AMAY WEB DESIGN LOGO

Website Design & Development

WordPress – Shopify – more!

SUNSHINE COAST, QLD
0417 772 279

WordPress Multi-Step Form -Without Any Code

There are times when you need a longer form for your site, but having a lengthy form makes the form filling process long and tiresome. It is very likely that the person filling in your form will be overwhelmed and will give up before the form is completed and submitted.

It’s important that the forms are filled in, so what is the answer?

Multi-page forms !

By splitting your form into multiple pages it will boost user engagement and conversions. User experience is also improved by splitting your form as it reduces form fatigue. All round, this is going to provide a better experience for everyone. 

In this article, we are going to show you easy steps to creating a WordPress multi-page form using WPForms

WPForms is a drag and drop WordPress form builder that makes it super easy to create any kind of forms like contact forms, registration forms, survey forms etc with its easy to use interface, even for those who have little technical knowledge.

How To Create Multi-Page Forms In WordPress Using WPForms?

Below you can follow the step by step tutorial or if you would prefer to watch a video, you can below. 

 

Step One: Create A New Form

Before doing anything, you need to install the WPForms in your WordPress website. You can see how to do this by going to our article here.

If you would like even more functionality, you can install WPForms Pro.

1. Go to Forms -> Add Form. From the list of pre-made templates, select the Simple Contact Form template and name it.

Now you are ready to  modify the form. Do this simply by dragging and dropping fields from the left-side panel.

There are other templates to choose from based on your form requirements.  such as Servey form, Job application form, Poll form, etc.

Step Two: Split Your Form to Multi-Pages

After customising the form fields, you are ready to add a new page to your form.
To do this, click on the Pagebreak field from the left-hand panel under the Fancy Fields section and place it in your form where you want to split it.

Complete your form by adding extra fields. You can split your form into more pages if you like, but keep in mind that if you overdo it, you may overwhelm the user. 

 

Step Three: Customising The Progress Bar

Adding a progress bar can help encourage users to continue to fill in larger forms. If they can see a visual prompt that there is only a certain percentage left to fill in they will continue to fill in the form. 

WPForms makes it easy to customise the Progress bar as it offers three different breadcrumb style indicator bars for your multi-page form.

  1. Connectors: This option shows a connecting bar and page titles of each part of your multi-page form.
  2. Circles: This option shows one circle and page title on each page of your multi-page forms.
  3. Progress Bar: This option indicates the progress of the form as the user fills it out, and how much more of the form is to go.

To customise the progress bar and page title of the first page of your multi-step form, click on the First Page break section.

You will see options appear on the left-side panel.  From here you can choose the progress bar you want to use and the progress indicator’s colour to match your theme colours.

Note: If you choose the Circles or Connectors. you can change and add the page title.

Click on the Page Break section to customise the next page title and button which takes visitors to the next section. 

Next toggle on the feature that lets you show site visitors a Previous page button. By doing this, your visitors can return to the previous page of your form if they need to.

You can continue adding form fields after the page-break if needed. Once you are finished setting up your form, press the  “Save” button on the top right corner.

Now, you’re are ready to add your form to your website via a widget or on a page or post. For more information on how to configure and add your new form to your website, you can read our ‘How to add WPForms to your WordPress website‘ article. 

Leave a Comment