Creating Basic Web Forms with CSS 3

Posted on - Last Modified on

Creative Web designers always want to make their work awesome by using elements such as rounded corners, gradients, borders, etc. Implementing these designs was beyond the capabilities of old HTML and CSS, but with the new properties of CSS 3, implementing these elements has become really easy for the developers.

In this article, I'll discuss how to develop a form with input elements having a rounded shape with the use of CSS 3.

First, here's the HTML code without CSS:

<form id="form1" action="submitForm.php" method="get" >
<label for="txtName">Name:</label>
<br/>
<input type="text" name="txtName" id="txtName" />
<br/>
<label for="txtEmail">Email:</label>
<br/>
<input type="text" name="txtEmail" id="txtEmail" />
<br/>
<label for="txtMessage">Message:</label>
<br/>
<textarea name="txtMessage" id="txtMessage" ></textarea>
<br/>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"  />
</form>

This is what it looks like:

Basic HTML form

Now to give it a rounded effect, we will use the border-radius property of CSS 3. Here is the CSS code:

#form1 input[type="text"], #form1 input[type="submit"],#form1 textarea {
     -webkit-border-radius: 20px;    /* for webkit browsers */
     -moz-border-radius: 20px;       /* for Mozilla based browsers */
     border-radius: 20px;            /* standard css 3 property */
}

Input fields with rounded broder

Let’s add some more CSS to give the form a background, make it rounded, make the input fields equal width, and give some vertical spacing between the fields. Here is the modified CSS:


#form1 {
	width: 300px;
	padding: 20px 50px;
	background:#61C794;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
#form1 input[type="text"], #form1 input[type="submit"], #form1 textarea {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width: 100%;
	margin-bottom: 20px;
	padding: 10px 25px;
}
#form1 textarea {
	height: 150px;
}

The form now looks like this:

Form with fixed width and background color

We will also use a new HTML 5 attribute named placeholder to show the labels inside the fields and remove the labels. The HTML code will be modified as:

<form id="form1" action="submitForm.php" method="get" >
  <input type="text" name="txtName" id="txtName" placeholder="Name:" />
  <br/>
  <input type="text" name="txtEmail" id="txtEmail"  placeholder="Email:"/>
  <br/>
  <textarea name="txtMessage" id="txtMessage"  placeholder="Message:"></textarea>
  <br/>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"  />
</form>

Now we will use a new CSS 3 property to give some shadow to form and input elements. The new property name is box-shadow. This property accepts 4 values as:

box-shadow: <color> <horizontal offset> <vertical offset> <blur>;
#form1 {

	width: 300px;
	padding: 20px 50px;
	background:#61C794;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: #000 0px 4px 12px;
 	-moz-box-shadow: #000 0px 4px 12px;
        -webkit-box-shadow: #000 0px 4px 12px;

}
#form1 input[type="text"], #form1 input[type="submit"], #form1 textarea {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width: 82%;
	margin-bottom: 20px;
	padding: 10px 25px;
	box-shadow: #000 0px 4px 12px;
        -moz-box-shadow: #000 0px 4px 12px;
        -webkit-box-shadow: #000 0px 4px 12px;
}
#form1 textarea {
	height: 150px;
}
#form1 input[type="submit"]
{
	margin-left:20px;
	background:#9DEE9F;
	border:none;
}

There will be a slight issue here with the Chrome browser. When the cursor is inside the field, there will be outline around the field:

 

Outline Issue

The outline looks awkward when the borders are rounded. To prevent this, hide the outline using following css code:

#form1 input:focus,#form1 textarea:focus{

	outline:none;
}

The final CSS code will be :


#form1 {
	width: 300px;
	padding: 20px 50px;
	background:#61C794;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: #000 0px 4px 12px;
        -moz-box-shadow: #000 0px 4px 12px;
        -webkit-box-shadow: #000 0px 4px 12px;

}
#form1 input[type="text"], #form1 input[type="submit"], #form1 textarea {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width: 82%;
	margin-bottom: 20px;
	padding: 10px 25px;
	box-shadow: #000 0px 4px 12px;
        -moz-box-shadow: #000 0px 4px 12px;
        -webkit-box-shadow: #000 0px 4px 12px;
}
#form1 textarea {
	height: 150px;
}
#form1 input[type="submit"]
{
	margin-left:20px;
	background:#9DEE9F;
	border:none;
}

#form1 input[type="submit"]:active
{
	border:1px inset #fff;
	padding: 10px 23px 8px;
}

#form1 input:focus,#form1 textarea:focus{
	outline:none;
}

And the output will be:

Final Form

Posted 6 December, 2014

Sanjeev Chugh

Web Designer and Developer

I am a web developer with expertise in PHP/MySQL, Wordpress, HTML5/CSS3. I have total experience of more than 12 years including 6 years in web development. I have worked with second largest telecom company of India. I have hundreds of satisfied and repeating clients.

Next Article

A Problem Defined is a Problem Half Solved