- <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>
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
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> <!--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.