One of the most crucial points to pay attention to on your website are your contact forms, sign up forms, checkout forms and so on.
Yet so many people get them wrong.
These forms are the single most essential gateway between you and users on your website. They don’t just need to be pretty. They need to be functional too.
Before we even start, let’s test arguably the most critical form of them all: your contact form. Fill it in, click “Send” and wait for a notification in your CMS/inbox that someone has contacted you.
If you don’t get anything on that a potential lead has contacted you, you need to fix your form, and you need to do it now.
If you also don’t send out automated emails letting users know you’ll get back to them soon, you need to fix your form.
You might think it’s something fundamental yet out of 25 websites that we tested, only ten came back to us with automated replies and then actual responses. The other 15 websites need a check-up.
So without any further ado, here are our top 10 principles when designing or maintaining forms.
Keep your contact form short
The fact of the matter is nobody loves long forms. Forms which go on and on, asking a million pieces of information from the user never get used.
I deal with forms daily, grappling with trying to understand their error messages or why fields are floating around the screen.
Probably even you have, dealt with at least 1 or 2 forms a week which you didn’t want to fill in.
I can probably guess why.
Either they look long like this:
Or ask you private information like this:
A contact form needs to be precisely that – a contact form.
One company increased conversions by 120% by reducing their form fields from 11 down to 4. In our opinion, it’s worth sacrificing that extra information to get such a significant increase. So if you want to maximise the chance of potential clients contacting you, review your form.
Only ask the user what you need to ask them.
Be smart with your default values
Let me give you an example.
If your business is based in the UK, people interacting with your website will likely be in the UK too.
So if you have a form with a country field, set the default field to “UK”. Most of the time, the visitor will appreciate you speeding up the flow for them, resulting in a higher conversion rate.
Another example is technical support forms. The “Why are you contacting us today?” field can be set to “Technical Support” by default to speed up the process and improve the user’s experience.
We found that UKFast does a fantastic job at this.
Going a step even further, for other dropdowns etc. analyse what the most selected values are & set them to the default values. Talk about using data for good.
To see better results, put yourself in the user’s shoes and try to keep it simple. By “guessing” fields correctly for users, you minimise the time & attention the user needs to give. And that is always a good thing.
Don’t run wild with required fields
Every form needs one required field & most forms set their “Email” or “Name” fields to required.
That’s perfectly acceptable.
However, do a quick search throughout the world wide web, and you’ll notice fields which aren’t compulsory, set to required. You’ll see information is being asked which the user might not even have. In most cases, information is requested that the user has no reason at all to provide.
The more required fields you have, the more complicated it is for the user to complete the form.
And the more complicated it is, the higher the chance of losing a lead and them not filling it in.
Win with fast signups and logins
Here’s a familiar sight.
I’ll be honest with you. I love the speed. I love the integration, the seamlessness of being able to gain access to websites with the click of a button.
Being able to sign up/log in with Google, Facebook, Twitter, and other social media platforms are invaluable to your user experience. Some users love to fill in information manually, but others like me appreciate how quickly and securely they allow us to sign up and log in. As long as you are transparent about the data that you’re reading, providing users with this option can increase your conversion rates.
Currently, pretty much all social media platforms have APIs for you to utilise to integrate their sign up/log in functionality.
Simple is beautiful, and social media integrations give you just that.
Don’t just focus on desktop users
A whopping 54.68% of users use mobile phones and tablets (source: statcounter) worldwide. In the UK, this is even higher at 55.56% (source: statcounter) so not optimising for them is the biggest mistake you can make.
Test and use your forms on smaller screen sizes. Are they easy to use? Can you still fill in the fields? Have you tested on both Android and iOS devices?
If you don’t have a responsive design at the very least, you’re going to automatically lose out on 55% of your target market to your competitor. That’s even before they’ve talked to you.
There are few things that people hate more than getting an error message asking them to change some fields after form submission.
Having password requirements, checking for duplicate usernames & validating email formats are great. But for you.
The solution to this is AJAX. AJAX allows you to show validation & verification errors in the form itself. It’ll do this without any page refreshes and without clearing any filled in fields. Just let the user know they mistyped something, and they can fix it and resubmit the form without going bald in the process.
A user already hates changing information once they’ve typed it all in, let alone filling in a form all over again because of a mistyped extra digit.
Have alternatives to your contact form
You must have a Facebook or Twitter page for your business, righttt? Put the link to your social media profiles behind recognisable colourful icons and don’t force the user to just use your form.
They might like messaging you directly on Facebook or Instagram or even directly emailing you. They might fancy giving you a call or even visit you, so make sure you provide them with all the options that they can use to contact you.
Again, don’t force anything on the user and give them multiple choices.
Use anti-spam services
Harassing bots are always looking for forms that are not secured so that they can bombard you with random useless emails.
They’ve resulted in the widespread usage of reCAPTCHA & anti-spam plugins on forms. reCAPTCHA increases security and limits the load on your server to only genuine users. The challenges posed by it are simple for humans but extremely difficult for bots to solve and so this limits spam messages.
It’s important to note that with v2 of reCAPTCHA, many users sometimes complain about difficult questions and challenges and that they refresh the page multiple times to get to something simple for them. If you can, upgrade to v3 of reCAPTCHA which works in the background to prevent spam.
Use HTML 5 elements within your form
Modern browsers all detect, recognise and can correctly display HTML 5 form fields.
In HTML 5, validation messages can be shown natively for required fields without the use of any third-party libraries. For example, if an email is invalid, this check can be done before the form is even submitted with AJAX.
Don’t do these things
- Asking for age reduces the conversion rate by 3%.
- Asking for a phone number reduces conversion rate by a further 5%.
- Asking the user for their city or area causes a 2% dip.
- Asking for their street address reduces the rate by 4%.
- Using the word submit in your submit button has nearly a -3% impact on your conversion rate.
- A form with five fields compared to a form with three fields has a -5% conversion rate difference.
Forms are critical for being able to provide potential leads with a way to contact you or give you more information.
Many forms ask for too much information or ask for private information, and that’s just a no go. They decrease conversion rates massively, and that’s something that nobody wants.
Edit, test & optimise your forms and see what works out for you.
What do your forms look like? Did we miss anything out?