Customized Multi-Step Forms for Websites
Last updated on
Customized multi-step forms are gaining popularity.
Multi-step forms lead the user through a selection process, tailoring a product or service to their individual needs.
The objective of most websites is to turn visitors into leads: so building forms that convert is key to accomplishing this goal. The biggest challenge is keeping impatient users interested whilst filling out a form through to completion.
Plugins for multi-step forms
WordPress (plugin here) offers multi-step form plugins that will satisfy basic form design. The problem comes when a business requires complex conditional logic, advanced validation rules, API integration etc.
In this case, a DIY form builder wont give you anywhere near the flexibility required, and you will need a custom developer who knows the ropes.
Multistep forms and web apps require programming knowledge of PHP, HTML5, Javascript, jQuery, Ajax, and CSS3 for cool effects.
Multi-Step Form Examples
Here a few forms we worked on recently. The are in German, Italian and french, but they are so intuitive that you can grasp what to do without understanding the language!
A visual mortgage insurance form
The challenge was to encourage website visitors to fill out a mortgage insurance inquiry form for the French multinational Afi Esca.
We designed a 3-step form where the user customizes their own product. The first two steps involve making just 2 choices. By which time the user feels that they have tailored a solution to their need, and are therefore more than likely to fill in the 3rd (and longest step).
*Update: this form has evolved into a web app.
A simple 5-step loan application form
This is actually a form we created years ago, but one of my favourites due to its huge conversion rates.
The original form was huge, and not at all intuitive. We cut out a loads of unnecessary fields and reorganized the form into 5 logical steps. The status bar across the top ensures users know where they are at, whilst encouraging them to complete.
Try the form (4 languages to pick from). Uses CSS3 and Javascript.
Visual, interactive forms
This website is full of forms all carefully built to generate leads.
The homepage invites a user to select the product they need with a neat graphic, before calculating their mortgage / foreign currency/ loan repayments and taking the user off to a longer form that collects the required data. An essential step here is to pass form data between pages so users don’t have to input the same data twice.
Try the form (2 languages to pick from). Uses PHP, jQuery, Javascript and CSS3.
Tips for creating customized multi-step forms
The objective of any form is 100% completion rate.
Once submitted, the form has done its job and succeeded in converting a visitor into a lead… down the sale funnel we go!
Here are my tips for user-friendly multi-step forms:
1. Short and sweet is usually best
Web users are notoriously impatient so make your multi-step form as short as possible. Only ask for information that is absolutely necessary.
2. Compilation should be quick, intuitive and easy
Use autocomplete for things like post code, city and country to save typing. Allow tabing between fields. Use tooltips (popups) to provide further instructions on each field.
3. Make your form fun or interesting
Forms can be so boring, so make yours awesome. Use images, progress bars and cool graphics to hold your users attention. Provide encouraging feedback to users as they fill out the form to motivate and can boost completion rates.
4. Stand out!
CSS3 and Javascript (React, Angular, Vue) provide many ways to animate forms with special effects. Beautifully designed, fun and interactive forms get better completion rates than a dull old HTML form.
