4 Best Practices for Web Forms

You’ve got your site up. You set up your email campaign. You open the web form generator to start your sign up form….now what?

There’s a lot of talk about best practices for email marketing, and they cover everything from list building to messages. It can be hard to sort through them all to find best practices for one component of your campaign, such as how you should design your web form.

So given the broad spectrum best practices cover, you’re probably wondering: what are those best practices for designing your web form? We’ve got four of the big ones to share with you.

1. Grab Your Site Visitors’ Attention

Your form will need to catch the eye of a visitor in order to be filled out. This means you’ll want to make sure you design a form that contrasts aesthetically with your web page. Here’s an example:

As opposed to this wine seller’s form:

Although there isn’t necessarily anything wrong with that form, it’s harder to see on that page.

Note that while making your form stand out is good, you want to be careful not to make the background of the form too busy. If there is too much going on, or if contrasts too much with your web page to the point you get a headache, you’re not likely to get many submissions.

You want to get the visitor’s attention, but you also want a form that’s user-friendly.

2. Make the Purpose Clear

Another contributing factor for a usable web form is a clear purpose. To establish this, the form needs to answer four questions:

  • What is this?
  • Why should I sign up?
  • How do I sign up?
  • When will I get the emails?

Here’s an example of what this can look like:

Answering these questions will help set expectations. If subscribers know what they’ll be getting and when they’ll be getting it, they’re going to be much more likely to stick around.

3. Only Ask For What You Need

Including too many fields can be overwhelming. While you may want all the information you can get, you don’t want the size of your form to scare away potential subscribers or have them abandon the form halfway through.

Let’s take a look at Bed, Bath & Beyond’s sign up form:

They’re using the sign up form to double as their direct mail form. This requires the visitor to fill out their postal address even if they just want the emails. If they don’t want to share that information, they won’t be on the email list.

Now look at Kohl’s sign up form:

Much better.

If you plan to use other subscriber details for personalization, certainly make sure you ask the questions you need. You need to weigh the cost vs. benefit for each field and decide if there’s a better way you can get that information.

4. Test the Form

Your form isn’t complete unless it works properly, so you’ll need to test it out. Don’t leave this step out, because you don’t want your new subscribers getting an error message after they fill out the form you’ve worked so hard on.

Once you’re happy with how it looks and what it’s asking for, you’ll need to publish it on your website. From there, you can enter your own information to check out how it works.

How do you know it works? This is what happens:

  • The thank you page acknowledges the email address has been submitted successfully.
  • The subscriber knows they’re going to check their email in order to confirm.
  • The subscriber receives the requested information after confirming.

It’s working? Congratulations! You have a web form that follows best practices.

What Do You Think?

We’ve covered the basics, but do you think anything else should be considered best practices for web forms? What about a privacy policy? Should images be worked in?

What other topics would you like to see best practices for?

We want to hear your thoughts!

20 Comments

  1. Graham Lutz

    6/15/2011 8:17 am

    #3 seems like no brainer. Is it because I grew up with the internet and the dude who decided to add 50 blanks to their form didn’t? or what?

  2. Richard

    6/16/2011 7:09 am

    Nice article, I’ve given it a couple of bookmarks.

    I think keeping everything clear and simple is the key to a form.

    Any request for unnecessary visitor details should be removed. If you are just asking a visitor to sign up for your newsletter, you don’t need to know their mother’s maiden name and full postal address! Focus on the essentials, and visitor’s won’t be put off filling in a few fields…

  3. Christina Dodson

    6/16/2011 9:00 am

    I so agree with this and with the other posts. You’d think people would learn. When I go to a site that asks me for tons of personal information (just to subscribe), that does it for me. Click and out! Keeping it simple is always best, in my opinion. 🙂

  4. Crystal Gouldey

    6/16/2011 9:34 am

    The Bed, Bath & Beyond form doubled as their form for their direct mailing list, when really they would do better to have two different forms. If I want to sign up to an email list, I don’t want to give out my postal address.

    I think some people use a lot of fields because they intend to use the additional information, but never actually do. Asking some more questions can allow you to segment subscribers so you can send more personal emails, but if you don’t actually use the information you’re collecting, you shouldn’t ask for it.

  5. David kapalu

    6/16/2011 9:49 am

    Valuable Insights especially on point No : 4 – Testing! Because this is the hallmark of any Sales and Marketing tactic, whether online or offline.

  6. Tony Merlino

    6/16/2011 10:00 am

    It’s a little sneeky but effective. Use a two part form. Part 1. Name, Email, maybe Phone. That’s it. Then Submit. That reveals Part two of your form with all the other fields of info you may need to properly service the account. street address, town, zip, Drop down boxes with choices of how they would like to be paid, how they would like to recieve their info, or anything else of importance.

    Even if they abandon the form on part two, you still have basic info. Now, you get one more chance to help them with a follow-up contact, just to see if they experienced a problem.

  7. Eric Lauritzen

    6/16/2011 10:24 am

    I never did find the email form on the wine page. Good thing I don’t buy wine. Blending the colors and look of the form is a mistake I made and am correcting on my sites. I just did some split testing and it was the ugliest, gaudiest, sticks out like a sore thumb, form that pulled ahead. It would have been my last choice with design considerations in mind. Of course the winning form isn’t actually “ugly” in itself, it just goes so badly with the rest of the theme – which means it “contrasts” like the article says, and stands out which is the point.

  8. Lucian

    6/16/2011 11:06 am

    I normally want to attract attention on my newsletter, but should it be the first thing an user will see on my website? Or should I highlight it only after the visitor see a few pages? What do you think it’s the best practice for it?

  9. Aaron Schulman

    6/16/2011 12:00 pm

    Thanks Crystal

    It’s also good in the “test” to test the benefits / bullets as well as different list offers for signing up-

    One thing I would like to see “best practices” or just examples for would be different “opt-in” offers and benefits people have tested in different industries-

    We change from industry to industry as we serve different clients and your ideas always give us more “food for thought” when we step into new industries because getting people to opt in in different industries is always a new challenge in discovering what offers or ad copy will get the highest conversion rates.

    Thanks again-
    Aaron

  10. Sidz

    6/16/2011 12:25 pm

    Thanks Crystal.. for making the concept Crystal Clear. Very useful tips!

  11. Crystal Gouldey

    6/16/2011 12:37 pm

    Lucian- We actually talked about when a form should come up a few weeks ago. The examples in the post performed better with the form coming up immediately, but you should set up a split test to see what works best.

    Aaron- We’re glad we’ve been helping you out! Thanks for the suggestion, we’ll keep that in mind.

  12. JL

    6/19/2011 5:04 pm

    I think you should also mention checking. So many people use Javascript that develops an error (when they change something on their form) or gets turned off (including by spam agents). Suggest both on-page Javascript checks and repeat the same checks by the form processing script.

  13. JL Hagger

    6/19/2011 5:06 pm

    p.s. apart from that very good advice thanks.

  14. Beat Schindler

    6/25/2011 1:39 am

    Great stuff. Down to earth. Immediately actionable.
    Thanks!
    – Beat
    PS. Yes, I did re-design the forms I’m using on my blog.

  15. kathrine bocsh

    6/28/2011 6:38 pm

    hi crystal your post is superb , its really great to read that

  16. kathrine bocsh

    6/29/2011 8:10 am

    straight to the point and clarity of purpose is the key , thanks for it

  17. Ted

    7/7/2011 3:26 am

    Hey Crystal – thanks for this post! I thought #4 was so simple that I almost didn’t do it…but thankfully I did, because I caught some errors. Keep the quality coming 🙂

  18. Andre

    7/17/2011 4:48 am

    Thanks for the good info. I’m new to aweber and need to learn all I can quick! Keep it coming!

  19. Anton Amoto

    11/4/2011 2:18 am

    Awesome stuff. Keep up the good work and thanks for sharing.

  20. Joseph Blanco

    5/11/2012 7:57 am

    Hi, I am with a Aweber for quite a few months nowi, and let me tell you the experience is great. I am now exploring the blog are to gain more knowledge in sending my emails and how to use Aweber effectively. This is my first comment and will definitely explore this are more. Thank you for your wonderful newsletter.