We needed a damn good multi-step form in WordPress for our lead generation business.
I'm not talking capturing a couple of email address leads per day from your website, but rather spending thousands of dollars in paid ads, to a run leads through a comprehensive qualifying form... and then reselling those leads.
We had been using a simple form using the Contact Form 7, which was simple and effective, but lead buyers pay more for the leads if more questionnaire style information is captured.
Sticking more fields into this form certainly isn't advisable by modern UI standards. What would be a 'modern' solution? A multi-step form.
There has also been some research showing these forms radically increase conversions -- such as this one finding a 300% increase.
So I set out to test a multi-step form.
To test things out quickly and easily, I used Jotform. This would allow me to see how much of an investment the multi-step form I should make, and where it would be on the priority list. But it wasn't a long term solution due to the data we need to capture and pass through API to resell the leads.
I basically used a fullscreen card form as my landing page, sending paid ads right to what you see above.
HOLYSMOKES... it kicked ass. Within 24 hours it was showing some shockingly good numbers. Like 2x our conversion rate.
I was ready to delve into making this happen on WordPress.
Why not stick with Jotform?
Jot form was easy to use and the frontend was great for capturing conversions, unfortunately Jotform does not allow scripts to run in the form, nor have the functionality to place our required legal notices on page in an optimal spot and pass that through api.
Myself and two of my awesome team members spent the better part of week diving into this to get the best converting multi step form done on WordPress
I don't know precisely how many hours we all spent but 40 hours per week x 3 people =160 hours. Even if we didn't spend the full time on it, there was a lot of freaking time, effort and research into this.
What we needed from our multi step WordPress form.
Main focuses for conversion...
- Be fast between steps. We could not stand to have users waiting for each step of the form to load as this would kill conversions.
- Activate next step on click. If there was a multiple choice question in one step, it needed to go on to the next step when the user selected answer (without the user selecting 'next').
Ideally these really needed to be built in. Custom coding or overriding them would be complex and likely lead to constant 'bug chasing'.
Secondary focuses...
- Intuitive and easy to use. We needed to easily be able to create forms and customize them highly, with minimal CSS overrides.
- Webhook. Pretty much all form builders have this.
The shortlist.
We started by making a list of all the multi step WP form plugin we know.
- Contact Form 7. There is a CF7 multi step add-on available on Envato we would buy and try for about $30.
- Gravity Forms. Has multi step functionality. Basic license costs $59, but would need elite license for $259 to get webhooks.
- Ninja Forms. Has multi step functionality with the personal plan at $50/yr with the webhooks on professional plan at $100/yr.
- WP Forms. $40/yr for the Basic plan, which has multi-step forms but $300/yr for Elite to web hook.
- Fluent Forms. $59/yr for one site. Includes everything.
All of these form builders are pretty well known... except Fluent forms, which we almost didn't include. While embarking on this I posted in a Facebook group, asking to see some multi step forms and one of the users mentioned Fluent Forms. It looked nice so we included it.
Time to test...
Crucial: Step-to-Step Speed
One of the aspects that I feel is absolutely vital to the user experience of a multi-step contact form is the time that it takes to load each step. Going from step to step needs to be damn near instant.
Think about it, you don't want users wondering if the web page is broke after they click to the next next step.
This functionality was basically a way of the plugin itself, and not something that could really be modified, so we would need to work with only contact form plugins that were fast between steps.
Here we test a of the Gravity Form plugin. Notice the time it takes from my click on the 'next' button until the next step loads.
It's kind of painful. Contact Form 7 also behaved similarly. We scratched those.
Now take a look at WP Forms in action.
Much faster. Damn near instant.
WP Forms, Fluent Forms, and Ninja Forms all performed about the same going between steps of the multi step contact forms.
Out of the box And User Interface
My first thought when trying to find a software solution is always, "how fast can I get this set up to doing close to what I want".
All of the three remaining (WP Forms, Fluent Forms, & Ninja Forms) WP form plugins were pretty easy to configure and work with on the backend.
Fluent Form seemed to stand out as the most intuitive for me to use. I was able to jump right in and the form up the fastest with that.
It's worth noting that Ninja Form had the most visually impressive form builder, allowing you to work on one individual step at a time resembling what is rendered on the front end.
That said, I personally felt more in-tune with the Fluent Form builder.
Ideal: Next Step On Select
Momentum is everywhere. When it comes to the user experience, keeping (or enhancing) the momentum is vital. I wanted users to automatically go onto the next step after selecting a multi-choice answer without having to click a button.
We could hardcode this if necessary using jquery, but I'd prefer if the plugin automatically had the feature.
Our last second find, fluent forms had this built right in. Here it is in action:
???? BOOM! Fluent Form for the win.
Load Speed With No Stylization
Page speed matters!
If you don't know that, you must be under a rock.
We set up a minimal page with basically just our form in, which would achieve the 'full screen card form' we were looking for and tested them all in GT Metarix.
At this point, the overall speed of them didn't matter a ton at this point. We working on a crappy Hostgator server (related: my test to find the fastest WordPress hosting), and had not done any optimization of the site.
I was just looking to make sure they were all in the same realm of speed.
The Ultimate Solution
After all our testing we decided to rock-n-roll with Fluent form. It had the user interface features we required to make a high converting multi-step contact form on our WordPress site!
The price was also GREAT... at $59 to get us all the necessary features to make our webhooks happen.
WIth some advanced css we were able to make it look very similar to the Jotform we had done initial testing with.
