how-to-create-a-multi-part-form-in-wordpress

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

Want to create multi-step forms in WordPress?

Splitting a form into multiple pages helps increase engagement and improve the user experience, all while fighting form fatigue so you get more form conversions.

In this article, we’ll show you how to create a multi-step form in WordPress.

Why Use a Multi-Step Form on Your Website?

Despite adding more steps to your WordPress form, using a multi-step (also known as multi-part or multi-page) form on your WordPress website can actually increase your site’s form conversion rate, especially if the form has more than 3 form fields.

WPForms is the best WordPress Form Builder plugin. Get it for free!

In fact, after splitting what was once a single-step landing page form in WordPress into multiple steps, WhatIsMyComfortZone.com actually saw that 53% of site visitors converted and became leads, even when the form was broken into many steps.

increase form conversion rate

And, since they asked the same questions on each form, it made sense that from then on, all long forms would be turned into multi-step forms on their website.

Here are some more reasons to consider creating a multi-step form in WordPress:

  • Encourage focus: By grouping form questions, you can break down information into areas of focus for the user.
  • Reduce form abandonment: Users will be more likely to complete the information you are requesting when it’s broken down into pages rather than presented as one long form.
  • Collect only what you need: Using our smart form logic, you can present different pages of the form based upon the answers users provide.

For more details, read our article on single vs. multi-step WordPress forms

So, let’s take a look at how to create a multi-step form in WordPress.

How to Create a Multi-Step Form in WordPress


If you prefer written instructions, continue reading below.

Step 1: Create a Form in WordPress

The first thing you’ll need to do is install and activate the WPForms plugin. For more details on how to set up this form builder, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New to create a new form.

You can break any form into multiple parts or steps using WPForms. So, for our example, we’ll create a simple contact form.

On the setup screen, name your form and select the template you want to use, depending on the type of form you’re creating. We’ll choose the Simple Contact Form template.

Simple Contact Form Template

WPForms will create a simple contact form in the drag and drop builder.

Simple Contact Form

From this form builder area, you can add additional fields to your contact form by dragging them from the left hand panel to the right hand panel.

With the simple contact form template, you’ll already have the Name, Email, and Comment or Message form fields.

Click on any of the form fields to make changes. You can also click on a form field and drag it to rearrange the order on your contact form.

If you want to create something more complex than a simple contact form, take a look at some of the other tutorials we have using pre-designed templates that come with WPForms:

These forms tend to be much longer than a simple contact form and will likely require multiple steps to complete if you ask for a lot of information.

Now let’s take a look at how to split your form into multiple parts.

Step 2: Split Your Form into Multiple Parts

Once you’ve added and customized all the form fields on your form, you need to add the Page Break form field to your site to split it into different pages.

To do this, drag the Page Break form field, found under Fancy Fields, from the left hand panel to the right hand panel.

Place the field where you want the form to split.

Add Page Break to WPForms

Do this everywhere you want your form to split into another page. From there, you can add additional form fields to complete your form.

WPForms allows you to create as many form pages as you want, but remember not to overwhelm your users. Only collect the information you need. You can always gather more information later.

Step 3: Customize the Progress Bar

Based on your needs, you might want to show a progress indicator to let users know about the different sections of your form. This way they always know where they’re at on your form and how much they have left to fill out before clicking “Submit” based on progress bars.

To make things super easy on you, WPForms comes with three different breadcrumb style indicator bars for your multi-step forms:

  1. Connectors: shows a connecting bar and page titles of each part of your multi-step form.
  2. Circles: shows one circle and page title per page on your multi-step form.
  3. Progress Bar: indicates the progress of the form as the user fills it out.

WPForms Progress Bar

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

First Page Click for Progress Bar On Multi-Part Form in WordPress

A new panel will appear in the Form Editor where you can choose which progress bar you want to use. You can change the progress indicator’s color here too.

You can also change the page title so users know which part of the form they’re on if you choose the Circles or Connectors option. Otherwise, users will just see a standard progress bar guiding them through the number of steps left on the multi-step form.

Progress Indicator Customizations multi step form

To customize the next page title and the button taking site visitors to the next page on your form, click on the Page Break section you created when you added the page break to your form.

Customize Next Page

You can also toggle on the feature that lets you show site visitors a Previous page button. This way they can return to the previous page of your form if they need to.

Previous Page Copy

When you do this, you’ll have the chance to change the button copy too.

Once you’re done creating all of your page breaks and customizing the progress indicator, click Save.

Step 4: Configure Your Form Settings

To start, go to Settings » General.

Multi-Part Form Settings

Here you can configure the following:

  • Form Name. Rename your form if you want to.
  • Form Description. Give your form a description.
  • Submit Button Text. Customize the copy on the submit button.
  • Spam Prevention. Enable the anti-spam honeypot feature to prevent spam submissions. This feature is automatically enabled on all WordPress forms. If you decide to use another form of spam prevention, unclick this option.
  • GDPR Enhancements. You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. In addition, check out our step by step instructions on how to add a GDPR agreement field to your simple contact form.

When you’re done, click Save.

Step 5: Configure Your Form’s Notifications

Notifications are a great way to send an email whenever a form is submitted on your website.

Notifications

In fact, unless you disable this feature, whenever someone submits a multi-step form on your site, you’ll get a notification about the submission.

If you use smart tags, you can also send a notification to the user’s email address when they submit a form, letting them know you received it and will be in contact shortly. This assures site visitors their form has gone through properly.

It’s also appreciated when it comes to multi-step forms that may have taken a long time to fill out. The last thing a site visitor want to wonder is if the long form they just filled out went through.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

Adding to this, if you want to keep branding across your emails consistent, check out this guide on adding a custom header to your email template.

Custom Email Header

Step 6: Configure Your Form’s Confirmations

Form confirmations are messages that display to site visitors once they submit a form on your website. They let people know that their form has been processed and offer you the chance to let them know what the next steps are.

Again, this is helpful especially when it comes to long forms on your website.

WPForms has three confirmation types to choose from:

  1. Message. This is the default confirmation type in WPForms. When a site visitor submits a form, a simple message confirmation will appear letting them know their form was processed. Look here for some great success messages to help boost customer happiness.
  2. Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their form submission. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to check out our article on creating effective Thank You pages for boosting customer loyalty.
  3. Go to URL (Redirect). This option is used when you want to send site visitors to a different website.

Let’s see how to set up a simple form confirmation in WPForms so you can customize the message site visitors will see when they submit a form on your site.

To start, click on the Confirmation tab in the Form Editor under Settings.

Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.

Form Confirmation Type settings multi step form

Then, customize the confirmation message to your liking and click Save.

For help with other confirmation types, see out documentation on setting up form confirmations.

Now you’re ready to add your contact form to your website.

Step 7: Add Your Multi-Step Form to Your Website

After you’ve created your multi-step form, you need to add it to your WordPress website.

WPForms lets you add your forms to multiple places on your website including your pages, blog posts, and sidebar widgets.

Let’s take a look at the most common placement option: page/post embedding.

To begin, create a new page or post in WordPress, or go to the update settings on an existing one. After that, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.

embed your form by clicking on the Add WPForms icon

The WPForms widget will appear inside of your block. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select the form you just created.

select your multipart form

Then, publish your post or page so your contact form will appear on your website.

Next, click on the blue button in the top right that says either Publish or Update, so your form will appear on your website.

save and publish your multi step form

In Conclusion

And there you have it! You now know how to create a multi-step form in WordPress and you can start improving your user experience and conversion rate right away.

If you’re looking for some multi-step form inspiration, check out this roundup of 5 multi-step form examples.

So, what are you waiting for? Get started with the best multi-step form builder for WordPress today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 2 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

    1. Hi Joseph! You can select your options for the Progress Bar by clicking on the first page break section, as shown here:

      select multi page style options

      But I think you’re right, it would be a good idea to have those options when you click Page Break, too. Thanks for the suggestion! I’ll bring it up with the developers 🙂

  2. Question:

    Can you “navigate” to the different ‘pages’ of the form – by setting up links in a sidebar or top or bottom?

    1. Good question! Unfortunately that’s not possible at this time, but it’s a great idea – I’ll pass it along to our developers. Thank you! You can subscribe to our weekly newsletter (using the form in the sidebar or at the bottom of this page) if you’d like to be alerted when new features are released.

  3. For long, multi-page forms, it would be great if it was possible for the user to be able to return to complete a partially completed form at a later time.

    1. Hi Moiz,

      While we aren’t able to export directly to an Excel file, we offer a CSV export option where you can easily export all entries for a form at once. Here’s our tutorial on CSV exports, which shares how this works in a bit more detail.

      From there, you can open the CSV with a spreadsheet program like Excel and convert the file to a different format if you’d like.

      I hope this helps! If you have more questions about CSVs or anything else, please let us know 🙂

  4. Hi, I would love to be able to use your plugin but cannot afford the pro or agency price plans. I was wondering is there a way with the $39 a year version to add the paypal or stripe features along with being able to break the form into a multiple page form that functions greatly like I saw in a demo video at this price point? If not…Are there any payment plans as I am disabled and on a fixed income and cannot afford these prices all at one time, per year. Thanks

      1. Hi,

        I want to use your plugin but first I have to make clear my requirement.
        I need one email field but user must add unique email id. I mean if email exist in database then there will be the error
        I need two page foem, means after filling first page data user will redirect to second link then they submit the form and it will email the admin and user along with data which user filled in previous page .

        Please let me know as soon as possible so that I buy it.

        Thanks

  5. HI,

    I think that your plugin may resolve my problems, but I have some questions before buying it. With your Basic pricing plan is possible made a Multi Step Form with required inputs that prevent the user see the next step before fill these same inputs? Other thing, is that possible submit the form of current step by instead the submit only in the end? What I want is collect the data from the user step by step to prevent lost the tracking of him in case of the user only fill one of the steps.

    Please let me know as soon as possible.

    Thanks

    1. Hi Luis,

      Sure, to prevent the user from moving forward without completing a page, you’d just need to require those fields. When fields are required, the user isn’t allowed to proceed to the next page until those fields have been completed (they’ll see validation messages, like thost shown here).

      Though we don’t currently have a way to submit the form each time the user goes to a new form page, we do have a tool to capture entries that aren’t completed: our Form Abandonment addon. When used, this will capture entries even if the user doesn’t submit the form.

      If you have any other questions or would like more details, please get in touch and we’ll be happy to help! 🙂

  6. Hello, I was wondering how to change the “Step” text. For example in the progress bar option you could have Page Title – Step 1 of 3. But how can I change the word “Step” to something else like “Question”.
    Thanks.

    1. Hi Mark,

      We don’t currently have a built-in way to change this text. However, you could consider using a string replacement plugin such as Say What. More often used for translations, this plugin will let you replace chunks of text like this. I can’t say I tried it while keeping English (only to switch to a different language), but that’s what I’d suggest looking into.

      I hope this helps! If you have any additional questions, please get in touch 🙂

  7. I would like to create, say, and invoice form where there is a subform being embedded within the parent form.

    For example, the parent form will contain the sales invoice and date, and the subform contains the items information such as part numbers, description, quantity, unitprice and total price. The subform can contain many rows of items.

    Can your WPform plug-in design these types of forms?

  8. Is there a way to give a preset response depending on which option the user chooses in the form? We’re looking to have a multiple choice form, but give a pre-written output depending on their selection, so they can see this before clicking to the next question. Thank you!

    1. Hi J,

      We don’t have a way of showing preset responses depending on a user’s selection while they’re still filling out the form. What you can do, however, is create conditional notification emails based on selections in a form. All this requires is conditional logic, which is built into all of our paid licenses.

      We have a great tutorial on how to set this up here.

      I hope this helps!

  9. Hi there, is it possible to have 2 “fine print” check box options below the submit button? We’re wanting to ask people registering with us to select if they don’t wan’t to hear from us etc? If not, I can leave as is to just above the submit button but is it possible to customise the text of these (only) to smaller font size than the rest of the form?

    1. Hi Jo,

      It’s not currently possible to add form fields below the submit button, but I do have a suggestion on how to get that special text set up easily: using our special “Terms of Service” option. Here’s a tutorial showing screenshots and details on how to set this up.

      I hope this helps! 🙂

  10. Hello, I bought a license at $ 39 and it is supposed to have the option to form multi-pages, but when I put the form online after the first question only the progress bar appears and not the rest of the form . Is there a special setting to correct this?

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.