A Non-Technical Guide to Creating Effective Web Forms

March 6, 2019

Whether your website has a job application form, a shopping cart/checkout process, or a simple newsletter signup, creating an effective form is crucial to getting your visitors to actually use it. Here, I’ll share some strategies and tactics I’ve learned to create effective web forms, without getting into any technical programming details.

The first thing you must acknowledge before adding a form to your website is that forms exist to benefit you, not the visitor.

Forms exist so that you can gather some type of information from people, whether it be their email address, their idea, their credit card info, or something else. With this is mind, you’re going to need to provide and communicate a value proposition to the visitor which will entice them to fill out the form. Otherwise, why would they fill it out? In many cases, the bulk of your website will serve to communicate your value proposition, and your form will be displayed afterwards.

Example:

• If you’re gathering emails for a mailing list, be sure to tell them all about the amazing content they’re going to receive by signing up before you ask for their email.
• If you’re taking credit card info for a purchase, be sure to tell them all about why your product is worth their money before you ask them to buy.

In short: give before you take. I think a lot of website owners get caught up in tactics and forget that this is the fundamental way to achieve anything in business.

Gain trust with your users

If your users don’t view you as trustworthy, they’re not going to share their information with you. Make sure you take steps to combat their natural skepticism.

If you don’t need it, don’t ask for it. If you start asking for too much information that isn’t necessary, users will start to question your motives. If you need to ask for information that may not seem necessary to your users, clearly state your reason for asking.

Also, don’t ask for the same information twice. If you require your users to upload their resume for a job application, don’t make them manually type in their work experience too. Remember, filling out a form literally requires work from your users. A minimal amount of work, yes, but keeping this in mind will change the way you approach creating forms on your website.

Have a privacy policy. Let people know that you respect their privacy, and let them hold you accountable with this document. Make it easy to read, and easy to find. Try providing a quick 1-2 sentence summary of it for the 99% of people who will never read it. Something like this: “Your information will never be shared or sold. Read our privacy policy here.”, written near the beginning or end of your form.

Note: I understand why people might think that “If nobody’s going to read it, why even have it in the first place?” The answer:

1. Having a privacy policy (even if nobody reads it) will give users the impression that you take their privacy seriously, regardless of what the policy actually states.
2. You may be legally required to have a Privacy Policy, depending on the information you collect, among other factors.
3. They’re quick and easy to create, you can simply google “Privacy Policy generator” and be done in 10 minutes.

Secure your site. If you’re going to ask for information (especially if it’s sensitive information), you need HTTPS security on your website. That means you should have a green padlock next to your URL, and your url should begin with “https://.” If you don’t have this, information sent by your users can be intercepted by third parties, and browsers will issue a warning to your users that their data is vulnerable, discouraging them to share their information.

Make the form-filling process as smooth as possible.

I’ll break this down into sections:

Design & Layout

• Always strive for simplicity. Don’t reinvent the wheel with your layouts & designs.
• Don’t cramp your form: make sure there’s enough space between each input for people using a touch screen to easily select the right one. Make sure there’s enough space between inputs to distinguish which label applies to which input.
• Use consistent layouts: Don’t switch between single-column layouts and two-column layouts Since certain inputs require more horizontal space, I tend to keep my forms single-column to avoid cramping.
• Use consistent styling: Make sure each component of your form is styled the same way throughout. If your labels are placed above your inputs, make sure they’re always placed above your inputs. Make sure your labels are always the same color. Make sure your labels don’t look too similar to your placeholders.
• For long forms, such as job application forms, consider breaking it up into multiple steps to reduce overwhelm. Something like: “Step 1: Contact info, Step 2: Work History, Step 3: References”, etc. Make sure you have a “breadcrumb”-style navigation menu at the top of the form that shows the user which step they’re currently on.

Labels, Placeholders, and Error Messages

• Be sure to clearly differentiate between required and optional fields.
• Keep labels as short and simple as possible.
• Use placeholders to show an example of what information should be provided, or don’t use them at all.
• Don’t use generic error messages like “Invalid response”, instead provide an error message that’s specifically related to the user’s error. Write your error messages for the purpose of helping people correct the error, rather than simply notifying them an error occurred.

Validating your form (Checking for errors)

• Use client-side validation: This method allows each input to be marked as valid or invalid before the form gets submitted. This will save time since your user will know they made a mistake before they click submit and wait for everything to process.
• If there’s an error, give visual cues to help the user locate it. Have your webpage scroll automatically to the invalid input. Make the error message stand out with red and perhaps bold text. Consider adding a subtle (keyword: subtle) animation that “shakes” the invalid input.

Bonus

• Save form data: With most forms, if you fill out your information and then accidentally leave the page, all of your information will be lost. There are tools out there that will save your user’s form data even if they accidentally leave the page. (I use Garlic.js to do this)
• Auto-fill data as much as possible. When asking for something like an address, you can
• Use enter as tab: Instead of having the “Enter” button try to submit the form, allow the “Enter” button to be used to move to the next input. This is especially useful on smartphones.
• Consider which keyboard to use: If you’re asking for somebody’s age, make sure to use the “Number” input so that a smartphone user’s keyboard will switch to the numerical keyboard. Similarly, when asking for emails, use the “Email” input so that the user’s keyboard will display the @ symbol.

Follow-up

This last part is very simple, but often overlooked.

When someone completes your form, make sure you tell them what’s going to happen next, and what they should expect. Give closure to the interaction. Perhaps thank them for taking the time to fill out your form. A simple courtesy can go a long way.

Follow these tips and you’ll have all the foundations for a great form.