CodeNewbie Community 🌱


Posted on

How to Create a Multi-Step Form in WordPress

In this tutorial, we’ll be using WPForms to create multi-part forms in WordPress. WPForms is the best drag and drop WordPress form builder plugin. And with over 3 million active installs, it’s the most beginner-friendly tool available.

Step 1: Create a New Form in WordPress

The first thing to do is install and activate the WPForms plugin. If you’re not sure how you can follow this step-by-step guide to installing WordPress plugins for beginners.
With WPForms, you can split any type of form into multiple parts, so let’s go ahead and build a simple contact form.
Head to WPForms » Add New to create a new form and view the available templates.
Then on that screen, give your form a name and choose the Simple Contact Form template.
WPForms will now open the template in the drag and drop form builder for you to edit.

Step 2: Split Your Form into Multiple Parts

Once you’ve customized your form and added the fields you need, add the Page Break field to split your form into different pages.
You can do this by looking under the Fancy Fields heading and dragging the Page Break form field to the right-hand panel.
Then drop the field on your form where you want it to split.

Step 3: Customize Your Form Progress Bar

To increase the flow of your form, you can include a progress bar. A progress bar tells people about the different sections of your form and is a great visual indicator for how much is left to complete.

WPForms comes with 3 different progress indicator bars for multi-step forms which are as follows:
Connectors – Connecting bars and page titles for each step of your form.
Circles – Numbered circles and page titles for every form step.
Progress Bar – Indicator of the user’s progress as they complete form steps.

Step 4: Edit Your Form Settings

Now let’s move on to editing your form settings. To do this, go to Settings » General.

Step 5: Set Your Form Notifications

The notification settings in WPForms, send an email when a form is submitted on your WordPress site.
You can find the notification settings by clicking Settings » Notifications.
Yet if you don’t disable form notifications, you’ll receive an email for every form submitted on your site.

Step 6: Define Your Form Confirmation Message

Form confirmation messages are brief messages shown to users when they’ve submitted a form on your site. It’s an excellent way to tell people their form is being processed and what steps to take next.

There are 3 confirmation message types in WPForms which include:

Message – A simple message letting users know their form was submitted.
Show Page – Send users to a different page, such as a thank you page after submitting their form.
Go to URL (Redirect) – Send site visitors to a different website after the form submission.

Step 7: Add Your Form to WordPress

Once you’ve created your multi-step form, it’s time to add it to your WordPress site. With WPForms, you can add your form to many areas of your website. This includes your site page or post, your sidebar, and any other widget-ready areas.
Let’s look at how to add your multi-step form to a WordPress page.
To start, go to your WordPress admin area and click Pages » Add New.
Then click the plus icon in the WordPress editor to add a new content block. In the search field, type WPForms to find it easily.

Reference Blog
How to Create a Multi-Step Form in WordPress

Top comments (0)