Testing the contact forms of top digital agencies

How to judge a digital agency by their contact form.

Gav McKenzie
Author
Gav McKenzie
Published
Nov 12, 2018
Topics
Industry, Resource, Story

So you need to pick a digital agency. There’s hundreds of them out there and they all look great. Lovely portfolios, lots of clever sounding words about responsive web design, mobile first, design systems, agile, etc etc…

How do you know who is truly a master of the web and who is faking it?

Every time I find a new agency site, I run a series of experiments on their contact form as a litmus test of their quality.

We’re going to look at 3 agency contact forms and run a series of quick tests that will arm you with the power to instantly judge a web development agency by their contact form alone. When we’re finished, you’ll be able to confidently say if a company truly cares about the web as a medium in a matter of seconds.

The forms

We picked 3 great forms from 3 awesome looking websites from popular agencies. The agencies will remain anonymous so we’ll refer to them as A, B and C.

Agency A

This agency is breaking the mould with a madlib style form.

Fun and unusualFun and unusual

Agency B

Agency B is more classic form, although they have added a rather snazzy slider for project budgets.

A nice, classic, web formA nice, classic, web form

Agency C

Agency C has the most minimalist contact form with only 3, very stripped back, fields.

Not sure this could be much more minimalNot sure this could be much more minimal

Test 1: Hover states

A contact form isn’t just to be looked at, it’s to be interacted with. Desktop users with mice should get hints that they can interact with an element through hover states, and the mouse cursor changing.

There are two main types of element in a contact form. The inputs, and the submit button. Whilst an input hover state is less common, we would absolutely expect a hover state on the submit button.

Agency A

No hover states on the form inputs, but we’ll let that slide.

The submit button is styled to look like a link, rather than a submit button, which is a little odd, but at least it looks like a clickable element.

Is this a link or a button?Is this a link or a button?

It has a nice subtle hover effect, increasing the contrast when I hover over the element.

Verdict: PASS 👍

Agency B

There’s a strange mix of hover states here. The text inputs have no hover state, but my mouse cursor does change to a text cursor, which is good.

The snazzy budget slider unfortunately doesn’t change the cursor at all, which makes me think it can’t be interacted with for a second.

Looks nice, works badlyLooks nice, works badly

For some reason, the select dropdown does have a hover state. It starts looking grey and disabled, but when I hover it changes to white, increasing the contrast. This is good, but seems out of place when the other elements have no hover state.

Is it disabled or not?Is it disabled or not?

Finally, the submit button, which is the main thing I want to have a hover state, doesn’t have one. The only indication I can click the button is the mouse cursor changing to a pointer.

The submit button failureThe submit button failure

Verdict: FAIL 💩

Agency C

Agency C again has no hovers on the form inputs, but the mouse cursor changes so that’s OK.

The submit button hover state has obviously had a good bit of work put into it, although it has a strange 0.5s delay before the state kicks in, which feels odd.

Probably took hours for some reasonProbably took hours for some reason

Verdict: PASS 👍

Test 2: Keyboard navigation and focus states

A major problem with websites today is they forget some users are unable to, or choose not to, use a mouse. Keyboard navigation is an important and often overlooked way of interacting with your site.

The main way users navigate via keyboard is by tabbing through all the interactive (focusable) elements on the site. You can give this a try by opening up a site and pressing tab, watching where the focus states go.

Tabbing through the Etch home page.Tabbing through the Etch home page.

Agency A

Agency A has decent hover states on the text inputs, but nothing on the select or submit button. It was so disorientating I managed to lose my place and had to record this gif twice!

Where’s my select focus state?Where’s my select focus state?

Verdict: FAIL 💩

Agency B

Agency B has left the standard blue outline property intact on most of their form fields. This is often the recommended solution as keyboard users are familiar with the blue outline and they don’t have to re-learn your custom focus states.

Got lost half way through!Got lost half way through!

Unfortunately it all goes wrong when we come to the budget slider and select dropdown again. Neither of these show any kind of focus state and focus was actually skipped entirely on both. I was unable to interact with them at all using a keyboard.

Keyboard navigation is essential to blind users and failing to support it is a big accessibility problem.

Verdict: FAIL 💩

Agency C

Our third agency has custom focus states on all elements and is easy to navigate. The submit button focus matches the hover, which is nice.

Pretty tidyPretty tidy

Verdict: PASS 👍

Test 3: Validation

It’s easy to get things wrong when submitting forms on the web. A typo here, a missed field there. Good validation should prevent you submitting bad data and help you correct it when it’s wrong.

Many agencies only focus on “the happy path” when creating interactions and forget to help the users who aren’t doing it perfectly the first time.

Agency A

Oh boy. No validation whatsoever. The form submits, but if I get it wrong there’s nothing to tell me that I did get it wrong. The page refreshes and I’m left with my filled out form again feeling confused.

I wonder how many form submissions they‘ve had from me todayI wonder how many form submissions they‘ve had from me today

Verdict: FAIL 💩

Agency B

Agency B has two nice validation points. Firstly, it validates client-side on submit so I don’t have to wait for the request to complete before realising I’ve messed something up.

Secondly, it validates each field as soon as I go to the next one, so I’ve got a heads up before I even try to submit the form.

That vertical alignment is pretty wonkyThat vertical alignment is pretty wonky

I would like to see some better error messages as there’s nothing here to explain what I’ve done wrong. The main error message is strangely aligned, as if it’s an afterthought. I feel like this form doesn’t really care about me.

Verdict: PASS 👍 (just)

Agency C

Our final agency has opted to use HTML5 validation instead of JavaScript. This utilises the most basic form of validation, which is controlled by the browser and doesn’t allow you to set your own validation messages.

There’s also no error state on the field and we’re shown one error message at a time rather than knowing all the problems with the form at once.

This is simple, but it worksThis is simple, but it works

We do get some fairly decent error messages that help the user know what they need to do to correct the error.

An upside to this method is that it works when the user has JavaScript turned off, or it failed for some reason. A more ideal solution however, would be to have HTML5 validation and write an enhanced layer over the top with JavaScript, providing the best experience possible everywhere.

Verdict: Pass 👍 (Just)

Final Scores

After running all our tests we get the following scores:

  • Agency A — 1/3

  • Agency B — 0.5/3

  • Agency C — 2.5/3

Whilst all the agencies have excellent websites that look great, these results would make me most interested in Agency C. The web is not just a series of pretty pictures to be looked at, it’s interactive and it’s being used by people in millions of different ways with different levels of ability.

A good web agency should be embracing the web and embracing accessibility on the web for all users. By running these tests, you can see if your prospective agency cares about the details, about the web, and about users.

Bonus tests

Having too much fun? Need a tie breaker? Here’s a few bonus tests for you to try.

**Warning: **Some of these tests require knowledge of Chrome developer tools, which can be a little more involved and require some understanding of HTML.

Form input types

There’s a whole bunch of form input types available these days. Some might look exactly like a text input, but they could be: email, number or tel to name a few.

These special input types have extra built in validation power and will trigger different keyboard types on mobile, making for a better user experience.

Who needs letters when you’re typing a telephone number?Who needs letters when you’re typing a telephone number?

In a contact form, the most important one to look out for is the email input type on the email field which will add an @ symbol to the front loaded keyboard on most devices.

type=”email” is the important bittype=”email” is the important bit

Both Agency B and C got this one right 👍, with Agency A failing 💩 and using a standard text input.

Labels with correct ids

Many users with visual disabilities need to browse the web using screen readers. These tools read the site aloud so the user can interact with it without having to see it.

Forms can be very disorientating for users with visual disabilities and one of the important bits for developers to remember is to include form input labels with an id to point to the correct form field. This helps users know where they are and how to navigate the form.

id=”label_23” hurrah!id=”label_23” hurrah!

Again, Agency B and C passed 👍, with Agency A falling flat and not including field labels at all 💩.

Mobile styles

With more and more of the web moving to mobile browsing, it’s important to offer a great experience on phones and tablets of all sizes.

By utilising responsive web design, it’s fairly simple to provide a great experience on every screen size.

Etch.co on large screensEtch.co on large screens

And the same site on tiny screensAnd the same site on tiny screens

Whilst Agency B and C did a decent job 👍 of making their forms display well on mobile, Agency A was a bit of a mess 💩.

How clean is that?How clean is that?

This just looks broken…This just looks broken…