Drupal form design tips and best practice

We were recently tasked with the redesign and reengineering of the online booking process for one of our travel clients. Because of the vast amount of options when booking a holiday, a lot of UX and UI thinking had to go into this. And due to it being such an important part of the whole website – after all, it’s bookings that they want – we wanted to design a nice and easy process for the user.

Badly implemented forms can make the user frustrated and want to give up, therefore losing a potential sale or booking. In fact, forms are usually the single biggest drop off point in the conversion funnel.

Below is some of our thinking.

Clearly explained form fields

If form fields needed explaining, we added an ‘info’ tooltip next to the title. When hovered over, the user could see a popup modal with clear instructions related to the question. This will help the user on the journey, making the process as easy as possible.

Top left labels

Research shows that aligning form labels above on the left increase completion time. The reason for this is because it flows better, making it easier visually to complete.

In-line validation

We used this to either approve or correct as the user completes the form. For example, if a email address isn’t valid, it gives an error message as they move on to the next field. This saves annoying the user when they try to submit the form, only to find lots of errors.

Field types that reduce the amount of clicks

When asking a question on the form we tried to use clickable icons instead of dropdowns to limit the amount of clicks. This also helps speed up the completion time.

Postcode lookup to reduce amount of field entries

To save the user time, we used postcode lookup to reduce field entries. By asking for just the house number and postcode, the lookup then suggests the full address.

Use of predictive search for certain fields

For longer fields with lots of pre-defined options, we used predictive search. An example of this was when getting the user to choose their country. This reduces the amount of typing.

Input fields sized on expected input

Instead of designing all our forms the same widths, we sized them based on the expected input. For example, a date of birth field will only require 8 characters. These being DDMMYYYY. In comparison, a full name could be 100% full width. Doing this makes the form easier to read.

Easily tappable areas for mobile (mobile first design)

The chances are the user will be using your form on some form of touch device. With this in mind we used the recommended minimum touch area of 44px x 44px, roughly a finger size.

Clear to see what is optional and not

Instead of using a common ‘*’ to show required fields, we only highlighted the fields that were optional.

Hope this helps you with creating forms.

Microsoft Ads UET Tag Update

Microsoft Ads UET Tag Update

In May, Microsoft Ads launched a significant update to its Universal Event Tracking Tag (UET Tag). The UET Tag has always been a fundamental part of conversion tracking, audience building for remarketing and automated bidding strategies. The latest update from...

Let's chat. Tell us a bit about your project.

 If you prefer to speak with someone, call 01202 203160 or if you'd like to book a 30 min meeting to see if we can help just let us know and we'll arrange a call with one of our Directors.

Attraction Marketing Using Google

Attraction Marketing Using Google

Brunel’s SS Great Britain is Bristol’s number one visitor attraction and a top 10 UK museum (TripAdvisor 2022). It is home to the world’s first great ocean liner, the SS Great Britain, the Being Brunel museum, and the Brunel Institute, which houses one of the world’s finest maritime and Brunel collections. The charity that manages and maintains Brunel’s SS Great Britain and collections is the SS Great Britain Trust.

Charles Stanley Direct PPC

Charles Stanley Direct PPC

Charles Stanley set us the challenge of delivering improved performance from their PPC campaigns. In a highly regulated industry, with multiple stakeholders to govern marketing activities and an ever changing market, the brief called for exceptionally high levels of service, reporting and flexibility.

Avery WePrint – Content Strategy

Avery WePrint – Content Strategy

We were tasked to increase revenue from new and returning customers by delivering a content strategy with objectives to improve SEO for article pages and produce engaging content to link to from their emails..

Google Grant PPC Management

Google Grant PPC Management

Digital Marketing: Google Grant PPC Management IntroductionThe Centre for Ageing Better is an independent charitable foundation, funded by The National Lottery Community Fund. It creates change in policy and practice informed by evidence and works with partners across...

Legoland Discovery Centre Launch Campaign

Legoland Discovery Centre Launch Campaign

We were delighted to win the brief to help Merlin Entertainments’ launch Legoland Discovery Centre, Birmingham.

The ultimate indoor playground was the second to be built in the UK and opened just outside the centre of Birmingham.

SEO and Social Success for Holiday France Direct

SEO and Social Success for Holiday France Direct

Like many businesses, Holiday France Direct wanted to increase the number of visitors to their website from non-paid traffic and increase their social reach and engagement. They came to us with a brief to upgrade their website and to run a programme of monthly SEO and Social activity.

Blackpool Has it All

Blackpool Has it All

We love working in travel and tourism. So we were thrilled when the UK’s top beach resort asked us to plan and deliver the digital marketing for their 2018, 2019 and 2021 destination marketing campaigns.

Post Pandemic Pickup

Post Pandemic Pickup

As global travel markets opened up following the COVID-19 pandemic, we supported a valued client with a range of (very flexible) PPC and social marketing services to help their business rebound.