RafflePress Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a Multi-Step Form in WordPress (Without Coding)

Last Updated on November 13, 2020 by Stacey Corrin

Do you want to create a multi-step form in WordPress? A multi-step form is a longer form that’s split over multiple pages. By breaking forms into multiple parts, you can increase your form engagement, conversion rates and improve user experience.

In this blog post, we’ll show you how to create a multi-step form in WordPress without touching a single line of code.

Before we start, why should you consider using multi-step forms on your website?

Why Use Multi-Step Forms On Your Website?

A multi-step form is a type of web form that is split into more than one page. Using one ensures your visitors won’t have one long form to fill in. Instead, the process of filling in your form is spread over several steps.

Adding more steps to a form might seem counterintuitive. If there are more steps to take, wouldn’t it put people off completing it?

The truth is, a multi-step form can have the opposite effect and increase your form conversions, especially if it has more than 3 form fields.

Take WhatIsMyComfortZone.com, for example. They converted 53% of visitors into leads by breaking their form into multiple parts.

Aside from increasing conversion rates, multi-step forms can also:

  • Improve focus: When you break down form questions, you can group them into specific topics to help users focus.
  • Minimize form abandonment: Website visitors are more likely to complete your form when you break it down into manageable pages rather than a single long form.
  • Increase trust: You can create multi-step forms using conditional logic to show different pages based on the answers users provide. This ensures you only collect the information you need, making users more confident by not handing over too much personal data.

Now that you know the benefits of creating a multi-page form in WordPress let’s look at the steps to build one for your website.

How to Create a Multi-Step Form in WordPress

The easiest way to create a multi-step form in WordPress is with one of the many WordPress plugins available. The best tool for the job is WPForms, the best WordPress contact form plugin.

WPForms is the most beginner-friendly form builder on the market. It gives you the ability to create a WordPress form for almost any purpose without needing to code. For instance, you can create registration forms, signup forms, survey forms, and more.

It comes with an easy drag and drop form builder and various form templates to make creating your forms a breeze.

Why not check out our WPForms review to see all the details.

The Lite version of WPForms has all the necessary features you need to make a simple contact form. Yet, to enjoy advanced features such as conditional logic, survey forms, advanced form templates, and multi-step forms, it’s best to use WPForms Pro.

We’ll use the WPForms Pro contact form plugin for this guide, which has everything you need to create a multi-step form in WordPress.

Let’s get started.

Step 1: Create a New Multi Step Form in WordPress

The first thing you need to do is install and activate the WPForms plugin on your website. Click here to get started with WPForms, and if you need a little help, you can learn how to install a WordPress plugin here.

Once WPForms is installed, navigate to WPForms » Add New from your WordPress admin area. This reveals the form templates page, where you can choose from a variety of form types.

Create multi step form in WordPress

It’s easy to split any type of form into a multi-step form with WPForms, so let’s look at how to do that with a contact form. 

Go ahead and give your form a name and click the Simple Contact Form template.

Choose the simple contact form template

After clicking, WPForms will load your template into the drag and drop form builder.

Use the WPForms drag and drop form builder to create multi step form in WordPress

You’ll see that your simple contact form already has the Name, Email, and Comment or Message form fields. You can change the fields’ order by clicking, dragging, and dropping them anywhere on your form.

It’s also easy to add extra fields to your form by dragging them from the left-hand panel and dropping them onto the right.

When you’re happy with your fields and their position, click Save and move on to the next step.

Step 2: Split Your Form into Multiple Steps

To split your form into different stages, you need to use the Page Break form field.

To do this, navigate to the Fancy Fields section in the left-hand panel. Then click the Page Break field and drag it to your form.

select the page break field to create a multi-step form

It would be best if you placed the Page Break where you want your form to split.

Place the page break where you want to split your form into multiple parts

Repeat those steps for every place where you want your form to break into another page. After that, you can add additional fields to those sections to complete your form.

You can create as many form pages as you like in WPForms. However, it would be best if you didn’t overwhelm your visitors. Try only to include requests for the information you most need. You can always collect more details later.

Step 3: Show and Customize Your Progress Bar

You might wish to show a progress bar on your forms based on your business and website needs. Progress indicators tell users which stage they’re at in your form and how long is left until completion.

Since most people don’t like leaving things half-finished, showing users their progress is an excellent way to spur them into finishing and submitting your form.

WPForms Progress indicator types

WPForms has 3 different progress bars you can add to your multi-part form, including:

  1. Connectors: A breadcrumb style bar showing a connecting bar with page titles for each form section.
  2. Circles: Individual circles with titles for each form step.
  3. Progress Bar: Shows the progress users take through your form with a partially colored bar.

Click on the First Page break section to display and customize the progress bar on your multi-step form.

Click the first page break to add a progress bar to your multi-step form

This reveals a new panel in your form builder to choose your progress indicator style and color.

choose a progress bar style to customize

If you choose the Connectors or Circles progress indicator style, you can also change the page title to show users which stage they’re at in your form.

The Progress Bar style offers a normal progress bar guiding users through the steps left to complete your form.

To customize the Next Page title and button that takes users to the next form section, click the Page Break section you inserted into your form during setup. The customization options will appear in the left-hand panel of the form builder.

Choose a page break page title

If you like, you can also add a Previous button for users to go back to the page before. To do that, turn the Display Previous toggle to the On position. When you do that, you can also change the title for that button.

Click the previous page break to customize the previous page title and button label

When you’re happy with your page breaks and progress indicators, click the Save button.

Step 4: Configure Your Form Settings

In this step, we’ll look at the settings for your multi-part form. First, click the Settings tab and select the General option.

general settings for your multi-step form

You can give your form a new name and description on this screen, customize the submit button, and enable anti-spam features such as Google Recaptcha.

You can also enable AJAX settings and disable the storing of information to comply with GDPR requirements.

Remember to click Save when you’re happy with your settings.

Step 5: Set Up Your Form Notifications

Now click the Notifications section on the left-hand side of the settings page. This is where you can configure notifications for your multi-page form.

configure your form notification settings

Form notifications are emails sent to you whenever users submit a form on your website. Notifications are turned on by default in WPForms, so if you don’t wish to receive email notifications, choose Off from the dropdown menu.

You can also use Smart Tags to send an email to each user’s email address after submitting a form. This is an excellent way to reassure users that you’ve received their responses. Many users will appreciate this after taking the time to fill out a form with multiple stages. Otherwise, it could leave them wondering if the form went through correctly.

If you need help with this step, you can view the WPForms documentation on setting up form notifications.

After setting up your form notifications, click Save.

Step 6: Choose Your Confirmation Message

The next step is to choose the confirmation messages for your multi-stage form. Click the Confirmations heading on the Settings page to reveal the options.

Choose a confirmation message type for your WordPress multi-step form

Form confirmations let users know their form was submitted correctly and allows you to tell them the next steps they should take.

In WPForms, there are 3 confirmation types you can choose:

  1. Message: This is the default confirmation type and shows a simple success message when users submit their form.
  2. Show Page: This confirmation type takes users to a different page on your website, such as a thank you page.
  3. Got to URL (Redirect): With this confirmation message, you can send users to a page on a different website from yours.

Now choose your preferred confirmation type from the dropdown menu, then customize it with your message or URLs.

When you’re happy with how everything looks, click Save.

Step 7: Add Your Multi-Step Form to WordPress

Once you’ve created your multi-step form, it’s time to add it to your WordPress website. With WPForms, you can add your form to various places on your website, including a page or post, a sidebar, or even inside your WordPress theme.

The most common placement is to embed your form in a WordPress post or page, so let’s look at how to do that here.

First, create a new post or page in WordPress, or you can click Edit on an existing one. Once you’re inside the WordPress editor, click the plus (+) icon to add a new content block.

click the plus icon to add a new WordPress block

Scroll down to the Widgets heading and click the WPForms widget to embed the block into WordPress.

Click the WPForms WordPress block to embed it in your new page

Next, click the dropdown menu and select your multi-step form.

Select your multi step form from the dropdown box

WPForms will display the form inside your WordPress editor so you can preview how it looks before publishing.

Your multi-part form will display in the WordPress editor

The final step is to click Publish or Update to make your form live. Here’s an example of how it will look to your users:

Publish multi step form in WordPress

That’s it!

We hope this article helped you learn how to create a multi-step form in WordPress. Even better, you didn’t have to touch a single line of code!

While you’re here, you might also like this comparison of the best lead generation tools to grow your business.

And don’t forget to follow us on YouTube, Twitter, and Facebook for more great tips to grow your business.

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Copyright © 2021 SeedProd LLC. RafflePress™ is a trademark of SeedProd LLC

Terms & Conditions | Privacy Policy | Sitemap | RafflePress Coupon Code