Formfields: increase conversions by 15% or feel the summer on a dreamy lakeside meadow

Inspiration came in @patio11's podcast

In a recent Kalzumeus Podcast patio11 was touching on the point of how to deal with forgotten passwords and dropping the fields for password-repeating on the signup form. He and Keith were hammering on how unneccessary, and sometimes downright stupid some of the precautions are.

So I started highlighting the password entry field - the field you actually want to fill out on the login form - to speed up the time it takes to get into the app.

And this got me thinking.

Thinking of how to make the igumbi trial signup form better.

I give the form fields of the igumbi Hotelsoftware some love. Actually a lot of love.

The ugly and the bad

You know these forms where the fields are not aligned? Or where you type stuff into the fields and there is no padding between the field border and the text. It feels like they appleid some negative padding on these fields. Or the text font you are typing in is so small, it feels like 8px - like screen realestate was so scare as if we were still on 640 by 480 displays.

Forms like that - they suck - bigtime.

And the good

So I set out - and I have had this for some time already in igumbi, to have this warm mellow early morning sunrise inspired glow in my form fields. That glow ensues to radiate and to embrace the very letters you are about to start typing. Your name or your email address.

It's like the sun has just risen especially for you on this cloudless, dewy and mild June morning. You are welcomed to grace this virgin form field with the letters you are about to enter. You can hear the cowbells and smell the flowers of summer on dreamy lakeside meadow.

The formfield is a seducer. It draws you to enter your juicy data. It loves you back. You feel there is something different - it just feels good, in a very sublte way.

You realize deep care has been taken to craft this form.

Bliss.

CSS

This glow effect is achieved by some CSS shadows and CSS transitions - so the effect does not kick in immediatly.

But why stop there: this is just form beautification, no?

Yes why? We have all this nuanced and subtle thing waiting to be uncovered once you get to the form field.

Why not make the glow stand up and say shine like a beacon of welcome?

WAT, a beacon of what?

I hear you say...

What did exactly did I do? Well let's get to it.

I added the AUTOFOCUS property to the first textfield in the form.

The one field that needs to stand out, the one field that needs to be filled - once you start typing in that field the filling out of the the rest of the form just feels like the natural thing to do

<input autofocus="true" id="user_session_username" name="user_session[username]" size="30" tabindex="1" type="text">

autofocus="true" Is the thing you will want o look out for. That does the magic, well that together with the styling appleid to the form field that makes it so different and subtle

If you followed along, while you're at it, also set those tabindex values to get sequence of the fields in the order which seems natural - this is especially useful if your fields are set up in two columns.

Where did this all happen?

The trial signup form, the login form you go to after you have verified your email and the add your hotel form - the one you reach after you have signed up and checked out the demo. Adding a hotel is the crucial step in my app. Here you no longer look at the app you start to engage and start entering your own data and customize it.

When I made the changes I decided to A/B test to see if it moves the needle.

+ 15% Conversion pickup

Yes it did. The improvement of the conversion rate is a whopping 15%. I was expecting single digety improvement in the range of 3-5%. But 15%! That's great. This one really makes me smile.

get tweaking on your own forms

So go out and style your form fields and set them on AUTOFOCUS fire!

And if you need to manage a property (hotel, rentals) give igumbi a spin, and get to feel the summer on dreamy lakeside meadow - while entering data.