KISSing Your Web Forms

Lipstick kiss on contact form
Lips art c/o Tania Saiz on Flickr.

When it comes to web forms, they live and die by the KISS principle: “Keep It Simple. Stupid!” ((In this usage, we are all Stupid.)) Just like the maxim “Don’t Make Me Think!”, this is good advice for any interface element when it comes to usability. Only make things as complicated as they have to be, and they often don’t need to be as complicated as you think.

Why KISS a Form?

It’s really easy to come up with questions to ask people. What’s your gender? ((Asking for gender on a form is problematic for all sorts of reasons. Strongly consider the reasons why not to ask before adding it.)) How much money did you make last year? Does your mother’s maiden name start with the letters J-Q?

But even if you can come up with a rationale for why you might need that information, remember that every field you add to a form on your website increases the “interaction cost” for the visitor to fill it out. Quoting from the Nielsen Norman Group, interaction cost is:

the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.

Even small interaction costs can add up and lead to lost donors, volunteers, and other potential roles for web visitors. Nielsen Norman Group highlights low interaction costs as one of five issues for nonprofits getting donations on their websites:

Some donation processes had fields or actions, such as making a donation in someone’s honor or setting up recurring donations, which required more typing and decision making than the typical e-commerce checkout and thus increased the overall interaction cost for the form.

In the case of web forms, Keeping It Simple means three things:

  1. Include as few fields as possible.
  2. Of the remaining fields, require as few of them as possible.
  3. Make the fields as simple as possible.

An Example: My Contact Form

Let’s quickly go through those three tests for web forms using my current contact form. Right now, that form has a few fields that won’t be there by the time we finish:

My contact form

 

My goal is to help visitors contact me, and I want to make that as easy as possible. ((In some rare cases, a website owner might want to make it harder to contact them and add interaction costs to do so. Update: Make sure to see BobWP’s comment with details on his thinking. “Harder” might not have been the best word choice.))

1. Include as few fields as possible

Having lived with the form for years, I can confidently say that the “Phone Extension” field is a waste of time. Of the 184 entries from that form, 1 (!) used it correctly. All other entries left it blank or betrayed the fact that they were autofilling my form with spam.

I also have found the “Why are you contacting MRW Web?” field unhelpful. I’ve never found myself understanding the “message” field differently because of it. This stands in contrast to the “How did you find MRW Web Design” field which I find helpful both for understanding my promotional efforts and also better-understanding the message from the perspective of the person submitting it. That field stays while “Why are you contacting…” gets the axe.

2. Require as few fields as possible

Seeing that I just removed “Why are you contacting MRW Web,” it never should have been required. That’s embarrassing.

What’s less clear is which of the remaining fields to require. I’m going to stick with what was required when we started: Name, Email, and Message. At this point all of the remaining fields are useful to me. ((I haven’t mentioned website yet. At times, a person either doesn’t mention the name of their organization or Google has a hard time finding it. Letting people enter their website address is a great way to help me quickly see that. This is extra important since I make, improve, and fix websites!)) That means “usefulness” isn’t a good means of determining what fields to require. I think that rule holds for all web forms.

If “usefulness” doesn’t work, then the criteria I will is use whether a field is critical to contacting me. This focuses on the task the form is meant to achieve rather than the form itself. Sometimes it’s easy to forget that the form isn’t an end in itself.

To contact me in a way I can clearly understand and respond, I need a name, way to reply (email), and message substance. The other fields are all helpful auxiliary information but their absence doesn’t prevent users from successfully starting a communication with me.

3. Make the fields as simple as possible

Like the previous section, I’m not going to make any changes. However, do note that I’ve avoided any complicated form elements like slider scales or multiple pages. In fact, all my fields work simply by typing with the exception of “How did you find MRW Web Design?”

The “How did you find…” field is a good example of when it may be appropriate to limit a users’ options. Since the field is intended to help me understand how people find me, it makes sense to offer some of the most common ways that happens in a standardized format. However, note the flexibility of the field:

  1. It’s not required.
  2. An “other” option serves as a catch-all.

By not over-complicating the form fields, I make sure that users will always be able to successfully use the form without “lying” or “misusing” it. Here’s the final form:

My updated contact form

Fear Inertia. Be Conservative.

My contact form is a pretty darn simple form. It’s likely you’ll someday need to come up with a more complicated one. Let me say from experience, that forms, like many things, have inertia. The decisions you make early are unlikely to change in most cases, so be conservative when building forms. Only include a bare-minimum of fields and then only require the narrowest subset of those fields.

You may be worried that you’ll miss out on information, but that is easily remedied:

  • If you find yourself missing a piece of information every time you receive a form entry, you’ll definitely add it.
  • If five-too-many fields irritate every user who fills out a form, you’ll never know and likely won’t remove them. You will likely receive fewer form submissions because of it.

Lesson Learned

I wish I could go back and think through this form with as much rigor as I did just now. Hopefully you can learn from my mistakes and get it right the first time.

If you’ve built forms in the past, what fields do you regret including or requiring? Let me know in the comments.

My Favorite WordPress Forms Plugin

The forms on my site are all made with Gravity Forms, my favorite WordPress forms plugin. It’s simple to start with, but powerful when I need them to be. It’s not free, but it’s worth every penny if you ask me.

3 thoughts on “KISSing Your Web Forms”

  1. Hey Mark, great post and what I tell most of my clients. But as I see I am referred to in footnote #3, I have had my own challenges. I like to think that my form doesn’t necessarily making it harder, just more selective. Since I have really narrowed it down, the people who want to hire me have no problem with the form. And others find it easy to connect with me on other Social Media platforms.

    But man, those free consulting questions and spam certainly has gone down.

    It’s interesting as a few years back I did some real tests on my contact page. And what I found was if I did add the fields for them to select why they were contacting me, that increased my contacts by around 50%. It made it a little easier for people to focus on what they were contacting me about.

    And as far as asking for any personal information, I keep that real slim. It’s all good and I think we all need to find that sweet spot for our own specific needs… cheers!

    1. Thanks for sharing your thoughts, Bob! I always like hearing them. I updated the footnote to make sure people see your clarification. Interesting that your “why” field increased contacts. Maybe I should look into A/B testing that field.

Join the Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.