Original creator and form source
CSS Globe and all credits goes to them i'am just sharing with you guys , visit their website for more awesome stuff including this forms. So these forms looks truly beautiful and professional ( Thanks to
CSS Globe ) so here we go with CSS:
CSS :
<style>
/* form 1 */
#form1{
margin:1em 0;
width:600px;
padding-top:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOllfwxq6ig3TcQS2gXKjvTibJqXtRLKpaaaMCqe1ZKMpfAL_PWDeM_ePDXIsTQZserb3anRnlccK2QKKN0BJsXAZAK9g6B5DwqMjpVW5BVqN88cAP0L-tO7yJH-9tq-tth_8MOGXgVyY/s1600/form_top.gif) no-repeat 0 0;
}
#form1 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:260px;
margin-left:25px;
} #form1 legend{display:none;} #form1 p{margin:.5em 0;} #form1 label{display:block;} #form1 input, #form1 textarea{ width:252px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6zrvdja_8GXtemDlLwglRa9tp_vDoKX-geIKMs9U5Gci5mbII0cBSzyQczZIM9GtUB1u03jGskg_OFnOfFkivYVFlTkLQQ7NZpDAjtRmBIZKjGrWYp3jVnI9vf2-vq3fig5aClKTgeyo/s1600/form_input.gif) repeat-x;
padding:3px;
outline:0px;
} #form1 textarea{
height:125px;
overflow:auto;
outline:0px;
} #form1 p.submit{
clear:both;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEKjhC8zBE8NYD1zdElE8UoaonG74oWl411nUMU69YKWwmgNZewLDFqNZdpvwX_hmFSpzNoj6XnB_lG_vkuyJP_9tPjyXCIRdEz8UrhZSU5d3xl4grSz99ZlYFUzo_IdUpfRp2_dWVq4/s1600/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
} #form1 button{
width:150px;
height:37px;
line-height:37px; border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5a0CIdAbAC_cO2JOWHNIdpsVoRit5HVjHwoRjnES-TfDDjcjfHswVPI00wbecLfuIOo1mn6y4YyEBEQUPr5qQVNOd5q92WJKhguajWUPjM9PTpQox_bFZjcJwGEaIPDiaM2Cv6jWcbZY/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}
/* // form 1 */
/* form 2 */
#form2{
margin:1em 0;
color:#fff;
width:320px; /* customize width, this form have fluid layout */
}
#form2 h3{
margin:0;
background:#57a700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzpNY2vmaIIxdh6aZ1E8iDTcXMSfXyZSCawjuFGsA5ETaJncLpJxtxflwodutg8nbxs_HHpJVquBJcZHy26ECokv4kZ9yn-NTbeZ0IxPKQQB7iM5vjYCjClKElrmk-XPvqN94RfBQmOE/s1600/form_heading.gif) repeat-x; color:#fff;
font-size:20px;
border:1px solid #57a700;
border-bottom:none;
} #form2 h3 span{
display:block;
padding:10px 20px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8-M1zEuu2gQYeUl9a9Vht-olHPhCiVXDyvjjLCstofiWlkxzAErBX9kn59jVAaq1_5Y9UfL61QThm1lXzpo5kCcB1uR4nQxAXFSMtIoukzNiT0WxxPIYzJHVD8JUBHci72SIbZ8LSK0/s1600/form_ico.gif) no-repeat 93% 50%; } #form2 fieldset{
margin:0;
padding:0;
border:none; border-top:3px solid #000;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaErEKNi_PNoYdhY_xbWehFB-AJMARvYmqOIuTUluGgS-kZmFNQTIk0UoSogWXc5kda0MXd8SZCQQfH5UhEW0yeJV86xey2KJo28P256ViofmCbb3Igf9gL1BTGeWrv_ztTHW5UXzo4Xo/s1600/form_top.gif) repeat-x; padding-bottom:1em;
} #form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2 label{display:block;} #form2 input, #form2 textarea{ width:272px;
border:1px solid #111;
background:#282828 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcM2K-bpd4f3ki2wP7VecItJP2KEiI9tK2iz5tA1JhfNdm6S9VmpVEZeMw7RjxoFT1ItrYRx_PmCAFVeynbdMRCUEapXW2C1dX0nvutm_zfo3TmbzyqfzBtl684ITuzTIdo0BNsMMkW6Q/s1600/form_input.gif) repeat-x;
padding:5px 3px;
outline:0px;
color:#fff;
} #form2 textarea{
height:125px;
overflow:auto;
outline:0px;
} #form2 p.submit{
text-align:right;
} #form2 button{
padding:0 20px;
height:32px;
line-height:32px; border:1px solid #70ad2e;
background:#5aae00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1JNP-htPYnQ5SkdNuwF8nlWoppFML-zCtAZRki6bbBHq2BQbwWXcHr7-uYZNRXknJU64_YTQjC2pgNQnMecJngDDTewBatQaFK0jp1BYEqJg6Hchx3-msHsRPh9TlxYfJuOSq8Hhn5Z4/s1600/form_button.gif) repeat-x;
color:#fff;
cursor:pointer; text-align:center; }
/* // form 2 */
/* form 3 */
#form3{
margin:1em 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhQ03lRzqemybmKRYmWzwz1l_Zm2Te7bGmtvLC_P95V_AUsss4vNdt0EcCQ1vNkDRqkoKpzcnQi8nRadUYKMWWkZcpp2u9F3J8gwwPMNswGgJ6_0AWuKIcBO5-1IhAH5aDQGKcBKk2tI/s1600/form_bg.jpg) no-repeat 0 0;
width:542px;
height:364px; /* fixed size (envelope graphic) */
overflow:hidden;
}
#form3 h3{display:none;} #form3 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:200px;
margin-left:34px;
padding-top:80px;
} #form3 fieldset.last{
width:254px;
margin-left:17px;
} #form3 legend{display:none;} #form3 p{margin:.5em 0;} #form3 label{display:block;} #form3 input, #form3 textarea{ width:192px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQvpenXQKgmdoXkerk2Tpc6E6ZUN7Pc-xlaLiFFk8Nop4fGJYeNo-nAXo8PVoCYHE0eRHhX30l6aaysr71V7ac6aqRNTZH-4eWKSpUb45AvvjssnfbVoUTq9X_Mv6IB5RY-fJf6iN25A/s1600/form_input.gif) repeat-x;
padding:3px;
outline:0px;
} #form3 textarea{
width:246px;
height:200px;
overflow:auto;
outline:0px;
} #form3 p.submit{
margin:0 34px;
clear:both;
position:relative;
} #form3 button{
padding:0;
position:absolute;
left:0;
top:-3.5em;
width:95px;
height:36px;
text-indent:-8000px;
overflow:hidden;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfiDQ5jwv9OPkcT2UqunOvMKJ4i__hoJY8N4Uy4w6lt879K9OpE8TZSZ7BdTiJSvGH5eS7Gf_hkCc4HqxTunbDbS5Q_clrQRTQgq6q8yY-jinlb1lsulguL7hLONuRoWURTH7h_lfYHw/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
}
/* // form 3 */
/* form 4 */
#form4{
margin:1em 0;
padding-top:1.5em;
color:#246878;
width:350px; /* customize width, this form have fluid layout */
background:#fbfaf4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5nqBdSbQ8ojZ7fkq9d4GJSY4B6pKzlFhNciuK5O3_R3P6GhY4JM87GVk5fG0c4mQ72mCGWTfuKz1qsw5v_vTCuDy7mN_iq7zt_3TqP18hp_f3_r1vKx2ia4VZNqRmPWQqlWHnkhfoME/s1600/form_bg.gif) repeat-y; }
#form4 h3{
margin:0 20px;
height:28px;
text-indent:-8000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH19jQd8KKxic7DHG0URfp564ATgOvnQYc7bBXvPSnW_pfX8N4_mR8o9nts8MTfLaFG-VixUycI27Qd1Q88Sdr-0nyK6DlGAyEHDLC61CLkkXVGVGK9WGSXDQktsC1WxEsBj28dEjDw7c/s1600/form_heading.gif) no-repeat 0 0; } #form4 fieldset{
margin:0;
padding:0;
border:none; padding-bottom:1em;
} #form4 legend{display:none;} #form4 p{margin:.5em 20px;} #form4 label{display:block;} #form4 input, #form4 textarea{ width:302px;
border:1px solid #dfdfdf;
background:#fff;
outline:0px;
padding:5px 3px;
} #form4 textarea{
height:125px;
outline:0px;
overflow:auto;
} #form4 p.submit{
text-align:right;
} #form4 button{
margin:0;
padding:0;
text-indent:-8000px;
overflow:hidden;
width:88px;
height:56px;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfs0_k01WXDn-8VZumpq0d_JpQlvtigXIG2vWdYEoEWDwpZWXwQ4mm7DxlA9GCRRB5OdvOiZuBXt_hgHlfKbU7mF_Sv5bh67ielzSn4yhDGvBSn8zWn81X_9pva1kwUfHcmW7ImEaoUuU/s1600/form_button.gif) no-repeat 0 0;
cursor:pointer;
text-align:left;
}
/* // form 4 */
/* form 5 */
#form5{
margin:1em 0;
padding-top:10px;
}
#form5 fieldset{
margin:0;
padding-top:.5em;
border:none; border-top:1px solid #f1f1f1;
} #form5 legend{
background:#fff;
padding:0 5px;
font-style:italic;
} #form5 p{
clear:both;
margin:.5em 0;
overflow:hidden;
} #form5 label{
float:left;
width:60px;
display:block;
text-align:right;
margin-right:10px;
} #form5 input, #form5 textarea{ margin:0; width:250px;
outline:0px;
border:1px solid #ddd; padding:3px 5px 3px 25px;
} #form5 input#name{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif) no-repeat 5px 50%;}
#form5 input#email{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif) no-repeat 5px 50%;}
#form5 input#web{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrP6eK4x-QY8mdWY3biQy0f_JClAlibialbQqbe5S66iSTWaD32RpoW1yKS7xdOj7ufXt_MoNMnhXI8VG9PlZwyc5nvDWWh0wArrmHWyhU1-_ow2E5HUu8OrbkKjyBclqId2PN_s6hc2U/s1600/form_url.gif) no-repeat 5px 50%;}
#form5 textarea#message{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif) no-repeat 5px 6px;}
#form5 textarea{
height:125px;
outline:0px;
overflow:auto;
} #form5 p.submit{
clear:both;
margin:1em 0;
padding:.5em 70px;
border-top:1px solid #f1f1f1; } #form5 button{
height:28px;
line-height:28px; border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37LqPnKywvbjfLcWn_EQzo_b9BLhDta3verZoMhhYLQx7D-wNcHflWTuP8r-vddbobUg3nQjt1d4hOZeyzXhR1qEXzIFBHRN-gUuts2CsuJaSzmDcOSFr5La3l2j1noyYC8BAIHauOQk/s1600/form_button.gif) no-repeat;
padding:0 10px 0 25px;
color:#333;
cursor:pointer;
text-align:left;
font-size:11px;
font-weight:bold;
}
/* // form 5 */
</style>
Just post above CSS in your blog's CSS or on your HTML document now below is HTML markup :
<form id="form1/2/3/4/5" action="/" method="post">
<fieldset><legend>Contact form</legend>
<p class="first">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>
Post above HTML in your document and with if form1 /form2 /form3 /form4 or form5 because every id has different form style.
