A Step-by-Step Guide on How To Create an Engaging Multi-Page Form on Your Website

Firstly, Why Should You Use a Multi-Step Form on your WordPress Website?

Filling in forms can be a very tedious task, and half-way through a form you might get distracted by an email or SMS and that form is never completed. It is super important to make users fill in your forms to increase your sales or just add another contact to your e-newsletter.

Using a multi-step form on your WordPress website can actually increase your site’s form conversion rate. Other reasons to use multi-step forms include:

  1. It encourages the audience to focus on one section at a time and not get distracted.
  2. It reduces form abandonment due to the nature of the multi-step form which means conversions increase
  3. Use conditional logic to collect exactly what you need from the user and also customise your form for each user.

In this tutorial we will be using WPForms:

Step 1: Create a New Form in WordPress using WPForms:

Install and activate the WPForms plugin from the WordPress plugin repository or dowload it from the WPForms site.

Then navigate to WPForms in your WordPress menu and create a new form by choosing the Simple Contact Form template.

Step 2: Split Your Form into Different Sections using the Page Break Form Field

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

Drag the Page Break form field, found under Fancy Fields, from the left hand panel to the right hand panel where your form fields are located.

Step 3: Customise the Progress Bar with either connectors, circles or a standard bar

You can choose:

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

Step 4: Configure Your Form Settings

Customise the following settings:

  • Form Name 
  • Form Description
  • Submit Button Text 
  • Spam Prevention: Stop contact form spam with the honeypot feature or Google reCAPTCHA
  • AJAX Forms: Enable AJAX settings with no page reload.
  • 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.

Click Save.

Step 5: Configure Your Form’s Notifications

Unless you disable this feature, whenever someone submits a form on your website you’ll get a notification about the submission. For help with this step, check out how to set up form notifications in WordPress.

Step 6: Customise Your Form’s Confirmations

WPForms has three confirmation types to choose from:

  1. Message: A simple message confirmation will appear letting them know their form was processed.
  2. Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their form submission.
  3. Go to URL (Redirect). This option is used when you want to send site visitors to a different website.

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

Step 7: Add Your Form to Your WordPress Website

WPForms lets you add your forms to multiple places on your website including your pages, blog posts, and sidebar widgets. You can embed it in pages and blog posts using the short code which is unique to each form or drag it into a widget section and select the form you want to show.

WPForms makes it super easy for anyone wanting to add forms such as this to your website. If this is still not enough information for you please visit: https://wpforms.com/how-to-create-a-multi-part-form-in-wordpress/

You can also view this tutorial by WPForms:

Please follow and like us: