CSS: Create a Beautiful Form
This tutorial will explain how to create a beautiful web form with CSS. A live example can be found here. I will take you through the steps of adding the xhtml code and how to adjust the CSS to suit your own needs. As mentioned, this form is coded in valid xhtml and CSS.
Building the Form
First you will have to build the form itself, which I have done below. I assume you're already familiar with how forms work, otherwise a simple Google search on the subject should do.
Form Code
- Example
- <fieldset>
- <form method="post" action="CUSTOM">
- <label>Name:</label><br />
- <input type="text" class="formfield-name" />
- </p>
- <p><label>Subject:</label><br />
- <input type="text" class="formfield-subject" /></p>
- <p><label>Email:</label><br />
- <input type="text" name="http://" class="formfield-email" /></p>
- <p><label>URL:</label><br />
- <input type="text" class="formfield-url" /></p>
- <label><input type="checkbox" value="checkbox" /> Email me back?</label>
- <br />
- <p><label>Message:</label><br />
- <textarea class="textfield"></textarea>
- <p><button type="submit" class="submit-button">Post</button></p>
- </fieldset>
The Styling
To style the form (which should indeed look quite boring at this state) we're needing some serious CSS work. First we're going to remove the fieldset border. Then we will position all of the labels to the left by floating (text-align works as well) the element. We will also do some minor changes to the font.
- fieldset {
- border: 0; }
- label {
- float: left;
- font: 12px Georgia;
- color: #fff; }
Next we will add the piece that will give the form the desired appearance. Here I set the padding to 6px to the bottom, right, and top. Since we will add icons to the form fields, the left padding is set to 30px so the text doesn't overlap them. If you wish to use the same icons (or different ones), you can find them at FamFamFam.
- .formfield-name, .formfield-email, .formfield-url, .formfield-subject, .textfield {
- width: 360px;
- font: 11px/17px Tahoma;
- color: #b40000;
- border: solid 1px #ea0000;
- padding: 6px 6px 6px 30px; }
Time to add the icons to the form fields! All images will be placed to the left of the text, and a background color will be defined.
- .formfield-name { background: #fffaeb url('icon_user.gif') no-repeat left; }
- .formfield-email { background: #fffaeb url('icon_mail.gif') no-repeat left; }
- .formfield-url { background: #fffaeb url('icon_link.gif') no-repeat left; }
- .formfield-subject { background: #fffaeb url('icon_favourites.gif') no-repeat left; }
Time to style the text field to match the rest of the form.
- .textfield {
- width: 384px;
- height: 100px;
- background: #fffaeb;
- padding: 6px; }
We're almost done! Now the form itself is complete, but we still need a submit button so your visitors can actually use it. For this, I've decided on using an image. You can of course use a standard button if you like.
Creating an image button is quite tricky, but can of course be done. One way is to specify two different images as the background for the normal state, and the :hover state. However, since this loads two different images, an annoying flicker will be created. To avoid this, we will use one image. This technique is commonly known as CSS Sprites.
If you wish, you can use the button included in the tutorial, or you can create your own. Whatever floats your boat.
To display the normal state of the button, we will set the width and height of the first button, not the entire image. The background is set to 0px 0px at both Y and X coordinates. Next we set the overflow to hidden. This is so the text won't be visible in some browsers, such as Opera. Notice that the top padding is set to the same height as the button itself? This will cause the text to be pushed down where you can't see it.
- .submit-button {
- width: 71px;
- height: 47px;
- overflow: hidden;
- background: url('tutorialsubmit.png') 0px 0px no-repeat;
- border: 0;
- padding : 47px 0 0 0; }
Finally, we will add the hover state. There's 53px left of the image, starting from the end of the first, which we will push down to reveal our flashy hover effect.
- .submit-button:hover {
- background: url('tutorialsubmit.png') 0px -53px no-repeat; }
And that's it! You should now have a beautiful CSS form that you can use and customize as you like.
The Complete CSS Code For Lazy People
- fieldset {
- border: 0; }
- label {
- float: left;
- font: 12px Georgia;
- color: #fff; }
- .formfield-name, .formfield-email, .formfield-url, .formfield-subject, .textfield {
- width: 360px;
- font: 11px/17px Tahoma;
- color: #b40000;
- border: solid 1px #ea0000;
- padding: 6px 6px 6px 30px; }
- .formfield-name { background: #fffaeb url('icon_user.gif') no-repeat left; }
- .formfield-email { background: #fffaeb url('icon_mail.gif') no-repeat left; }
- .formfield-url { background: #fffaeb url('icon_link.gif') no-repeat left; }
- .formfield-subject { background: #fffaeb url('icon_favourites.gif') no-repeat left; }
- .textfield {
- width: 384px;
- height: 100px;
- background: #fffaeb;
- padding: 6px; }
- .submit-button {
- width: 71px;
- height: 47px;
- overflow: hidden;
- background: url('tutorialsubmit.png') 0px 0px no-repeat;
- border: 0;
- padding : 47px 0 0 0; }
- .submit-button:hover {
- background: url('tutorialsubmit.png') 0px -53px no-repeat; }
Comments
Add Your Comment
Valid XHTML