Web forms best practice to Transform User Experience

Delivering services online is at the heart of many companies and organisations and Customer expectations are continuing to be led by larger websites.


Customers expect exceptional digital service interactions, such as Amazon, and Asos in the private sector and gov.uk in the public sector often lead the way to what customers want. 

All organisations can use learning from such websites and forms, self-service and web providers who regularly deliver exceptional customer service for their clients.

Here we have gathered some great examples of how good online forms can be used to transform user experience. 

Mobile friendly = user friendly

Websites should be responsive, so that the site re-scales smoothly to all devices, such as laptops, tablets and smartphones. Forms should be designed for "mobile first" as this will make them user friendly.

Data collection

It is important to be collecting the correct data. This may sound obvious but asking for exactly the right information will help the user by telling them what you want. It also helps you by ensuring the data is ready to be processed once you receive it.

Good error messages

Ensure error messages refer to the data required rather than being vague such as "Error".



Where possible, validate data on the website by ensuring email addresses or dates are in the correct pattern. This gives you clean data and guides the user as to what they want.  You can add guidance text to help users further.



Give validation as you type or on submission and give direct feedback.

Validation should also be set for required, max / min length or patterns for known data such as UK post codes.

Error messages

Error messages inline with form fields with clear sign-posting, error messages and focus make it much easier for mobile users as it saves them scrolling.


Don't make users think

Forms often ask for data you don't need to know or you should already know such as payment reference numbers. Instead give users their own account and pre-fill as much as possible, such as an address and phone numbers.

Registered users get a much better user experience as they will see a form with their name / address filled out, and relevant information to the service. It will also reduce automated spam as they won't pass validation.

Data sources

Most data types can be added to a good form via backend integration. API calls can get data from 3rd party systems or data can be collected from secure urls and displayed in a form.


Import data

Additionally, you can mass import data to your forms server such as the property gazetteer that can then be used for address lookup.


Be guided by logic

We have already said that you should only collect the data you need. Logic can help you here. You can turn off pages or skip pages that are not required as other data is entered. Designers can dynamically move fields, so if one field is validated, another field can appear. A good example of this is the different information needed to pay by Visa/Mastercard vs Switch. Switch payments require a start date and issue number whereas Visa/Mastercard payments do not.



Logic builders

Logic can be written in JavaScript, but modern forms software also have less technical interfaces to allow designers to build logic graphically with tools like Blockly. Logic should also run client side and server side.

Pages or fields can be part of logic to flow user journeys smoothly.


Form fields

Having a large library of available form field types will hugely improve customer experience. As well as standard text, radio buttons and check boxes use advanced functions like Recapture, File upload, Number inputs and Password inputs, plus:

Date picker - intuitive calendar for collecting dates with additional logic to validate weekdays or weekends, past or future dates.


Postcode lookup - match a post code to a pre-defined data source of addresses for quick data population


Location picker (Google maps based) - to allow users to select locations for reporting issues like graffiti or broken street lamps.


Form analytics and insight

Often overlooked is the importance of statistical analytics so that forms can be refined and enhanced. Google Analytics tracking code can be dragged onto a form that sends events to Google Analytics. Events might include if a validation is met or a form error message is displayed. This is great for seeing where users encounter difficulties. And the best part is that it can all be done in real time for live user testing.


Forms are just the start of a process

Submitting a form should trigger a business process. Link your forms to processes and workflow. This can be complex but the internal complexity can lead to excellent customer journeys. A lighter version is to store data in your forms package where it can be searched and filtered, viewed, amended and exported. Automatic emails can be sent from forms packages with specified data.


Great for mobile service delivery

Strong forms that adhere to best practice will improve user experience, encourage repeated usage and if coupled with automated processes, will reduce calls to your contact centre.

Market leading forms solution

The  solution contains all the best practice standards for developing and managing easy, flexible online forms.

Forms training

TrainingOur focus is on ensuring clients fully utilise their GOSS solutions and to maximise return on their investment to build engaging content and strategy for websites and intranets. GOSS offers a range of forms courses for every level from beginner to developer.

An enjoyable day's training. The materials and exercises were clear and useful and I liked the tutor's presentation style which was well pitched. Jenny Shorter, University College Union

I have attended the course with limited knowledge and have gained a far greater knowledge. This has encouraged me to use the system and I am now feeling more confident. Sarah Green, Mendip District Council

Share this page

Facebook icon Twitter icon Email icon


Print icon