Tips For Creating Great Web Forms
1. Use Labels
You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the <label> tag is not only semantically correct, but it gives you the opportunity to style them uniquely with CSS.
2. Float Your Labels
This is how you achieve that table-like structure on forms without having to actually use a table. Just set a static width, float it the left, align the text to the right, and give it a little right-margin. Beautiful.
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
3. Careful To Not Wreck Your Default Styling
A lot of browsers have default styling applied to input buttons. This provides a nice consistent user experience, so if you choose to interfere with this, make sure you have a good reason. A common way to break this is by using a CSS Reset technique that includes something like this:
* {
border: none;
}That can be nice, as it will prevent unwanted borders showing up around objects you didn’t intend, but it will also break the default styling for input buttons in Firefox. Some browsers are more resilient and some are hard to change even if you want to (Safari).
4. Use the :focus Pseudo Class
You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the border color on those elements like so:
textarea:focus, input:focus {
border: 2px solid #900;
}Most browsers support it, so you might as well use it. Think forward-enhancement.
5. Prefill With Hints, But Clear Them Away
It can be useful to prefill your input fields and textareas with little hints or reminders. For example if you have a general contact form and a textarea labeled “Message:”, you may want to prefill that textarea with something like “Your positive comments or constructive criticism here.” Or, you could have a name field which is prefilled with “First Middle Last” so that you can remind users that is the order they should fill in their name. You can do that just by including text within your tags:
<textarea name="Message" rows="20" cols="20">Hint goes here.</textarea>But if you stop there, the user will need to manually delete whatever you enter there, and that’s no good. You can add a little Javascript to clear that hint away when the user clicks inside that box. This little code snippet also only allows that to happen once, so if the user clicks away and then back in, they won’t lose what they have entered.
<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea>6. Make it work with Web Form Factory
Forms aren’t there just to look pretty, they need to work. There are two primary functions a web form can have: to interface with a database or to generate an email. Web Form Factory is an open source service which takes your form and generates the code needed to make it do what it needs to do.
7. Consider a Prefab Solution
Web forms is territory that has been gone over again and again and again. This is one area where not “re-inventing the wheel” might be the best decision you can make. If you are looking for a simple contact form that generates emails, I have created the Nice & Simple Contact Form, which I first posted about here.
I think everyone should check out Wufoo. Wufoo is just absolutely the greatest form creator of all time. Their prices range from free to reasonable, the creation wizard is amazing, and the implementation of the forms onto your site couldn’t be easier.
Loading ...
1
Excellent post, thank you.
Comment by Erinc — November 11, 2007 @ 4:35 pm
2
If you are a WordPress user I would suggest cforms which allows you to create more than one form and stylise them from different themes.
Comment by Jermayn Parker — November 11, 2007 @ 5:35 pm
3
FYI. The :focus trick doesn’t work out of the box on IE. You can use the JS on this page to facilitate that..
http://www.htmldog.com/articles/suckerfish/focus/
Comment by Sanjay — November 12, 2007 @ 12:14 pm
4
Thanks Sanjay, that is a great solution to facilitate IE’s lack of support for the focus pseudo class.
Comment by Chris Coyier — November 12, 2007 @ 1:57 pm
5
For dummies like myself, after experimenting a bit, I came up with some markup for the second point, not sure if its the best way but its semantic, I think!
<form>
<ul>
<li><label for=”input1″> <input type=”text” id=”input1″> </li>
…
</ul>
</form>
CSS wizards please let me know if there’s a better way to do it! With appropriate styling for the unsigned list, of course, and the label style as above.
Comment by Paul Dragicevich — November 12, 2007 @ 4:37 pm
6
Hi Paul,
Yep, that’s the gist of it.
Here is some simple form markup:
Comment by Chris Coyier — November 12, 2007 @ 6:05 pm
7
Any good resources for nice-looking (custom) forms in Safari? I lose more hair over styling forms in Safari.
Comment by John Daharsh — November 12, 2007 @ 7:09 pm
8
I’m afraid I don’t have any great tips for dealing specifically with Safari. Safari is kind of in a class by itself with how it forces it’s own focus states and buttons and dropdowns and stuff. It can be frustrating as a designer if you really have a plan for those things and are having trouble fighting Safari, but in general I find the default stuff just fine.
Comment by Chris Coyier — November 12, 2007 @ 8:09 pm
9
Chris, regarding to your example of simple markup example. The value of the attribute for must be identical to the attribute id within the control element. Therefore:
<input id="Name" type="text" name="Name" />I want to mention it to prevent any mistakes by your readers.
Thomas
Comment by Thomas R. Stegelmann — November 12, 2007 @ 8:51 pm
10
Thank you for these excellent tips.
This is a great site.
Regards.
Comment by jsanderz — November 13, 2007 @ 12:02 am
11
That wufoo form website was not too bad. I have used it for a website I am developing at the moment
Comment by Jermayn Parker — November 13, 2007 @ 12:09 am
12
Arg! Please do not do that onfocus clear value.
Why? Well if a user starts to type something into the input then alt+tabs or otherwise leaves the window (say to copy a url to cite a refrenece etc) and then alt+tab’s back it will trigger an onblur event (when you alt+tab away) and an onfocus event (when you alt+tab back) which will clear what you were typing.
A better way is to check that the current value == the default value before clearing, to do this on page load cycle through your inputs and check for a value store this as input.defaultValue and then do something like:
onfocus=”if(this.defaultValue==this.value) this.value=”;”
Comment by Aaron Bassett — November 13, 2007 @ 2:10 am
13
I had been trying to figure out the thing with form element focus for ages! Can’t believe I didn’t think of :focus. Great idea.
Comment by Neon — November 13, 2007 @ 3:25 am
14
@Aaron: Actually, it won’t. That scenario is addressed with the second code block shown there.
onfocus="this.value=''; this.onfocus=null;">If it was just onfocus=”this.value=”; then it would clear every time, but this way it will not once you start entering text. Unless I’m not understanding you correctly?
Comment by Chris Coyier — November 13, 2007 @ 10:08 am
15
I wish people would stop saying that “most browsers” support the :focus pseudo class - it gives the wrong impression to people learning stuff.
:focus is cool but don’t rely on it as IE6 (largest market share still regardless of what Microsoft say) does NOT support it!
Comment by Ross Bruniges — November 14, 2007 @ 4:17 am
16
The reason I said “most browsers support it so you might as well us it” is exactly that. The :focus pseudo class is nice for usability and style, but it doesn’t affect functionality. So use it, and users with most browsers will benefit and users with IE 6 will still have a fully functional form.
In fact, it might even encourage people to learn, since they may notice how it doesn’t work in IE and seek out a fix (javascript).
Comment by Chris Coyier — November 14, 2007 @ 7:18 am
17
Also worth mentioning is that you should avoid adding the JavaScript functionality through inline event handlers - it mixes content and behaviour. Take a look at the YUI YAHOO.Util.Event.addEventListener method, similar methods in other libraries or the core browser functions addEventListener and attachEvent (IE).
Comment by Ed Eliot — November 14, 2007 @ 12:56 pm
18
Hi Ed,
Wow, a real Yahoo! employee, how flattering =)
You bring up an excellent point that is well suited to this blog. We use CSS for the purpose of separating content and design. This is an excellent practice, so why not keep it up and separate content and behavior?
Thanks for point out those libraries, I really need to get myself caught up on those techniques.
Comment by Chris Coyier — November 14, 2007 @ 2:38 pm
19
For another take on autopopulating inputs and textareas: http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/
And on the :focus issue in IE6, you can use the whatever:hover .htc to make it work in that browser: http://www.xs4all.nl/~peterned/csshover.html
Comment by John Faulds — November 14, 2007 @ 4:01 pm
20
Nice form! I think you might have forgotten to remove a td from a older table-designed version of this one though. http://css-tricks.com/examples/NiceSimpleContactForm/ does not validate because of this.
You could also remove the break-tags after each input and put a clear on them to get the same effect, just to make your code a bit more structure- and design-seperated.
Comment by Dyre Hult — November 22, 2007 @ 4:53 pm
21
@Dyre Hult: Yep, I there was a stray <td> in there, doh! I got that out of there and the form is validating just fine now. I also updated the downloadable example from the article. Thank you!
Those <br /> tags were also not serving any purpose anymore, so they have been removed. That’s the beauty of posting examples like this, because they are subject to such healthy critique they naturally get better and better!
Comment by Chris Coyier — November 23, 2007 @ 6:14 am
22
May I also suggest using accesskey=”" and tabindex=”"
Comment by Brad Smith — December 7, 2007 @ 10:38 am
23
This is Handy as well. thanks once more..
Comment by PraP — December 12, 2007 @ 11:06 am
24
This was great! What a well written and helpful post; I love that you included all the explanations why things should be as you described. Thank you! **bookmarked**
Comment by rjt — January 3, 2008 @ 6:50 am
25
nice forms, many thx!!!
will use :focus for first time, lol!
Comment by derry3 — February 10, 2008 @ 5:22 am
26
Well done, well done.
Comment by David Jacques-Louis — February 23, 2008 @ 3:06 pm
27
Thank you for this tip, because i want to change my own web-form with this idea to improve the usability.
Ralph
Comment by Ralph — March 7, 2008 @ 7:37 am
28
Excellent post, thank you.
Comment by moz — March 13, 2008 @ 3:47 am
29
I am hoping someone might be able to help me with a a issue I have with the nice and simple contact form.
I implemented it on my site and it was working great.
Than it just stopped working and will not send me the email with the contact info actually I get no email at all.
I tested the original form files and let everything unchanged except I put my email in the $EmailTo = “My email field”; in the contactengine.php file.
I am mystified what has gone wrong.
Could it be my server? or dose anyone have any suggestions please.
Thanks, Toni
Comment by Toni — April 15, 2008 @ 3:22 pm
30
excellent post… very helpful
Comment by duplicate file finder — May 4, 2008 @ 3:08 pm