10 Best Practices for Web Forms

Last Update: July 1, 2014

We see hundreds of web forms every day and often encounter forms that are created so carelessly. Some only have a title or just a user name field. Some don’t even have any text at all. These little tips & tweaks will help you look more professional and also improve your conversion rates.


1. Fool proof your forms:

Always give additional information about your web forms. Even if it is a simple contact form explain what can your visitors do with it. Contact us can mean everything. Contact for what? For a job application, idea, chat, emergency, issues, and so on.

How?

Always start with a heading and sub-heading on your forms.


Example: (Which one looks better?)



2. Aid your visitors with extra info:

Help your visitors in every way that you can with tiny bits of information. Point out extra information for fields that can be confusing or to make sure the visitor is on the right path.


How?

1. By placing hint boxes

2. With hover texts

3. By using sub labels



3. Test forms before publishing 

Preview your form, think like a visitor, and fill in your form to find any flaws.


4. Don’t use captcha

Unless you’re getting many spam responses, it’s a good suggestion not to use it.


5. Don’t use a form in a pop-up window

It may be tempting to put the form right in the center of the screen to get responses quickly, but it can get annoying.   People may fill out “I hate pop-ups” on your form...  There goes a wasted submission!


6. Don’t use “required” for every field

Give your visitors some flexibility. They’ll thank you by filling out the form correctly.


7. Keep it simple

Simplicity is the key to success for almost anything. Don't fill your forms with out of context questions.


8. Have 1 open-ended question

Leave 1 open question for the thoughts, comments, ideas of your visitors. Some may want to give additional and valuable information so don't miss them out.


9. Be consistent on the grammar

Labels should follow title case. First word of the label should start upper case and the sub-label should follow with the same pattern.


10. Don’t think about phishing

Keep in mind that phishing is bad!  Stealing passwords, credit card numbers, etc. is illegal and can cause you a lot of trouble. Use your forms for good.



That's about it for our best practices. Which methods do you use? Please share them on the comments section below.


12 Comments...


   
ch_hanlon (December 03, 2011 at 07:15 AM)

Hi
I would like to add a password field box to my form. I want to allow only people with the code 'VIP08' to have access.

Can you give me some simple instructions please?

Kindest Regards
Christopher Hanlon

View Answer


   
goffphotography (January 03, 2012 at 07:09 PM)

Thank you for the additional information.

Tim


   
emarrufo (December 26, 2012 at 03:48 AM)

My form seems to be justified right when I see it in my wordpress blog, with a margin on the left.

I need it to left justified like the rest of the text. This is important because part of it gets cut off on a mobile phone.

Would like to lift justify so client will not need to use the slide bar or pinch to view all of the form completely.

Thank you,
Rick
http://restroscout.com/listyourbusiness/

View Answer


   
robino (January 17, 2013 at 11:10 AM)

The images in your text are not visible!!!

View Answer


   
sameer (January 24, 2013 at 10:07 AM)

I would like to try your web

View Answer


   
jotform fan (January 25, 2013 at 10:53 PM)

#9 should probably be "grammar" in refering to English Language.


   
jhadomar (January 29, 2013 at 05:37 AM)

dfesgthre rhyrn h


   
rirving (January 29, 2013 at 04:40 PM)

#9 should probably be "grammar" in referance to the English language.

Sorry, but a pedant must live by their own rules.

;)

View Answer


   
rirving (January 29, 2013 at 04:41 PM)

Damn it.

reference

duh.


   
Frank (February 07, 2013 at 04:28 PM)

"Labels should follow sentence case."

I agree, but the example doesn't follow that. It's "First Name Last Name".

View Answer


   
marwenpix (February 01, 2014 at 03:42 PM)

This is the "name" I have used - and with that manner of spelling for about as long as I can remember.
The mar is the first letters of my name - the second set in the first letters of my wife's name and I am a professional photographer. Put it all together and it really keeps it "simple" for those that choose to remember my email address as well.


   
Steven (March 22, 2014 at 12:34 AM)

What are best practices for protecting against spambots getting into your web form? Can you elaborate why Captcha should not be used?

View Answer


Send Comment