Search

27 . 8 . 14

Improve your form conversion rates


Whether it is a contact form, newsletter signup or checkout process, the forms on your site are one of the most important stages of the user’s journey.

Losing customers at this point, after you have already convinced them to action is a real waste. Here are our top tips on improving your customers’ experience, ensuring you increase your form submissions.

Use simple language

English may not be your customers first language so avoid being overly wordy. Simplify your labels as much as you can. Cognitive load from trying to work out what a question means will make filling out these fields seem a lot harder than it should be.

Type of customer
 Are you a new or existing customer?
 [ ] New [ ] Existing
New or existing customer?
 [ ] New Customer [ ] Existing Customer

In the first example, the user must first understand what “type” refers to and then read to understand whether they are new or existing. In the second version, the title is reduced to the most simple question and what is required can be understood from the answer’s labels without actually having to read the question.

Never use abbreviation such as DD/MM/YYYY on fields. Day / Month / Year is much easier to comprehend and is especially useful for not native English speakers.

Ask for less

Long forms put off users, the more you ask from your users the less likely they are to complete. Removing questions that are unnecessary at this stage can help, especially if those questions are intrusive. If there is little obvious value to the customer and you’re only gathering the information for your sales team – then think twice.

Another interesting tip is to remove re-type fields for email addresses or phone numbers. Statistically users vary rarely get this information wrong. Making use of autocomplete and validation can also reduce the likelihood of errors.

Make it look shorter than it is

If the form is particularly long consider splitting it into sections and only showing the user what is relevant at the time. This may help your user to begin filling in a longer form than they would have, had you presented them with the whole thing from the start. Once the user has started filling in the form, they are more likely to complete. Combine this with a “time to completion” and steps after the first question for added impact.

Form progress

Show user how far they are, use step numbers or a progress bar to show how the user is progressing. Alternatively display the time to completion that counts down as the user completes more fields.

Use metadata to enable auto-complete

Make your users lives easier by automatically filling in common fields like names, email addresses and telephone numbers. You can help browsers identify which fields to auto-complete by providing both the name attribute and autocomplete attribute on each input element.

<label for="frmNameA">Name</label>
<input id="frmNameA" type="text" autocomplete="name" name="name" placeholder="Full name" required="" /></code>
<label for="frmEmailA">Email</label>
<input id="frmEmailA" type="email" autocomplete="email" name="email" placeholder="name@example.com" required="" />
<label for="frmEmailC">Confirm Email</label>
<input id="frmEmailC" type="email" autocomplete="email" name="emailC" placeholder="name@example.com" required="" />
<label for="frmPhoneNumA">Phone</label>
<input id="frmPhoneNumA" type="tel" autocomplete="tel" name="phone" placeholder="+1-555-555-1212" required="" />

Use visual calendars

Provide a visual calendar when selecting dates. More context makes it easier for users to make a selection. Prevent your users from leave your site to check their calendar app by using a visual calendar with clear inputs and labels.

Provide real-time validation

Real-time data validation doesn’t just keep your data clean it also helps to provide a better user experience. Your users will appreciate the reduced frustration with validation errors after submitting the form, thus helping them to complete their task. Use built-in browser validation attributes such as pattern, require, min, max, and step.

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" required="" />
<input type="number" max="13" min="1" step="0.5" />

 

Want to find out more about what CRO can do for your business? Contact us here.

Robert Uridge is our Analytics Solutions Architect in the Conversion Optimisation team at twentysix. He loves of tea, video games, all things geek and eats jQuery for breakfast.

Share This:


Comments