Forms are important, but why?
- Final touch point with visitors: It’s the last thing your visitors see before they potentially reach out to you, turning a visitor into a lead.
- The right information: The questions you ask on your form inform how contact with the visitor can proceed.
- Functionality: Often overlooked, but your form needs to be intuitive, easy to complete, responsive and accessible.
Asking the right questions
There’s a fine balance between asking too few questions that gives you little potential to respond with a meaningful reply, and asking so many questions it’s off-putting. Ask yourself the following:
- What information is essential? This will likely be contact information with which to get in touch with the client. Email, phone, potentially address.
- What information do you want? It’s likely an enquiry, so give the visitor fields which correspond to the service you offer. If you offer a range of services then you need to know which the client is interested in.
- Optional information? Visitors often like to be able to ask freeform questions on feedback forms, so a “comments / details / other” section is often a good idea. On our own projection quotation form we ask for a project budget, but it’s optional. It helps us deliver a better response but we don’t demand it.
People hate forms
Like it or not, visitors don’t like disclosing information about themselves online. It’s a catch22 situation, they want to know more but they don’t want to tell you anything more than they need to in order to get the response.
Thankfully, this is where browsers step in to lend a hand. If you put your form together properly and name items in a meaningful manner, browsers will normally autocomplete names. Addresses. Email, Phone numbers etc. This reduces friction with filling in the form.
A huge form is off-putting, ask too many questions and nobody will want to complete your form.
Types of form fields
You’ve got a few options when creating a form, lots of options with different types of html form fields, and a few modern variations on these.
- Text: Used for short snippets of text, a title, or a name.
- Number: Exactly what the name suggests, a numeric field where it’s not possible to enter letters. On mobile users will often get a handy keypad pop up when tapping on this field
- Text area: Primarily used for freeform text input, such as asking a question or perhaps a longer piece of text like a postal address
- Radio box: Use these when a visitor needs to choose a single item from a selection of options, but you want all options to be visible. These are useful if you need to put an image or other text next to the option as a description.
- Select box: There’s a couple of variations here, at a base level you can have a box whereby a single option is selected, or you can have a multi-select box where it’s possible to choose a number of options. Mutli-select is not the best in terms of accessibility on desktop, it can mean needing to hold CTRL to select multiple items which isn’t hugely intuitive.
- Combo box: A modern variation on a select box. Looks like a text field, but a select box appears when clicked on, the text area is for searching options. This is a great option for large lists
- Email: sub variant of a text field, whereby an email address is specifically required and the browser will implement input verification for you. Also allows for autocompletion of information.
- Telephone: Same as email except for telephone numbers, except without any sanitisation of information.
- Date: Looks like a text field, but modern browsers will give you a date-selecting additional input popup here. Great for streamlining the format of date input you get from forms.
- File: Less common, but allows users to upload a file when submitting the form. This will require additional logic to make work and comes with lots of security pitfalls. Use with caution!
- Hidden: You’ll rarely see this (😊). But seriously, it’s just a text field that’s invisible to the user. You might use this for submitting information in the background, such as collecting the URL a visitor is currently on, or their browser info.
- Password: Allows text input, but doesn’t display it on the screen, a obscured hash is visible. Allows for people to input sensitive information without displaying it on screen.
These are the basic ones, there’s lots of additional sub-types you might encounter, but they’re generally just variations on these core types designed to look or behave slightly differently. An example of this would be a switch, looks like a switch, but it really just behaves like a couple of radio buttons, or a select field with only two inputs.
What to look for?
Here’s a big one… does your form work? There’s a few moving parts with a form. Validation, server side processing of input, email sending, deliverability. Does your form coillect information properly and do you receive their input in your inbox?
We would always advise companies to be vigilant about ensuring their forms are still working well for them, or indeed functioning! If not, you’re potentially just throwing valuable leads away.
Our advice
Position your forms in logical places, have a dedicated page for your contact form, but if you want to collect specific information elsewhere then use a form designed for that purpose. Don’t rely on catch-all forms with only name, email and message.
Think about the journey, nobody lands on your site and instantly wants to submit a message, apart from perhaps spammers who want to fill your inbox with junk. Don’t push a form right in the face of your visitors the second they land. Lead them on a journey whereby they find out about your service, then are presented with a form as they progress through your site.
Ask as little as you need, but as much as it required. Don’t mark fields are necessary unless they are indeed 100% necessary. Keep it brief and don’t over face your visitors by asking silly questions.