The Art Form of Web Forms

Make it easier for clients to gather data from site visitors

Practically every new site or web application Airtight Design develops includes forms for the site visitor to fill out and submit. Often, these form submissions represent a conversion for our client. If the site we’re developing doesn’t include e-commerce, this form submission — gathering user’s data — is the most important “transaction” that takes place on the site. Sometimes we’ll even assign a dollar value to the submission in Google Analytics, so our client can track the value they’re receiving from the form.

We always ensure our forms are up-to-snuff (“airtight,” if you will) by performing thorough quality assurance before they go live. We use a 4-part checklist to make sure we’ve tested every aspect of the form. The four parts of our QA checklist are:

• Usability
• Validation
• File Upload Fields
• General

We’ll cover a few key elements of testing in each of these areas.

Usability

With this section of our checklist, we’re ensuring that the form is user-friendly. The simpler your form appears, and the easier it is to use, the more submissions you’ll see. Try not to do anything that would prevent a user from submitting your form, whether it’s asking for too much information for the payoff to the user, or setting your form field inputs to be so restrictive that the end user can’t easily enter his or her information.

One of the key things that we test under Usability is tabbing through the form, ensuring that a user can fill it out easily without necessarily needing to use a mouse. This is important from both an accessibility and usability standpoint; some users don’t want to mouse when they don’t have to, and other users may not be able to use a mouse. This can also make submitting the form faster for the end user.

Another key aspect we look for under Usability is that standard fields have standard name attributes — meaning that “Email Address” has a name attribute in the code of “email” — so that browsers with autofill, or autofill plug-ins, can accurately recognize each field and fill it in for the user. Again, we’re looking for anything that will make it easier for our end user to submit the form, and this is a big one.

We look to fight “form fatigue” in five unique ways, three of which we’ve mentioned:

• Make it possible for users to tab through the form
• Let the user autofill as much as possible
• Present a few questions at a time; once the user has filled out the first mini-set, show more
• Hide dependent fields; once the user has filled in one field, show the related fields (such as not showing the County selection until the user has selected a State)
• Construct forms with the concept of “less is more.” In this case, fewer form fields means more form submissions. If there’s a field that you don’t absolutely need on the form — if you can get the information in a follow-up call, for example — don’t include it on your form!

Validation

One of the things that’s most often overlooked by other developers is that if you’re just using client-side JavaScript validation on your forms, you’re opening up your client to receiving junk data. If a user has JavaScript disabled, either for practical or malicious purposes, they can submit whatever they’d like on your form with no active validation. For this reason, it’s important that both client-side and server-side form validation is implemented. If you turn off JavaScript in your browser and try to submit invalid fields, and the form doesn’t stop you when you attempt to submit, you’ve got some more work to do.

File Upload Fields

We pay special attention to file upload fields here. When you ask a client to submit their logo, artwork, or other file-based asset, you’re accepting files on your server — and you need to ensure these are handled correctly. First, and perhaps most importantly, you need to validate that executable files cannot be uploaded. Without protections in place, you may find that users or bots are able to infect your server with viruses.

Another important aspect of file upload fields is to test that filenames are appended with a timestamp or hash. If you don’t append your filenames and two users submit “logo.eps” as their filename, the files previously uploaded on your server may be overwritten — and nobody wants that.

General

Finally, we have our general bucket for other tests that we perform. This is where we test confirmation pages, database entries, and system-generated emails to ensure that everything is working as expected. We also test the form’s tracking in Google Analytics.

If you’re implementing a form on your website, you can follow these tips to make sure that the tests you’re running include full quality assurance coverage on your form. We’re happy to perform these tests (and more) for our clients, and we always look forward to giving you insight into the processes we implement on a daily basis to make your site best-in-class.