How to Create a Multi-Step Form in WordPress (Without Coding)
Are you looking for an easy way to add multi-page forms to your WordPress website? Breaking forms into multiple parts can increase your form engagement, conversion rates and improve user experience.
In this step-by-step guide, 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.
Creating Multi-Step Forms in WordPress
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.
For this guide, we’ll use the WPForms Pro contact form plugin, which has everything you need to create a multi-step form in WordPress.
Let’s get started.
Step 1: Create a New 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.
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.
After clicking, WPForms will load your template into the drag and drop form builder.
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.
You should place the Page Break where you want your form to split.
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, you mustn’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
Based on your business and website needs, you might wish to show a progress bar on your forms. 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 has 3 different progress bars you can add to your multi-part form, including:
- Connectors: A breadcrumb style bar showing a connecting bar with page titles for each form section.
- Circles: Individual circles with titles for each form step.
- Progress Bar: Shows the progress users take through your form with a partially colored bar.
To display and customize the progress bar on your multi-step form, click on the First Page break section.
This reveals a new panel in your form builder where you can choose your progress indicator style and color.
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 set up. The customization options will appear in the left-hand panel of the form builder.
If you like, you can also add a Previous button so users can 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.
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.
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.
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.
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:
- Message: This is the default confirmation type and shows a simple success message when users submit their form.
- Show Page: This confirmation type takes users to a different page on your website, such as a thank you page.
- Got to URL (Redirect): With this confirmation message, you can send users to a page on a different website from yours.
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.
Scroll down to the Widgets heading and click the WPForms widget to embed the block into WordPress.
Next, click the dropdown menu and select your multi-step form.
WPForms will display the form inside your WordPress editor so you can preview how it looks before publishing.
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:
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.