How to create the perfect HTML Form
, designed for the goal of efficiently bursting the user's blood vessels from sheer rage
- Call the Submit button something odd, like "HERE", or "->". Also, try to make it as nonstandard, or subtle as possible. Muted or altered colors work great. Make sure to use only one Submit button, preferably at the top of a long form so the lusers have to scroll all the way back to the top.
- Make the entry fields too small. This is especially good for addresses and city names.
- Leave it up to the user as to how to format their phone number/date. Just make it one short space (3 characters should be fine), no hints.
- Be sure not to mark which fields are required, but definitely require some of them.
- Cryptic dropdowns, concealed checkboxes (those ones that you have to "If you don't want us not to send this to none of our affiliates, then do not check this box." type (emphasis on NOTs is mine, not yours! Make it blend in and be grammatically confusing so it's harder to figure out what to do in order not to subscribe/give out your info/post your fine collection of artistic nudes on a public site/something catastrophic). Thanks to Jetifi for a nicely convoluted sentence.
- When the form is submitted and required information is missing, be sure to inform the user of it in the ugliest way possible. I find a big blank page with the word "ERROR" on it works the best.
- Assure security on your site by either disabling the back button, so the user has to manually retype the URL s/he was at, or erase the form so ALL information has to be reentered. Presenting the form in a FLASH interface without a back button is a good idea, but not too great as users may be on guard, being prematurely forewarned by this fact that you're a complete wanker.
- If you really must reload the form page with an ERROR message displayed, make sure to erase the form before redisplaying it. Can't have that POST data just floating around like that for the user to reuse. Do not in any way try to explain which data was indeed required.
- MALTP has suggested placing the "Submit" button on the right. Common usage shows the opposite layout is by far more prevalent, making this a subtly perfidious move.
Combining the above "features" is highly recommended. After completion, you should have a form optimized to drive a vegetarian to drink (eh
Alternately if you want to skip the sarcasm
and really make a good form, reverse these steps. Here they are:
- Use one very obvious, very standard "Submit" button. generic-man points out that using contextual labels (such as "Log In" if logging on, or "Add to Cart") is even better, if possible. Place the button at the bottom of the form.
- Think about your fields and how long they might be. Then take your estimate and double it. The space on your page and in your database is cheap - your user's patience is not.
- Ideally, separate the phone number into its standard parts, if expecting visitors from one country. In the US, I use three blanks, one for area code, one for the part before the dash, and one for the part after the dash. Building an auto-advance that will jump the user to the next box after entering the digits is a great help. If you're expecting international, provide an example or five, but let your parser accept any input. Do not punish the user for having a nonstandard phone number. Handle date input with appropriate dropdowns to eliminate faulty formatting.
- Clearly identify required input.
- Dropdowns and checkboxes are great, but be sure they're clear and distinct - the fewer choices the better. Leave boxes checked or unchecked based on the one YOU would choose - not the one you WISH they'd choose or the one your marketing department wishes they'd choose.
- Ensure data persistence. If an error occurs, make it so that the user has to correct only the part in error - take pains to ensure that it is obvious what it is that has to be corrected. A clear message in bold text at the top describing which field combined with a highlight of the field works; better yet, display to them only the field to be corrected. This is easily done with the <disabled> tag.
- Do not use FLASH-based forms. It's that simple. Don't do it unless you really know what you're doing (and you don't, I can almost guarantee it).
- Provide a "Clear Form" button and a "Cancel" button which clearly aborts the process and exits the user from the vicinity of the form. Nothing says Security like complete departure.
- The "Ok" button goes on the left, the "Cancel" on the right, in almost all cases. Do your visitor (and yourself) a favor and follow the standard.
It's fairly simple; create forms as you would have forms be created for you
. If you can't, ask someone who can. You'll turn off more users by using a badly designed form than not using one at all.
Of course I could be completely wrong and people are such sheep that they'll take anything just to fill out your form. But do you want those kind of people filling out your form anyway? Maybe you do...
This is good advice whether you design a form from hell or not - either way, you don't want users destroying your carefully created setup
Own experience, some Really Bad Websites
out there, and a few suggestions from everythingian
s who have obviously thought about this entirely too much :)