Web forms: The basics

It’s easy, in our new and exciting responsive design world to get carried away with making the site look sexy on all devices. Yes, it’s important to base your site design on a mobile-first approach but please don’t forget about your forms and calls-to-action. After all, they fundamentally pay your salary so maybe we should spend a little more time making sure they work just fine.

Form basics : where to start?

Screen Shot 2013-10-10 at 15.52.12The form is designed to directly interact with the visitor so start off putting yourself in the shoes of the site visitor. Here are a few golden rules to get you thinking.

  • Less is more. The fewer fields you request, the more form fills you will get. Fact.
  • Fewer fields will generate more conversion. Oh, I said that above – get rid of fields you probably don’t need.
  • Gut the number of fields on the form. Once you think you’ve got it to a bare minimum go back and remove the ones you really, really don’t need.
  • Mark compulsory fields as such, but keep them to a minimum.
  • Get the form to stand out, in it’s own box, maybe a different background colour. Make it all shouty.
  • The visitor has a name. It might consist of a title, forename and surname but fundamentally they have a name. You don’t really want to be making it compulsory for the visitor to select a title.
  •  Don’t get too personal. This is probably your first date, so don’t request very personal information or get too pushy.
  • Go back and check you really need all the fields, are you sure there isn’t a field that can go, or optionally appear when the visitor ticks a box <- neat idea, eh?
  • Lots of folks will make mistakes on the form, it’s human. In fact, up to 50% of form fills fail on the first attempt. Make sure your erroring is clear, concise and doesn’t throw away the correct data on the form. Be friendly and never leave the page (certain exceptions apply, but that’s “Forms: Advanced” for later).
  • Say thanks. And be nice. If you are using double opt-in (it’s good practice but marketers are afraid of it, maybe with good cause) then explain the next steps and what you need from them. You could even show them (see the image on the right).
  • It works brilliantly on a mobile aswell, I assume?
  • Finally, did you really gut all the fields you could from the form?

That should get you started. Talk to us if you want more help or want to explore “Forms: Advanced” as this is only a basic taster, there’s a lot more to discover and get right.