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.

Performance Max new features

Performance Max new features

As we head into the business end of Q4, it’s more important than ever to get better performance from your digital marketing campaigns. One way to do that is through utilising Performance Max campaigns and especially the new features.

Our commitment to supporting Drupal and Drupal 10

Our commitment to supporting Drupal and Drupal 10

As a Drupal Association Organisation Member, we’ve been proud supporters of Drupal for many years and Drupal is our go to CMS for many of our web development clients. When new Drupal releases launch, we’re often busy helping clients plan their upgrade path and with Drupal 10 launching in December, it’s a busy end to the year for our web development teams.

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.