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

Get In Touch

Contact Form

(All fields must be completed)

Step One
Lay out the basic form

HTML
  • <form id="contactform" action="somewhere.php"> <!--the id will be used when styling the form. action specifies the url the form data should be sent to (note that action is not required in html5)-->
  • <h3>Get In Touch</h3>
  • <fieldset> <!--groups form items together, it helps accessibility and also has extra uses in html5 which aren't covered in this demo, but you can find out more about at W3Schools)-->
  • <legend>Contact Form</legend> <!-- the caption for the fieldset, aids accessibility especially if your form is long and has multiple fieldsets-->
  • <!--In the following lines, the contents of 'for' in the label must be the same as 'name' on the input tag-->
    <!--Label holds the text that appears before each input field-->
  • <label for="yourname">Name:</label>
    <input type="text" name="yourname" id="yourname" required> <!--add 'required' to any fields that must be completed (only works in html5, if your form is not on a html5 page you'll need to use javascript instead-->
  • <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"> <!--the text in 'value' will appear on the button-->
  • </fieldset>
  • </form>
CSS FOR THIS STEP
  • None for this step

Result

Contact Form

Get In Touch

(All fields must be completed)

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

Contact Form

Get In Touch

(All fields must be completed)

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

Contact Form

Get In Touch

(All fields must be completed)

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> <!--contents of 'for' must be the same as 'name' on the input on next line-->
  • <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