How to Make Online Forms that Work and Convert

online formsOk people, we’re going to talk about online forms. That’s right, boring old online forms, the least exciting thing on your website, but also a gate through which almost everyone who wants what you have will have to get through in order to complete their interaction. Purchasing something, fill out the shopping cart form. Contacting you for more information, fill out the contact form. Downloading the delicious freebie, fill in the opt-in form.

Like it or not, because of our reliance on them in communication with our clients and customers, online forms hold a lot of power, and if they are made improperly can significantly impact your business. This is why it’s important to make are that the forms you use are easy and quick to fill out.

Luckily, we’ve got a number of tips for you on how to do just that, so stay tuned!

Only What You Need, In An Order That Makes Sense

Nobody likes filling out online forms, especially on mobile devices, where the controls can be a bit fiddly. That’s why it’s important to only make them fill out information that you absolutely need, and to make the fields for that information as simple as possible. Use just one Name field instead of ones for First and Last Name. This is not to suggest you shouldn’t get every bit of info you actually need, but know that every extra field you add to the form will affect it’ conversion rate. The longer it is, the more likely people will quit before they finish. If you have an optional field in your form, i.e. one that doesn’t have to be filled out for completion, ask yourself if you really need the field in the form at all.

Once you you’ve whittled your fields down to just the necessary, make sure that they come in a logical order. Admit it, you’d feel a little weird if someone asked for your message at the top of a contact form before asking for your name. It’s just not how it’s done. You’ll also want to make sure that groups of fields that go together logically are grouped together visually as well. Account information fields should be distinct from contact information, etc.

Labels Short and On Top

While it can be tempting to use only placeholders on an online form (the text within a form field that describes it, but then disappears when you start typing), if you can use labels you should. For one, accessibility programs use labels to describe form fields to the impaired, and if they aren’t in place, it can make your forms difficult to use. Additionally, in all but the simplest forms, lack of labels can lead to confusion as the form is being completed. Because placeholders are no longer visible once you start typing, it can be easy to forget what they said.

When you add labels, make sure that they are succinct. “Name” is better than “What’s Your Name?” The idea is to get people through completion of your form quickly, and every extra word you make them read will slow that down.

So where should these labels go? Almost always on top of the field, and not to the left or right. There are a few reasons for this, the main one being that on mobile, labels to the left or right of a field can severely limit the amount of spam the actual field gets, while placing the label on top gives the field the full width of the small screen it’s being used on. Forms with labels above the fields have also been shown to be easier for the eye to scan.

Big, Bold Buttons

My first tip here is to remember that for mobile browsers, your buttons are going to be pressed by fingers and not mouse clicks. They need to be large enough to accommodate for that fact. Make sure they are large enough that they are not obscured by a finger press, making them difficult to press with precision.

Make your buttons stand out from the rest of the form, especially the button that is for the primary action if you have multiple ones. Give it a bright color that allows it to pop out from the neutral background of the form, and style it in a way that makes it clear it is something to be clicked.

Finally, never use the default “Submit” language for your buttons. Change it to something catchy like, ‘Yes, please!” or “I Want In”. In this way, you can infuse your form with a little energy while also being more specific about what action will be taken on completion of the form.

And there you have it! Follow these simple tips, and your online forms should be quick and easy for your customers to fill out, leading to better conversions for you and your website. Boom! Want to make sure that the forms on your site are performing at peak efficiency? Give the design team at Solamar a shout, we’ll get ’em fixed for you in a jiffy.

Want blog updates sent to you like magic?

Just enter your email below.

Leave a Reply

Your email address will not be published. Required fields are marked *