Since Headlessforms makes it incredibly easy to construct a form for any purpose, this gives you more time to think about what your form is for, how to design it, and what data you need. In this article we’ll look at form design and construction, going back to first principles and working through all the steps you need to ensure your form is fit for purpose.
In summary, the steps are:
- Agree the purpose of your form.
- Decide what data you need to collect.
- Include important “nice to haves.”
- Design a running order and format.
- Construct your form.
- Test your form.
- Revise your form design.
- Go live and monitor performance.
Now let’s break down those stages, and go through the process in a little more detail.
1: Decide what your form is for
Make sure you involve all stakeholders in this process, including a representative from customer service, marketing, sales, data analysis, IT, or any other team or department who might have a stake in how you communicate with customers.
As we discussed in our previous article, there are numerous purposes to which you can put an online form. Here are the main categories:
- Contact Form: the customer wants to get in touch.
- Order Form: the customer wants to buy something.
- Feedback Form or Survey: the customer wants to offer criticism or praise.
- IT Support Form: the customer has a technical problem to solve.
- Registration Form: the customer wants to take advantage of an offer.
As you can see, the purpose of each type of form is linked to what the customer wants to achieve (as well as what you want to get out of the communication). Decide what the customer wants from the form and you’re halfway to deciding what sort of form to create.
Make sure everyone agrees with the purpose of the form and progress to the next stage.
2: Decide On your Data Points
Here’s a key quote from Yale computer science and statistics professor Edward Tufte:
“Clutter and confusion are failures of design, not attributes of information.”
What Tufte is saying is that good design relies on simplicity, on giving the customer the minimum they need, avoiding irrelevance or the possibility of confusion.
Therefore your aim should be to extract the minimum useful information you need for the purpose of your form. For some forms, this will be very little.
A newsletter sign-up form might only ask for a name and email address, because that’s all you need to add the respondent to your CRM database and begin an email drip campaign. Keep the form fields minimal to reduce resistance and you’ll lower the number of abandoned or incomplete submissions.
However, an ecommerce order form might require considerably more information (billing address, card details, et cetera). Much of this will be handled by a your third-party ecommerce payment partner (such as Stripe, which Headlessforms can link to) so you don’t need to include it in your own form.
However, you do need to factor this in, because the customer knows they will eventually be asked for this information. To a form respondent, it’s all part of the same process. Every mandatory field increases their time onscreen, and therefore eats into the customer’s most valuable resource: time.
Therefore, it is best to reduce the essential fields (those you’ll force your respondents to complete) to the bare minimum.
This is also good practice, following one of the common principles of data management (such as the EU and UK’s GDPR recommendations). Also remember to include any mandatory terms and services, waiver, or consent declaration tick boxes.
3: Include Optional Fields if you Like
That said, especially when you’re not asking for a lot of mandatory data, it’s often okay to ask for optional data, so long as these are not required fields, and skippable.
Many ecommerce forms have add-on options which a customer can skip. You’ll commonly see this practice in air travel, where you can request additional baggage allowances, preferred boarding and other perks.
Other types of form have non-asterisked fields which the user can easily skip. You should not let these proliferate, but consider adding a little explanatory text if you would prefer them completed, e.g.:
It would help us speed up your application if you could tell us some of your preferences.
This makes clear that, although not mandatory, the field or drop-down would help you offer better service.
In conclusion, be sparing with optional extras, but include them where you have the space, and a strong preference.
4: Format your Form
Your first quandary is whether to go for a multi-stage form, or just a single scrollable page. For most forms a single page tends to work best. However, there are some formats, such as consumer surveys or quizzes, where it’s beneficial not to display the whole form at once.
Don’t do this if your intention is to hide the length of the form, however. Instead, pare it back down to the essentials.
Once you have all your mandatory and optional data points listed, now it’s time to devise a logical order. Since everyone who’s ever used the internet has probably filled out hundreds, if not thousands of online forms, there are certain expected conventions.
Here’s a typical ordering:
- Name (firstname, lastname)
- Email Address
- Cell Number
- Geographical Location (often just country or state)
- Date of Birth
With just these five fields you already have a lot of information about your prospect. You know when to call them, because you know which time zone they’re in. You have their email address, so you can plan a drip campaign. You know how old they are, so you know which products you can and cannot sell them.
All mandatory fields should be asterisked, so users know they must complete them.
Place optional extras near the end and ensure there’s a good logical flow to the form. Users will get irritated if they have to scroll up and down to copy and paste responses, or see what information they have already input.
Place permissions tick boxes at the end, and include links to Ts and Cs, and any anti-bot measures like reCAPTCHA or honeypot fields (both supported by Headlessforms).
Think about format too. Would a dropdown be easier than a set of tick boxes? Have you allowed only one selection, when the question logically allows for more than one response?
Try the questions out on colleagues to ensure that they make sense and aren’t confusing. Once you’re ready, it’s time to start constructing your form.
5: Build your Form
Headlessforms makes this part easy. Using our drag-and-drop form builder, you can quickly create an attractive, simple, and logical form that obtains all the data you need.
You can preview each question, or the whole form as you go, to avoid making mistakes. We’ve written a thorough guide on how to do this part which you can find here.
6: Test your Form (H3)
It’s a good idea to get a pool of testers to try to “break” your form before you put it out publicly. Share a link to your draft form and ask your respondents to complete it and take notes of anything which:
- Confuses them or is ambiguous.
- Frustrates, by not offering an option they want.
- Seems unnecessary or intrusive.
- Fails on a technical level (e.g., a field which doesn’t have sufficient characters).
- Appears to be missing altogether.
- Seems oddly ordered.
You also want to ask some open questions, such as:
- Did you find the form easy to complete?
- Did it ask for the right type and amount of information?
- Were you a customer, would you be happy to complete this?
- What do you think we want to use the data for?
Regarding the last question, it’s useful to give prominence to the tick boxes at the end of your form which request consent for data sharing. This gives the respondent the confidence that they are in control of how you use their data.
7: Revise your form design.
Gathering together all the feedback you have received, you can return to your form builder and revise your form. Once you’re happy with your newly optimized form design it’s time for the final stage.
8: Go live with your form.
Add the endpoint code from Headlessforms, so that your form responses are gathered in our secure cloud-based server and collated via our intuitive dashboard. Then simply publish your form to your site, using the unique Form Token, which ensures your responses are gathered and sorted appropriately.
As customers begin to complete your forms, make sure you monitor how your form is performing. Are people completing the optional questions? What percentage of form abandonment are you experiencing? It’s never 0% but you can work to minimize it.
Once you start converting prospects into qualified leads and conversions, you can run the numbers on what percentage of respondents become customers. This will help you decide whether your form needs a redesign. Alternatively, perhaps you have a problem upstream, wherever prospects find the links which carry them to your form.
Headlessforms gives you all the tools you need to create a high-performing form that maximizes conversions. Follow the above steps and you’re well on the way to creating the perfect online form.
Visit our pricing plans and get in touch with us through our blogs or social media to stay updated and engaged.
