Interactive Mutli-Step Website Form Design

Last modified on Thursday, 06 August 2015

In the past 10 months we have seen requests for customized, complexed multistep forms balloon. Many of the forms we have subsequently build lead the user through a selection process, tailoring a product or service to their individual need. For reasons best saved for another day, one such form was even built to be unindexable.

The biggest challenge is keeping fickle and often impatient web users interested in an otherwise boring form through to completion (i.e. ensuring they complete and submit the form). THE OBJECTIVE of almost every website is to turn casual visitors into leads - so getting your forms right is massive.

Plugins for mutlistep forms

Joomla (extention here) , Wordpress (plugin here) and most other major website CMS software do have multistep form plugins that will satisfy basic form desgin. 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 felxibility required, and you will need a custom developer who knows the ropes. Generally this will require programming knowledge of PHP, HTML5, Javascirpt, JQuery, Ajax, and some CSS3 to add in some smooth effects.

Awesome Examples of Multi-Step Form Showcase

Here a few of my favourite form designs we worked on recently. The are generally in German, Italian and french, but the great thing about such intuitive and visual forms - is that you can grasp what to do without necessarily understanding the language!

Assicurare il mutuo - mutli-step form

A visual mortgage insurance form

The challenge was to encourage website visitors to fill out a mortgage insurance enquiry form for the French multinational Afi Esca.

We designed a 3-step form where the user customises 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).

Try the form. Uses PHP, CSS3, Javascript and jQuery.

Chkredit - a 5 step form

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 unecessary 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.

Try the form (4 languages to pick from). Uses CSS3 and Javascript.

ECO TCA - forms using CSS3 for animation

Visual, interactive foms

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 mutlistep forms

The obective of 99% of forms out there must be to get the form filled in completely and submitted (period). Once submitted, the form has done its job and succeded in converting a casual website user into a contact - and down the sale funnel we go!

Here are my tips on how you can build user-friendly multi-step forms:

1. Short and sweet is alway best

Web users are notoriously impatient so make your mutlistep form as short as possible. Only ask for information that is absolutely necessary. Don't waste your client's time by asking for crap.

2. Filling in should be lightening quick, intuitive and easy

Your form must be quick to fill in and user friendly. Use autocomplete for things like post code, city and country to save your user typing. The tab button should allow users to jump neatly to the next field without reaching for the mouse. You can also use information tooltips (popups) to provide useful instructions on each field if it is not already clear what the user should do.

3. Make your form fun and interesting

Forms can be so boring, so let's make your's awesome. Use images, status updates, big buttons 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 even Javascript provide an infinite number of ways that you can animate your form with special effects. A beautiful, fun and interactive form is going to get a waaaaaay better completion rate than a boring old html form.

Mike Fitzpatrick

Mike Fitzpatrick is the founder and web developer at Jeyjoo web design. He works with both individuals and companies to grow their businesses online.
Seguimi su Google Plus