In this article we're going to discuss building a multi page form with WPForms. if you're a business that needs to collect a lot of information about a lead or a Customer on line, chances are you have a long form on your website.
Not only does this take up a bunch of space, but it scares visitors away. On the flip side, if you create a multi page form that splits your fields into multiple pages, you'll see your conversion rates grow, and your website will look cleaner and simpler.
In this article, we're going to discuss the benefits of multi page forms, and how to integrate one into your website using WPForms.
Multi page forms statistically lead to higher conversion rates. If you have a form with 12 fields on your website, you may be able to increase the number of leads/submissions that it generates by simply breaking it up into 4 pages with three fields each.
Why?
Shorter forms are easier for visitors to initiate with. Once a visitor has entered information into your form, even if they are presented with additional pages, they have already committed themselves to filling it out leading to a lower conversion rate. With a longer form, your visitor may subconsciously think “oh that's going to take a lot of work to fill out, I'd rather not”.
There are numbers to back these claims up. Another company who simply split a long form into 2 pages (no other changes were made) resulted in a 59% increase in conversion rate.
An astroturf company who a/b tested a one step form versus a multi step form saw a 214% increase in lead generation.
Keep in mind, that this implementation is only good for forms with many fields. If you have a form with only three fields, it's probably best to keep it on one page.
If approaching it from a design standpoint, a smaller form is easier to fit into the page. As an agency, we try to keep all of our forms within the viewport of the page. We don't want our visitors needing to scroll through the page to find the submit button, as that is a poor user experience that leads to lower conversion rates. For longer forms, it just makes sense to split them across multiple pages.
When we refer to multiple pages we mean form pages (or steps). The overall website page doesn't change, it's just the fields in the form that do. Here's an example of this from Zen business:
Zen business is a LLC incorporation Company. If you're looking to file an LLC, if they will do it for you making the process much easier. As part of their customer onboarding process, they need to collect a lot of information from you. Instead of presenting you with a massive page filled with hundreds of fields, they choose to split up their data collection process across multiple form pages. Not only does this increase the user experience, it makes it easier to use, and doesn't scare visitors away from large forms (and one that is collecting personal information).
Now that we know why we may want a multi page form, let's go ahead and create one with WPForms. The reason we're using WPForms is because it's extremely easy to set up, the multi page functionality is baked into the base plugin, and our entry management system is great (There's also a cool add-on that we will be discussing which increases your conversion rate ).
The process of creating a multi page form with WPForms is fairly simple. First create a new form in WPForms, and use the blank form template.
On our first page, we are going to collect essential information about our customer. For us, that includes a first name, last name, and email. Then, we're going to have a second page which collects more specific information, and finally, a third page where customers can enter comments or concerns.
Obviously, the specific fields are unique to your company's needs. Also, if you're retrofitting an existing form, you can simply take the fields from that form and add page breaks in between.
Create the first page by dragging the necessary fields onto the canvas.
Now, Scroll down to the "fancy fields" section of fields and add a page break. This page breaks specifies where one page ends and another page begins. Because we're dragging it into the space after our email field, the name and email fields will be on one page, the user will click a next button, and be directed to the next page.
Here's what our form currently looks like.
We have our first page which collects contact information and our second page which collects more customized information. Finally, we're going to add the last page which collects comments in a paragraph textfield.
As you can see, we have 3 pages and two page breaks. To transfer from page to page, you click the next button on the front end. There's also a progress indicator which will show visitors on the front end how much progress they have made when navigating through the form.
In their default form, the label for the button that toggles between the pages is next. You can easily change that by going to the field options for the page break. You can also change the page title.
Now that we've set up our form, let's embed it on a front end page and preview its functionality. By clicking the embed button on the upper right hand corner of the WPForms editor, a popup will be toggled which displays the short code to embed your form on any poster page. We're going to copy that short code and paste it into a page via the Gutenberg editor.
On the front end, you can now see the three step form that we have just created. If we remove the steps, this form will be long and gangly, leading to a lower conversion rate.
You can easily style the form to match your businesses and websites branding.
Form abandonment is a fact of life, but we can minimize the impact of it by using a handy add-on that comes with WPForms.
This addon is called “WPForms Form Abandonment”. WPForms Form Abandonment Collects information as it is entered into the form. That means that if somebody fills out the first step, but abandons the form on the second and third steps, we still have the essential contact information which we can use to follow up with the visitor at a later date.
This helps increase the number of leads generated, and minimizes the impact of form abandonment. Because this is a longer form, you're bound to have some visitors who fill out the first couple of steps but still abandon the form.
Setting this up is extremely easy. Make sure that you have installed the add-on into Your WordPress website (this is done by uploading the zip file as a plugin), And then navigate to the settings panel for your multi step form.
Navigate to the form abandonment tab, and check off the “enable form abandonment lead capture” setting. By default, it will only save entries if an email or phone number is provided.
On the front end, be sure that you are properly disclosing the fact that information is collected as it is entered.
Using multi page/step forms can seriously benefit your conversion rate. It makes it easier for visitors to enter information, makes the form look smaller and fit better on a page, and allows you to collect a lot of relevant user information in one go.
WPForms is a great choice for this do to its powerful features packaged into a simple to use interface. With that, you can make a form with as many pages as you want and easily add it to the front end of your website.
You can also make use of the form abandonment feature, which collects usable contact information as it is entered. That's why the first step of our example form collected a name and email. Even if the visitor abandons the form in subsequent steps, we would have a name an email to contact at a later date.
if you have any questions about making a multi page form in WPForms, feel free to reach out in the comments section below.
I am considering LatePoint and greatly appreciate your article. I have a question I can't seem to get an answer to on their site. In the back end, when admins are looking at their calendar, can they only see type of service booked (as I found in one back end screenshot), or can client's names be seen? I have a private practice and just seeing type of service is pretty useless. I want to see booked clients names. Is that possible with LatePoint? Thank you so much.
Client names can definitely be seen: head to the [eafl id="4803" name="LatePoint" text="Codecanyon "]page, the click "Live Preview" directly under the main image. That'll give you a demo version to play around with.
Thank you so much. When playing with the demo so far, it I needed to click on a confirmed appt at a specific date and time to get a pop up window with the client info. Do you know whether it's possible to have the client names right on the page, without having to click on every single name just to find out who is booked when on pop up windows? THank you for your patience! Very much appreciated.