Did you know that approximately 70%* of people make their first visit to a website using a mobile device? This visit may be just a quick glance to follow up later on a desktop or they may complete a contact form requesting further information but this first visit could be the difference between gaining a sale or losing a sale. One of our senior developers Daz looks at how contact forms can be made easier to complete. I often find that a lot of forms on websites are not easy to use from a mobile device. When it comes to entering my email address for example, it's often the case that the first letter automatically appears in upper case and neither the @ key nor other commonly used keys such as dash and underscore are readily available. Does this look familiar to you?
As you can see in the example you have to press the shift key in order to find the @ symbol, thereby increasing the time it takes for you to complete the form. Some people may even choose to abandon the form entirely at this stage.
Essentially what is happening is that the mobile device is expecting standard text. With a very simple change to the code behind the form however, it becomes mobile friendly thus saving the user minutes and helping your conversion rates.
All it needs is the following change:
From : <input type="text" name="email" /> To: <input type="email" name="email" />
What surprises me is that the majority of sites on the modern web haven’t changed their forms, even though it's so easy to achieve. Here is the same example as above but changed to be mobile friendly and all it took was a matter of seconds.
This change simply takes advantage of the new HTML 5 input types designed to enhance user experience and supported by mobile devices. For a comprehensive list of input types, click here. The great thing is that even if a particular browser doesn't support the HTML5 code, it will revert back to a standard text input field thereby always ensuring that your form is functional.
So there you have it - a simple way to make your forms more user friendly for those on a mobile device and a great way to help your conversion.
*Based on an average of analytical data gained from client websites from October 2011 to October 2012, thanks to Scotteo
And to finish off, just a quick tip if you use ASP.NET standard textbox controls - you will need to download a patch for the .NET framework to allow an input type other than text to be specified. Here is a link to the required patch - thanks to Dan Branwood for highlighting this.
By Daz Taylor