Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
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.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
