Michelle Dinan Blog

For a long time, I have wanted to create a generic form with HTML5 and CSS3 which looks good and has some nice subtle effects, which I can copy and apply to any projects I am working on. This post will only cover the aesthetics, so it’ll have to be configured to actually work! I used this tutorial as a guide to building my HTML5 form, so some credit definitely goes to them.

View demo

The demos I have created are light and dark versions of a sample contact form, containing (hopefully) any element that would be required of a contact form and styled up with CSS. My demo contact form has the following:

• Fields have rounded corners, inside shadow and outside shadows to create the inset effect
• Fields have animated focus, and the first field is highlighted automatically on page load
• Fields are specialised for email address, website address and telephone number
• The name, email address and message fields are required for the form to be submitted
• Checkboxes, radio buttons and select elements have been styled using a jQuery plugin
• Error and success styles have been provided at the top of the form, for when the form is fully operational
• Submit button has a subtle animated colour change on hover

Markup

HTML

<form method="post" action="process.php">
    <ul class="errors">  
        <li id="info">There were some problems with your form submission:</li>  
    </ul>  
    	
    <p class="success">Thanks for your message! We will get back to you ASAP!</p> 
            
    <label for="name">Name <span class="required">*</span></label>
    <input type="text" id="name" name="name" value="" autofocus="autofocus" placeholder="Joe Bloggs" required="required" />
            
    <label for="email">Email <span class="required">*</span></label>
    <input type="email" id="email" name="email" value="" placeholder="yourname@email.com" required="required" />
            
    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone" value="" />
            
    <label for="website">Website</label>
    <input type="text" id="website" name="website" value="http://" />
            
    <div class="inputContainer">
        <label for="subject">Subject</label>
        
        <div class="selectContainer">
            <select id="subject" name="subject" class="styled">  
                <option value="subject1">Subject 1</option>  
                <option value="subject2">Subject 2</option>  
                <option value="subject3">Subject 3</option>  
            </select> 
        </div>
    </div>
            
    <div class="inputContainer">
        <p>Which radio button would you like to select?</p>
        
        <input type="radio" id="radio1" name="radio" value="radio1" class="styled" checked />
        <label for="radio1" class="radioButton">Radio button 1</label>
        <input type="radio" id="radio2" name="radio" value="radio2" class="styled" />
        <label for="radio2" class="radioButton">Radio button 2</label>
    </div>
            
    <label for="message">Message <span class="required">*</span></label>
    <textarea id="message" name="website" placeholder="Write your message here..."></textarea>
            
    <div class="inputContainer">
        <input type="checkbox" id="check1" name="check1" value="check1" class="styled" />
        <label for="check1" class="checkBox">Sign up to newsletter</label>
    </div>
            
    <input type="submit" id="submit" class="submit" value="Submit" />  
</form>

CSS (Light coloured version – view the demo for the CSS for the dark version)

form {
    background: #f3f3f3;
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
}

label {
    clear: both;
    float: left;
    font-size: 1.2em;
    width: 80px;
    color: #333;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    margin-right: 10px;
}
	
input, textarea {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    float: left;
    border-radius: 5px;
    width: 320px;
    background: #fefefe;
    border: 1px solid #c4c4c4;
    padding: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 0 0 #fff, inset 0 1px 4px 0 #ccc;
}
	
textarea {
    height: 60px;
    resize: none;
}
	
input:focus, textarea:focus {
    border: 1px solid #0cf;
    outline: none;
    box-shadow: 0 0 4px 1px #0cf;
}
	
/* -- Placeholder text -- */

/* chrome, safari */
::-webkit-input-placeholder {  
    color: #666!important;  
    font-style: italic;  
}  
  
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {  
    color: #666!important;  
    font-style: italic;  
}  
  
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  {  
    color: #666!important;  
    font-style: italic;  
}  
	
/* -- Select, checkbox and radio buttons (uses jQuery) -- */

/* Radio buttons and check boxes */

div.inputContainer {
    padding: 0 0 10px 0;
    display: block;
    overflow: hidden;
    clear: both;
    margin: 10px 0;
    border-bottom: 1px dotted #666;
}

div.inputContainer p {
    color: #333;
    margin: 0 0 10px 90px;
}
	
label.radioButton, label.checkBox {
    clear: none;
    float: left;
    font-weight: normal;
    line-height: 30px;
    width: auto;
    color: #666;
}
	
label.radioButton {
    height: 25px;
}

.checkbox, .radio {
    width: 30px;
    height: 30px;
    padding: 0 5px 0 0;
    background: url(../images/light-checkbox.png) no-repeat;
    display: block;
    clear: left;
    float: left;
    margin-left: 90px;
}

.radio {
    background: url(../images/light-radio.png) no-repeat;
    margin-bottom: 0;
    height: 25px;
}

/* select dropdown */

div.selectContainer {
    float: left;
}

.select {
    position: absolute;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    padding: 3px 30px 3px 10px;
    color: #333;
    font-size: 1.2em;
    float: left;
    border-radius: 5px;
    background: #f3f3f3 url(../images/light-selectarrow.gif) no-repeat 90% center;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    width: 50px;
    box-shadow: inset 0 1px 0 0 #fff, 0 1px 4px 0 #ccc;
}
	
/* -- Required and error styles -- */
	
span.required {
    color: #0cf;
}
	
ul.errors {
    border-radius: 5px;
    font-size: 1.2em;
    padding: 10px 10px 10px 55px;
    color: #fff;
    margin-bottom: 10px;
    border: 1px solid #930;
    *height: 28px;
    min-height: 28px;
    text-shadow: 1px 1px 0 #900;
    background: url(../images/cross.png) no-repeat 1px 0, linear-gradient(#ff5a5a, #f00);
}
	
ul.errors li {
    margin-top: 5px;
    overflow: hidden;
}
	
ul.errors li:before {  
    content: ' - ';  
} 

ul.errors li.info {  
    font-weight: bold;
    margin-top: 0;
} 

ul.errors li.info:before {
    content: ' ';
}
	
p.success {
    border-radius: 5px;
    font-size: 1.2em;
    padding: 10px 10px 10px 55px;
    color: #fff;
    margin-bottom: 10px;
    border: 1px solid #390;
    height: 28px;
    line-height: 28px;
    text-shadow: 1px 1px 0 #360;
    background: url(../images/tick.png) no-repeat 1px 0, linear-gradient(#99d559, #6baf23);
}

/* Submit button */
	
input.submit {
    clear: both;
    margin-bottom: 0;
    cursor: pointer;
    width: auto;
    float: right;
    font-weight: bold;
    color: #333;
    border: 1px solid #09c;
    box-shadow: inset 0 1px 0 0 #fff, 0 1px 4px 0 #ccc;
    background: #0cf;
    transition: all 0.2s ease-in-out;
}
	
input.submit:hover {
    background-color: #4df;
}
	
input.submit:active {
    position: relative;  
    top: 1px; 
}