Customized Multi-Step Forms for Websites

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. Building forms that convert is key to accomplish this. The biggest challenge is keeping impatient users interested whilst filling out a form through to completion.

Plugins for multi-step forms

Joomla (extention here), WordPress (plugin here) both offer multi-step form plugins that will satisfy basic form design. The problem comes when a business requires complex conditional logic in the form design and/or advanced form validation.

In this case, your average “build-your-own form” website plugin will give you anywhere near the flexibility required, and you will need a custom developer who knows the ropes.

This will 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).

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 large number of unnecessary fields, reshuffled and split the form into 5 logical steps. The status bar across the top ensures users know where they are at, whilst encouraging them to complete.

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.

Tips for creating customized multi-step forms

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 graphic to hold your users attention. Providing interesting feedback or information to users as they fill the form in is a good motivator and can boost completion rates.

4. Stand out!

CSS3, jQuery and Javascript provide many ways to animate forms with special effects. Beautiful, fun and interactive forms get better completion rates than a boring old HTML form.