I remember when nearly all contact forms were made with tables- it was the easiest way to get everything aligned properly (remember valign? valign and I were “like this”).
Now, of course, most forms are laid out using CSS, and I’m sure you’ll agree that there are some beautiful forms out there. Here are some tips on improving your forms:
Align elements with CSS. A no-brainer, right? And yet I still see so many forms out there that aren’t aligned. Aligning your form elements not only makes things cleaner looking, they make your forms look more professional. Use floats, margins and padding to get your input boxes lined up nicely- and try to use ems and not pxs so that your users can resize text without everything getting out of proportion.
Go easy on the styles. Keep in mind that different browsers sometimes show different things when it comes to form styles. If you’ve got your heart set on coloring all your dropdown menus bright red, go ahead- but remember that before anything else you want your form to be functional.
Style all your forms the same way. Decide on a “look” for your forms, and stick with it throughout your site. Do this by defining styles in your stylesheets for all forms (form, label, input, etc.) rather than applying certain classes to certain forms.
Make your button look like a button. Sure, many people will just hit Enter or Return after filling out a form, but many others- me included- like pushing buttons, and will look for a Submit button at the bottom of your form. This can say “Go”, or “Subscribe”- or even just “Submit”- the point is that when you prettify your buttons, make sure they still look like buttons.
Finally, if you’re looking for more info and examples on styling the elements of your forms themselves, I recommend checking out 456 Berea Street’s Styling Form Controls. Too lazy to write it yourself? Use this CSS Form Layout Generator.
What’s your favorite way to style your forms?
