Creating Stylish Forms with HTML 5 and CSS 3

Forms are an excellent way to gather leads, feedback and information from users.

Below is a quick guide to make a stylish form to grab attention using HTML 5 and CSS 3.

Step One – Plan your fields before you start

As with any form, it’s key to decide on the data you want to collect from the user.

For the example contact form we only want to collect the persons name (required), email address (required), contact number (optional), question topic (required) and the question itself (required).

Step Two – Create the form fields

The best way to style the form is to have all of the fields created to begin with.

Start with the basic html fields and build up from there. I am going to use the <form> tag for the form itself, <label> for field labels and <input>, <select> and <textarea> for the actual input fields.

<form action="my-processing-page.php" method="post">

<p><label for="name" class="required">Your Name</label><br>
<input class="field required" id="name" name="name" placeholder="Your Name" required tabindex="1" type="text" ></p>

<p><label for="email" class="required">Your Email Address</label><br>
<input class="field required" id="email" name="email" placeholder="Your Email Address" required tabindex="2" type="email"></p>

<p><label for="phone">Your Phone Number</label><br>
<input class="field" id="phone" name="phone" placeholder="Your Phone Number" tabindex="3" type="text"></p>

<p><label for="topic" class="required">What Is Your Question About</label><br>
<select class="dropdown required" id="topic" name="topic" required="required" tabindex="4">
	<option value="">= Please Select =</option>
	<option value="1">Valid Option One</option>
	<option value="2">Valid Option Two</option>
</select></p>

<p><label for="question" class="required">Your Question</label><br>
<textarea class="textarea required" id="question" name="question" placeholder="Your Question" required tabindex="5"></textarea></p>

<p><button tabindex="6" type="submit">Send Your Question</button></p>

</form>

Unlike in XHTML, elements in HTML 5 do not need to self close, so you can omit the last / in some elements like input, but textarea still needs the closing pair.

Attributes

An explanation of the attributes used for the form HTML:

Form – action = The page the form is going to send the visitor to when submitted
Form - method = sets whether form data is transferred via POST or GET (post chosen for security here)
Label - class = The class name for the label
Label - for = The id of the corresponding form field, enables auto focus when the label is clicked
input – class = The class name for the field
input – id = Field ID for JavaScript hooks and the Label For attribute
input – name = Field name for processing submissions
input – placeholder = HTML5 attribute to display default text in the field when it is empty
input – required = HTML5 attribute to mark the field to be checked if empty
input – tabindex = Allows the user to tab between the fields in succession rather than clicking each one
input – type = Type of field, values include text & email (browsers not supporting email default to text)

Step 3 – Styling the form

Most of the form can be styled yourself to fit in with your website, so you can use our example as a base:

	/* Form Tag
	**********/
	form{
		background: none repeat scroll 0 0 #f2f2f2;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
		border: 3px double #ddd;
		box-shadow: 3px 3px 15px #aaa;
		margin: 10px auto;
		padding: 10px;
		width: 272px;
	}
	/* Paragraph Elements Inside Form
	**********/
	form p{
		margin:10px 0 0;
	}
	/* First Paragraph Element
	**********/
	form p:first-child{
		margin:0;
	}
	/* Input fields in the form
	**********/
	form button,
	form input,
	form select,
	form textarea{
		background:white;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border:1px #aaa solid;
		-webkit-box-shadow:0 0 4px #ccc inset;
		-moz-box-shadow:0 0 4px #ccc inset;
		box-shadow:0 0 4px #ccc inset;
		color:#333;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:normal;
		line-height:20px;
		padding:5px 10px;
		-webkit-transition:all 0.5s;
		-moz-transition:all 0.5s;
		transition:all 0.5s;
		width:250px;
	}
	/* Focus styles for the input fields */
	form button:focus,
	form input:focus,
	form select:focus,
	form textarea:focus{
		-webkit-box-shadow:0 0 4px orange inset;
		-moz-box-shadow:0 0 4px orange inset;
		box-shadow:0 0 4px orange inset;
	}
	/* Button and Select do not conform to width+padding+border */
	form button,
	form select{
		width:272px;
	}
	/* Additional styles for button (submit) */
	form button{
		cursor:pointer;
	}
	/* Submit button hover */
	form button:hover{
		background:#ededed;	
	}
	/* Submit button click */
	form button:active{
		position:relative;
		top:1px;
	}
	/* Form Labels
	**********/
	form label{
		color:#666;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:normal;
		line-height:20px;
		text-shadow:0 0 2px #ddd
	}
	/* add red required * after required labels */
	form label.required:after{
		color:red;
		font-size:20px;
		line-height:10px;
		content: " *";
	}
	/* Placeholder (default text) styling
	**********/
	form ::-webkit-input-placeholder{
		color:#999;
		font-style: italic;
	}
	form :-moz-placeholder{
		color:#999;
		font-style:italic;
	}

CSS Explained

Most of the CSS used on the form is standard CSS2.1 specification, but I have added in a few properties from CSS3:

border-radius – (+vendor prefix) – Rounds the corners on the boxes
box-shadow – (+vendor prefix) – Creates a box shadow behind the container or, if its set to inset, it adds the shadow inside the container
transition – (+vendor prefix) – Sets an animation for the specified property change (e.g. fade between text colour changes), if all is specified in place of a property, the transition applies to all properties

There is also a couple of CSS3 selectors used:

:-moz-placeholder and ::-webkit-input-placeholder styles the Mozilla and Webkit default placeholder text to allow you to show that it is a placeholder, these must not be combined into one block