Customized Multi-Step Forms for Websites

Last updated on

Update: this post was originally written in 2014. Multistep forms have gained in popularity, and even evolved into web apps or single page 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

WordPress (plugin here) offers 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!

Assicurare il mutuo - customized multi-step forms

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.

Chkredit - a 5 step customized 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 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.

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

ECO TCA - customized multi-step forms using CSS3 for animation

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 and submission 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 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 and Javascript (Reactm, Angular and Vue) provide many ways to animate forms with special effects. Beautiful, fun and interactive forms get better completion rates than a boring old HTML form.

About Mike Fitzpatrick

Mike is web developer and consultant at Jeyjoo, with a track record of transforming businesses into online market leaders.

Find out how we exploded our website visits 170% in 5 months

SARA DING

(Owner Juicing for Health)

2 million monthly visitors
1.1 million Facebook followers

Proven SEO results

We’ve worked with

A selection of the companies we have worked with

Client reviews

Our clients love the work we produce...

Quick, efficient and a better job than I imagined! I cannot recommend Jeyjoo enough.
Ali Jawad, British Powerlifter

Within just a few months we gained an excellent search engine positioning for our chosen keywords.
Roberto Ricco – Afi Esca

Our site is contemporary, clean and clear – everyone wants to know who made it.
Raphael Baglione – Door to Innovation

Ready to start earning online?

We can transform your business into a Google #1 website and grow your revenue



I have read and accept the privacy policy

No thanks! (I don't want more business)