We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

5 Hacks to Improve Your Web Forms


There are plenty of articles on web form optimisation hacks, but how do you know which to trust? You could read articles based on hearsay and secondhand research. Or you could get accurate insights founded on years of experience from the founder of a leading form analytics company.

If the second option sounds more appealing, you’re in the right place.

Hack #1 – Combine Form and Function Across Devices

The best forms are visually appealing while remaining simple for users to complete, regardless of the device they’re accessed from. If your forms look fantastic but fail to deliver the necessary conversion rate, delve into your form’s design using analytics to find out why.

Hack #2 – Use Colour Themes to Engage

On-brand forms with the same look and feel as the rest of your website are a must. But which colours should you use to create an engaging user experience and which should you avoid?

Although colour science is a controversial area, we do know that:

  • Colour creates an emotional response and blue equates to security
  • Avoid brown, orange and purple to appeal to men
  • Use purple to attract women
  • Orange combines the action of red and the warmth of yellow making it great for submit buttons
  • Green is a calming colour that’s good for purchase buttons as it eases users towards buying

Colour can be highly personal so it’s important to run tests on your forms to find out which colours increase your conversion rate.

CTA buttons Colour Examples
Hack #3 – Specify Errors Inline

The easier your form is to complete, the better your user experience. One of the biggest sources of user frustration is when forms fail to identify a data entry problem. It’s really simple to get this right: just show the user where the error occurred and how to put it right.

Source: UX Collective

Hack #4 – Use Inline Validation After the User Completes the Field

Timing is everything when it comes to inline validation. Ensure your error messages pop up after your user has completed a field.

The exception to this rule is when interrupting data input is helpful. For example, when completing an email address that has a predetermined format.

Source: UX Collective

Hack #5 – Avoid Using Placeholder Text as Labels

In a mobile world saving space on your forms is often a good idea. However, one design element you shouldn’t try to squeeze in is your field labels.

Forms that place field label text into the fields are a recipe for increased form friction, poor user experience and lower conversion rates. Why? Here are three reasons from a much longer list:

  • It’s tougher on user’s short-term memory – when users forget the hint, they have to delete the text to reveal the text meaning more clicks and irritation.
  • Users can’t check their answers before submitting – are the first and last names the right way round? Who knows without deleting. Meaning frustrating corrections or dirty data in your systems.
  • Disappearing text is irritating – when keyboard users tab to the next field the label text disappears making the user experience painful.

Source: UX Collective

One More Crucial Step

No two users and no two forms are alike, making a web form optimisation platform a critical tool in your marketing stack. Test, analyse and improve your forms to enhance user experience. And watch your conversion rate soar.