Form Styling with HTML/CSS3

In this blog post we provide you 5 different form styles, created in HTML/CSS3.

just follow our codes or download it to use in your form styles.

Form Style 1:- if you want to put icons in input fields of your form then following style is for you.

HTML File: form1.html


<!DOCTYPE html>
<html>
<head>
<title>Icon inside Input Field - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here -->
<link href="css/form1.css" rel="stylesheet">
</head>
<body>
<div id="first">
<img id="logo" src="images/logo.png">
<label>Full Name :</label>
<input id="fname" placeholder="Full Name" type="text">
<label>Email :</label>
<input id="email" placeholder="Email" type="text">
<label>Contact Number :</label>
<input id="contact" placeholder="Contact Number" type="text">
<label>Address :</label>
<input id="address" placeholder="Address" type="text">
<input id="submit" type="submit" value="Submit">
</div>
</body>
</html>

CSS File: form1.css


@import "http://fonts.googleapis.com/css?family=Raleway";
body{
font-family:'Raleway',sans-serif
}
img#logo{
margin-left:90px
}
div#first{
width:350px;
height:auto;
margin:50px auto 0;
padding:50px;
background-color:#EEE;
color:#333;
border:2px solid #C2D6FF;
border-radius:40px 0 40px 0
}
label{
font-size:15px;
font-weight:700
}
input#fname{
background-image:url(../images/icon_name.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#email{
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#contact{
background-image:url(../images/mobile.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#address{
background-image:url(../images/home.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#submit {
background-color:#cc7a66;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
margin-left:120px
}
input#submit:hover{
background-color:#FF9980
}

Form Style 2:- if you want to put some texture in background of your form then following style is for you.

HTML File: form2.html


<!DOCTYPE html>
<html>
<head>
<title>Forms - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here -->
<link href="css/form2.css" rel="stylesheet">
</head>
<body>
<div id="first">
<form action="" method="post">
<h1>Contact Form</h1>
<h4>Please fill all entries.</h4>
<label class="one">
<span>Name :</span>&nbsp;
<input class="name" name="dname" type="text">
</label>
<label class="two">
<span>Email :</span>&nbsp;
<input class="email" name="demail" type="email">
</label>
<label class="three">
<span>Message :</span>&nbsp;
<textarea class="msg" name="msg">
</textarea>
</label>
<label class="four">
<span>Subject :</span>&nbsp;
<select>
<option value="Product Inquiry">Product Inquiry</option>
<option value="Feedback">Feedback</option>
<option value="Complaint">Complaint</option>
</select>
</label>
<input class="submit" name="dsubmit" type="submit" value="Send">
</form>
</div>
</body>
</html>

CSS File: form2.css

/* Below line is used for online Google Font */
@import "http://fonts.googleapis.com/css?family=Ubuntu";
body{
margin:0;
padding:0;
font-family:'Ubuntu',sans-serif
}
#first{
width:400px;
height:610px;
box-shadow:0 0 15px rgba(14,41,57,0.12),0 2px 5px rgba(14,41,57,0.44),inset 0 -1px 2px rgba(14,41,57,0.15);
float:left;
padding:10px 50px 0;
background-image:url(../images/1.jpg);
margin:2% 30%;
border-radius:5px
}
hr{
border-top:1px solid #ccc;
margin-bottom:30px
}
span{
float:left;
margin-top:8px;
font-size:17px
}
.one{
display:block;
margin-left:22px;
margin-top:10px
}
.two{
display:block;
margin-left:27px;
margin-top:10px
}
.three{
display:block;
margin-left:-3px;
margin-top:10px
}
.four{
display:block;
margin-left:9px;
margin-top:10px
}
input,select{
width:300px;
padding:10px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
font-family:Cursive
}
textarea{
width:300px;
padding:7px;
height:100px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18)
}
.submit{
width:100px;
margin-left:83px;
padding:10px;
margin-top:20px;
background:linear-gradient(#A4A4A4,#424242);
color:#fff;
font-weight:700
}
.submit:hover{
background:linear-gradient(#424242,#A4A4A4)
}

Form Style 3:- if you want to put some image in background of your form then following style is for you.

HTML File:form3.html


<!DOCTYPE html>
<html>
<head>
<title>Forms - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/form3.css" rel="stylesheet">
</head>
<body>
<div id="first">
<form action="" method="post">
<h1>Contact Form</h1>
<h4>Please fill all entries.</h4>
<span class="spn1">Name :</span>&nbsp;
<input class="name" name="dname" type="text">
<span class="spn1">Email :</span>&nbsp;
<input class="email" name="demail" type="email">
<span>Gender :</span>
<input class="male" name="gender" type="radio" value="male">Male
<input class="female" name="gender" type="radio" value="female">Female
<span>Message :</span>&nbsp;
<textarea class="msg" name="msg">
</textarea>
<input class="submit" name="dsubmit" type="submit" value="Send">
</form>
</div>
</body>
</html>

CSS File: form3.css


/* Below line is used for online Google font */
@import "http://fonts.googleapis.com/css?family=Roboto+Slab";
body{
margin:0;
padding:0;
font-family:'Roboto Slab',serif
}
#first{
width:400px;
height:610px;
box-shadow:0 0 0 1px rgba(14,41,57,0.12),0 2px 5px rgba(14,41,57,0.44),inset 0 -1px 2px rgba(14,41,57,0.15);
float:left;
padding:10px 50px 0;
margin:2% 30%;
background-image:url(../images/i.jpg)
}
hr{
border:none;
border-bottom:1px solid #ccc;
margin-bottom:40px
}
h4{
margin-top:-20px
}
span{
float:left;
font-size:17px
}
span.spn1{
margin-top:13px
}
input{
width:300px;
padding:10px;
border:3px solid #e1e1e1;
margin-bottom:25px
}
textarea{
width:300px;
padding:10px;
border:3px solid #e1e1e1;
height:100px;
margin-bottom:25px
}
input.name{
margin-left:25px
}
input.email{
margin-left:27px
}
input.male{
width:50px;
margin-left:7px;
margin-bottom:15px;
height:17px
}
input.female{
width:50px;
margin-left:72px;
margin-bottom:15px;
height:17px
}
input.submit{
width:100px;
font-weight:700;
margin-left:86px;
cursor:pointer;
background-color:#ad6d2f;
font-family:'Roboto Slab',serif;
border:2px solid #fff
}

Form Style 4:- if you want to put some image in background of your form then following style is for you.

HTML File: form4.html


<!DOCTYPE html>
<html>
<head>
<title>Forms - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/form4.css" rel="stylesheet">
</head>
<body>
<div id="first">
<form action="" method="post">
<h1>Contact Form</h1>
<h4>Please fill all entries.</h4>
<label>Name :</label>
<input name="dname" placeholder="Your Name" type="text">
<label>Email :</label>
<input name="demail" placeholder="Your Email" type="text">
<label>Message :</label>
<textarea name="dmsg" placeholder="Message">
</textarea>
<input name="dsubmit" type="submit" value="Send">
</form>
</div>
</body>
</html>

CSS File: form4.css


/* Below line is used for online Google font */
@import "http://fonts.googleapis.com/css?family=Ubuntu";
body{
margin:0;
padding:0;
font-family:'Ubuntu',sans-serif
}
#first{
width:350px;
height:610px;
box-shadow:0 0 25px rgba(14,41,57,0.12),0 2px 5px rgba(14,41,57,0.44),inset 0 -1px 2px rgba(14,41,57,0.15);
float:left;
padding:10px 50px 0;
border:15px solid #93FCC9;
margin:2% 30%;
background-image:url(../images/tt.png)
}
hr{
border:0;
border-top:1px solid #ccc;
margin-bottom:30px
}
h1{
margin-bottom:-10px
}
label{
font-size:17px
}
input{
width:350px;
padding:10px;
margin-top:10px;
margin-bottom:35px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
font-size:16px
}
textarea{
width:350px;
height:100px;
padding:10px;
margin-top:10px;
margin-bottom:35px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
font-size:16px
}
input[type=submit]{
background:linear-gradient(to bottom,#22abe9 5%,#36caf0 100%);
box-shadow:inset 0 1px 0 0 #7bdcf4;
border:1px solid #fff;
color:#fff;
font-size:19px;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input[type=submit]:hover{
background:linear-gradient(to bottom,#36caf0 5%,#22abe9 100%)
}

Form Style 5:- if you want a normal form then following style is for you.

HTML File: form5.html


<!DOCTYPE html>
<html>
<head>
<title>Forms - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/form5.css" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="first">
<form action="" method="post">
<h1>Contact Form</h1>
<h4>Please fill all entries.</h4>
<label>Name :</label>
<input name="dname" placeholder="Your Name" type="text">
<label>Email :</label>
<input name="demail" placeholder="Your Email" type="text">
<label>Message :</label>
<textarea name="dmsg" placeholder="Message">
</textarea>
<input name="dsubmit" type="submit" value="Send">
</form>
</div>
</div>
</body>
</html>

CSS File: form5.css


/* Below line is used for online Google font */
@import "http://fonts.googleapis.com/css?family=Ubuntu";
body{
margin:0;
padding:0;
font-family:'Ubuntu',sans-serif
}
#main{
width:910px;
height:620px;
margin:30px auto
}
#first{
width:400px;
height:610px;
box-shadow:0 0 0 1px rgba(14,41,57,0.12),0 2px 5px rgba(14,41,57,0.44),inset 0 -1px 2px rgba(14,41,57,0.15);
float:left;
padding:10px 50px 0;
background:linear-gradient(#fff,#f2f6f9)
}
hr{
border:0;
border-top:1px solid #ccc;
margin-bottom:30px
}
label{
font-size:17px
}
input{
width:400px;
padding:10px;
margin-top:10px;
margin-bottom:35px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
font-size:16px
}
textarea{
width:400px;
height:100px;
padding:10px;
margin-top:10px;
margin-bottom:35px;
border-radius:5px;
border:1px solid #cbcbcb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
font-size:16px
}
input[type=submit]{
background:linear-gradient(to bottom,#22abe9 5%,#36caf0 100%);
box-shadow:inset 0 1px 0 0 #7bdcf4;
border:1px solid #0F799E;
color:#fff;
font-size:19px;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input[type=submit]:hover{
background:linear-gradient(to bottom,#36caf0 5%,#22abe9 100%)
}

For more related updates check out the following blogs –

CSS Gradient

CSS Submit Button Designs

Form Styling with HTML/CSS3

One Reply to “Form Styling with HTML/CSS3”

Leave a Reply Cancel reply

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.

Form Styling with HTML/CSS3

Related Posts:

One Reply to “Form Styling with HTML/CSS3”

Leave a Reply Cancel reply

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great emails to your audience. Do amazing email marketing at an affordable price.

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.