Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - Form Styling

I seem to have been styling a few contact and search forms recently, and I thought people might find a basic demo useful.

Contact Form Styling

Use CSS to style a basic contact form. Please note that this is only a styling demo, not a working contact form. The techniques here can easily be applied to most forms, there are a lot of free ones available, my current favourite is Free Contact Form.

What We're Aiming For

Step One
Lay out the basic form

HTML

<form id="contactform" action="somewhere.php">
<h3>Get In Touch</h3>
<fieldset>
<legend>Contact Form</legend>
<label for="yourname">Name:</label>
<input type="text" name="yourname" id="yourname" required>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" required>
<label for="message">Your Message:</label>
<textarea name="message" id="message" required></textarea>
<p>(All fields must be completed)</p>
<--Finally add a submit button-->
<input type="submit" value="Send Message" id="sendbutton">
</fieldset>
</form>

CSS FOR THIS STEP

None for this step

Result

Step Two
Style the form's background and fonts

HTML

Same as step one

CSS FOR THIS STEP

/***Style the form background and fonts***/
#contactform{
width: 700px; /*change to suit your layout*/
background: #76b22f; /*colour of the form*/
margin:20px 0;
padding:10px;
border: 1px solid #597c30;
border-radius:10px; /*add a small curve to the form's corners*/
box-shadow: 0 0 10px rgba(0,0,0, .65); /*add a drop-shadow to the form*/
font-family: Arimo, Verdana, Arial, Helvetica, sans-serif; /*Arimo is available at Google Webfonts*/
font-size: 1.1em;
}

/***Remove the border from the fieldset and hide the legend***/
#contactform fieldset{
border:none;
}
/*You could style the legend and use it instead of adding a heading, but be aware that browsers default styling is different and therefore it may not look consistent, so I choose to hide it*/
#contactform legend{
display:none;
}

/***Place each of the input fields on its own line, using display:block. You could instead place a line break <br> after each label and each input, but I think this way is cleaner***/
#contactform input, #contactform textarea{
display:block;
}

/***Style the form labels (the text the appears next to each input field)***/
#contactform label {
padding:4px 10px 4px 4px;
font-size:1.2em;
color:#fff;
}

/***Style the '(All fields must be completed)' text***/
#contactform p{
font-size:85%;
line-height:1.6em;
margin-bottom:15px;
color:#444;
}

/***Finally, style the heading***/
#contactform h3{
font-weight:normal;
margin:0 0 30px 0;
color:#fff;
font-family: 'Happy Monkey', Arial, Helvetica, sans-serif; /*Happy Monkey is available at Googe Webfonts*/
text-shadow: 0px 1px 1px #555;
font-size:1.6em;
letter-spacing:.05em;
}

Result

Step Three
Style the form input fields & button

HTML

same as step one

ADDITIONAL CSS FOR THIS STEP

/*** The text input fields (in this example, your name; your email; your message) general styling ***/
#contactform input, #contactform textarea{
background:#e4e2ce;
margin-bottom:20px;
margin-top:5px;
padding:5px;
border:2px solid #3084a4;
border-radius:5px;
font-family: Arimo, Verdana, Arial, Helvetica, sans-serif;
font-size:1.1em;
}

/*** Set the width of the name and email inputs ***/
#contactform input#yourname, #contactform input#email{
width:500px;
}

/*** Set the width and height of the message input ***/
#contactform textarea#message{
width:500px;
height:200px;
}

/*** Add a background to the message input saying 'Thank you for your message' ***/
#contactform textarea#message{
/**Longhand**/
bckground-image: url(form.jpg); /*the image*/
background-position: 98% 99%; /*places the image 98% from the left side and 99% from the top*/
background-repeat: no-repeat; /*don't repeat the background image*/
background-color: #e4e2ce;
/**Shorthand**/
background:url(forms01.jpg) 98% 99% no-repeat #e4e2ce;
}

/*** Change the input fields appearance when they are in focus so help with accessibility & usability***/
#contactform input:focus, #contactform textarea:focus{
border:2px solid #b21d1f;
background:#fff;
}

/*** Style the button - see http://cssdemos.tupence.co.uk/button-styling.htm#bigbutton for more info***/
#contactform input#sendbutton {
background: #3084a4;
border:1px solid #3084a4;
color:#fff;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
padding:5px 10px;
font-size:1.2em;
margin-left:30px;
border-radius:5px;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 4px 4px #5d6257;
}
#contactform input#sendbutton:active{
border:1px solid #3084a4;
}
#contactform input#sendbutton:hover, #contactform input#sendbutton:focus{
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 1px 4px #5d6257;
cursor:pointer;
}

/*** Finally - force IE8 and lower to use some CSS3 ***/
/**see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
#contactform, #contactform input, #contactform textarea{
behavior: url(pie/PIE.htc);
}

Result

Full Code For You To Copy And Paste

HTML

<form id="contactform" action="somewhere.php">
<fieldset>
<legend>Contact Form</legend>
<h3>Get In Touch</h3>
<label for="yourname">Name:</label>
<input type="text" name="yourname" id="yourname" required>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" required>
<label for="message">Your Message:</label>
<textarea name="message" id="message" required></textarea>
<p>(All fields must be completed)</p>
<input type="submit" value="Send Message" id="sendbutton">
</fieldset>
</form>

CSS

#contactform {
width: 700px;
background:#76b22f;
margin:20px;
padding:10px 20px;
font-family: Arimo, Verdana, Arial, Helvetica, sans-serif;
font-size:1.1em;
border: 1px solid #597c30;
border-radius:10px;
box-shadow: 0 0 5px rgba(0,0,0, .65);
}
#contactform fieldset{
border:none;
}
#contactform legend{
display:none;
}
#contactform input, #contactform textarea{
display:block;
padding:5px;
border-radius:5px;
margin-bottom:20px;
margin-top:5px;
background:#e4e2ce;
border:2px solid #3084a4;
font-family: Arimo, Verdana, Arial, Helvetica, sans-serif;
font-size:1.1em;
}
#contactform input#yourname, #contactform input#email{
width:500px;
}
#contactform textarea#message{
background:url(assets/forms01.jpg) 98% 99% no-repeat #e4e2ce;
width:500px;
height:200px;
}
#contactform input:focus, #contactform textarea:focus{
border:2px solid #b21d1f;
background:#fff;
}
#contactform label {
padding:4px 10px 4px 4px;
font-size:1.2em;
color:#fff;
}
#contactform input#sendbutton {
background: #3084a4;
border:1px solid #3084a4;
color:#fff;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
padding:5px 10px;
font-size:1.2em;
margin-left:30px;
border-radius:5px;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 4px 4px #5d6257;
}
#contactform input#sendbutton:active{
border:1px solid #3084a4;
}
#contactform input#sendbutton:hover, #contactform input#sendbutton:focus{
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 1px 4px #5d6257;
cursor:pointer;
}
#contactform p{
font-size:85%;
line-height:1.6em;
margin-bottom:15px;
color:#444;
}
#contactform h3{
color:#fff;
font-family: 'Happy Monkey', Arial, Helvetica, sans-serif;
text-shadow: 0px 1px 1px #555;
font-size:1.6em;
margin-bottom:20px;
letter-spacing:.05em;
}
/*** Finally - force IE8 and lower to use some CSS3 ***/
/**see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
#contactform, #contactform input, #contactform textarea{
behavior: url(pie/PIE.htc);
}

Support Section

Explanations Of The CSS3 Used In The Demo

Browser Support

The demo works in all the latest browsers, including IE10.
IE9 and lower - text-shadow on the button and headings will not work
IE8 and lower will require CSS3Pie to make border-radius and box-shadow work, see http://www.css3pie.com to download the latest version.

More CSS3 Demos This Way