8 Beautiful Contact Forms For Separate Page Of Blogger

"How to add a contact form in blogger" is the simplest but most discussed topic now a days. Many new bloggers want to setup a contact form on a separate page on blog but they feel difficulty. No one can deny the importance of contact us page in blogger as it is the most necessary element of any blog. This page is a way for users to communicate with blog admin to ask any question to make experience and services more better. Moreover, Google Adsense demands the setup of this page at first priority.

Due to the importance of a contact page, we already discussed a detailed article about contact page. The new thing in this post is that it contains the working code for 8 different beautiful contact form which includes some CSS style forms too. This article contains following four steps:

Enabling a Contact Gateway in your blog
Saying good-bye to the default contact form
Adding/Enabling CSS in source code
Adding a desired contact form in separate page of blog

Here is the detailed discussion of each step.

Step 1: Enabling A Contact Gateway In Your Blog

Well, our first task is to make our blog enable for using any contact form on a separate page. This process is quite simple. We just need to add blogger default contact form in blog.

Sign into your blogger account, choose desired blog, go to "Layout" and add a gadget on sidebar.
Click "Add a Gadget", a window will appear. Here, choose "More Gadgets" and click on "Contact Form".

Save this setting and check your bog. It will show a contact form in sidebar. You can check the working of this form by sending a message to yourself through it. Its working is well and good.

Step 2: Saying Good Bye To The Default Contact Form

Up-till now, we have added blogger default contact form in our blog. This form is really simple and will be available only on the side bar of your blog. But you must setup it on a separate (Contact Us) page. Therefor we will hide (not remove) this form from sidebar.

Now Go to "Template" >> "Edit HTML".
Click anywhere in coding section and press "Ctrl + F" (Mac users will press "Command + F"). A search bar will appear.

Write ]]></b:skin> in the search bar and press enter to find it.
Now copy the following code and paste it above ]]></b:skin> tag.

div#ContactForm1 {
display: none !important;
}

Click on "Save Template", reload your web page. You can see that the contact form will not show any more on the sidebar of your blog.

Step 3: Enabling/Adding CSS Style In Your Blog

Basically CSS is required for the better performance of forms that contain some CSS styles icons etc. Most of the new templates have already added CSS style sheet but some templates lack it. Here, is complete guide to know either your template has this style sheet or not.

Go to "Template" >> "Edit HTML".
Click anywhere in code and press "Ctrl + F" (Mac users should press "Command + F")
A search bar will appear. Write font-awesome.min in this bar and hit enter.
You will find the following link if style sheet is already to your blog.

If it is not already present then you can copy and paste the above mentioned code under <head> tag in your template.

Step 4: Adding Any Desired Contact Form

Okay you have done all the necessary tasks. Now its time to make your blog beautiful and compete by just adding one of your favorite contact form from the list which is given below.

Go to "Pages" and create "New Page". Give a tittle to it e.g Contact Us.
Switch to HTML, delete any lines which are already written. Page setting should be as shown in image below.
Now, find your desired contact form from 8 stylish form and paste its code into this page (Contact Us).

Code#1:

This code will create the contact form as shown in below image.

/* Main Container */ .contact-form-widget { width:100%; max-width: 280px; margin: 0 auto; margin-bottom: 25px; padding: 10px; border:none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOn8w65g4MZzp0Ap6uWYWLD1EvzGD3z0B44eXsbovGqhVOFvquBtAg_lQS1UB1eaLsd9kuuN15wiD-YFFg2gMoPCmuwou5wMayrMBhJFR6e81E13vjQMrPrT0zygRcRJ3g2q5fJO-Szpo/s1600/wood+_texture5.jpg); color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Style the inner container */ .contact-form-widget div.form { background: #fff; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFni2_NqOvToP5O1-YGiTRKEJsjrKOwGEETas9TSg8gzAZGKDi7N48JIQgf8RtGsRF_VemsHXE3W0k8uUbSvtGaNOhclDS1IOi_akj08qk7wm4wj5PX6nvOlKXGzvUXPlFrZUt5_LCwaL/s133/stamp.png); background-repeat: no-repeat; background-position: 95% 85%; padding: 1px 10px; } /* Style fields */ .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } /* Message field */ .contact-form-email-message { width: 60%; max-width: 60%; padding: 5px; } /* button to send */ .contact-form-button-submit { width: 25%; max-width: 35%; height: auto; background: #28597a; padding: 2px 5px; border-radius: 5px; border: none; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #fff; font-size: 13px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; font-weight: normal; margin-bottom: 10px; } /* send button when hovering */ .contact-form-button-submit:hover{ background: #a14248; border: none; }

Code#2:

This code will create the contact form as shown in below image.

<div class='contact-form-widget'> <div class='form'>
<form name='contact-form'> <p class='text'>Name</p>
<input class='name' id='ContactForm1_contact-form-name' name='name' size='30'
type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p class='text'>Message *</p> <textarea class='message' cols='25'
id='ContactForm1_contact-form-email-message'
name='email-message' rows='5'></textarea>
<img src="https://lh3.googleusercontent.com/-tt5br_2RGV8/VyEDTypnd-I/AAAAAAAAC6c/BOosOyiAZ28ih3Tm67Et8L4_dWV_4lSwACCo/s716/arrow.png" alt="Arrow" style="width:150px;height:35px;background:#808080;border:none;"/>
<input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'>
</p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> <div style='display: none ! important;'>
<a href="http://www.playwithp.com" rel="dofollow"></a></div>
<style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold;
font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;}
.contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);
background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;
-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip:
padding-box;-moz-background-clip: padding;} .form textarea{background:
#afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;
-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;
-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border:
1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;
-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip:
padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://lh3.googleusercontent.com/-OOXKCVxe0ig/VyEDUgHDn4I/AAAAAAAAC6g/glXdkCE_0joF-hh53mKsOwwu53uGgL6FwCCo/s512/pro-pic.png);background-position:
11px 8px;background-size: 28px 28px;
background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url
(https://lh3.googleusercontent.com/-MaujepkTvbg/VyEDTvc9MuI/AAAAAAAAC6Y/g5TIZ_ozKvEIvaoXv8pWURaviEcT3RR6QCCo/s512/
msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message
{background-image: url(https://lh3.googleusercontent.com/-U12Vo3ayUb8/VyEDTjZXdUI/AAAAAAAAC6k/hJmCL5il6VMMyM-iJ4ZONW3BjCJkVhvlgCCo/s512/pencil.png);background-repeat: no-repeat;
background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .
form input:focus, .form textarea:focus { -moz-box-shadow:
0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border:
1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>

Code#3:

This code will create the contact form as shown in below image.

<style> .contact-form-widget { -moz-border-radius: 5px;
-webkit-border-radius: 5px; background-color: #eaeaea;
background: -moz-linear-gradient(top, #ffffff, #eaeaea);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea)); color: #444;
border: 1px solid #cacaca; margin: 0 0 25px; max-width: 96%;
font-size: 1.4em; padding: 8px 10px; }
.contact-form-name, .contact-form-email { width: 50%; max-width: 50%; margin-bottom: 10px; } .contact-form-email-message { width: 100%;
max-width: 100%; margin-bottom: 10px; } </style>
<div class='widget ContactForm' id='ContactForm2'>
<div class='contact-form-widget'> <div class='form'>
<form name='contact-form'> <p>Name</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p>Message *</p>
<textarea class='contact-form-email-message' cols='25'
id='ContactForm1_contact-form-email-message'
name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit'
id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message'
id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message'
id='ContactForm1_contact-form-success-message'></p>
</form> </div> </div> </div> <div style='display: none ! important;'><a href="http://www.playwithpc.com" rel="dofollow"></a></div>

Code#4:

This code will create the contact form as shown in below image.

/* main Container */ .contact-form-widget { width:100%; max-width: 280px; margin: 0 auto; margin-bottom: 25px; padding: 10px; border-top: 35px solid #d44897; border-bottom: 10px solid #d44897; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUFGFrI8nzMpkFjGtxFkPmbVH5Af4ZDu3IvTUBG_iXgrs7F4JdlrJDF6O5GgDJ4y6FywBIT7ZUut894yAMjSNbjxsNmtErRc2HlQ8oKJJx7rU3u-8mwcoSwPQnR0Wmd87OYc2sOTM0YqA/s55/pink.png); color:#424242; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-radius: 18px; } /* Style the inner container */ .contact-form-widget:before { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLTVII8J7mVbHu0tt1TQ4j9lh9PXaj0nJavTdSR3LYvcnPXKzBAQpvNcRWNfPWUCmk_JTN7DTwZEO199Z4lNlq_RBzFOFT6NJIduK60jdpX1vdi6XovTzoTQTQ7w2d1Ox6ArI9eJaR9rPp/s160/lazo.png); background-repeat: no-repeat; background-position: 100% 0; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } /* Styles fields */ .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } /* Message field */ .contact-form-email-message { padding: 5px; } /* send button */ .contact-form-button-submit { width: 25%; max-width: 35%; height: auto; background: #d44897; padding: 2px 5px; border-radius: 2px; border: none; color: #fff; font-size: 13px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; font-weight: normal; margin-bottom: 10px; } /* send button when hovering */ .contact-form-button-submit:hover{ background: #d1f6ff; color: #424242; border: none; }

Code#5:

Following contact form will be produced with the use of given code below

<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5; padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 450px; max-width: 100%; } </style><div class='c-form'> <div class='c-form-left'><div class='form' style='float:left;'><div class='widget ContactForm' id='ContactForm2'><div class='contact-form-widget'> <div class='form'><form name='contact-form'> <p>Name</p> <input class='contact-form-name'
id='ContactForm1_contact-form-name'name='name' size='30' type='text' value=''/> <p>E-mail *</p><input class='contact-form-email' id='ContactForm1_contact-form-email'name='email' size='30' type='text' value=''/> <p>Message *</p><textarea class='contact-form-email-message' cols='25'id='ContactForm1_contact-form-email-message' name='email-message'
rows='5'></textarea><br/> <br/>
<input class='contact-form-button contact-form-button-submit'
id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div></div></div></div> <div class='c-form-right'>
<div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://plus.google.com/u/0/103808957693444119769" imageanchor="1">
<img border="0" src="https://lh3.googleusercontent.com/-bF5WQBoAYkE/
AAAAAAAAAAI/AAAAAAAACs4/yfZFu2CmX8M/s60-p-rw-no/photo.jpg" /></a></div>
<br />Satellite Town, Street#1<br />Hussaini Chowk, Bahawalpur<br />
Punjab<br />Pakistan<br />Telephone: +923047330861<br />
E-mail: chandgoraya4@gmail.com </div>
</div>
</div></div> <div style='clear: both;'></div>
<div style='display: none ! important;'><a href="http://www.playwithpc.com" rel="dofollow"></a></div>

Modifications

Replace green line with your G+ profile URL.
Replace blue line with your picture URL.
Replace red lines with your address.

Code#6:

This code will create the contact form as shown in below image.

<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%; margin-right:auto;padding: 0px;width: 600px;} .form_name, .form_email {float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-name,
.contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;
margin-bottom: 10px;padding:10px;} .contact-form-email-message
{height:100px;width:100%; font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;}
.contact-form-button-submit {font-size:16px;height:30px;border-color:
#C1C1C1;width: 20%;
background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;}
.contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;
background: #ffffff;} </style> <div class="contact-form-widget">
<div class="form"> <form name="contact-form"> <div class="form_name">
Your Name: <input class="contact-form-name"
id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</div> <div class="form_email"> E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email"
name="email" size="30" type="text" value="" /></div> <div style="clear: both;">
</div> <div class="form_message"> Message *:
<textarea class="contact-form-email-message"
cols="25" id="ContactForm1_contact-form-email-message"
name="email-message" rows="5">
</textarea> <input class="contact-form-button contact-form-button-submit"
id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br />
<div class="contact-form-error-message"
id="ContactForm1_contact-form-error-message">
</div> <div class="contact-form-success-message"
id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div>
</div> <div style='display: none ! important;'>
<a href="http://www.playwithpc.com" rel="dofollow"></a></div>

Code#7:

This code will create the contact form as shown in below image.

/* Main Container */.contact-form-widget {width:100%; max-width: 280px; margin: 0 auto;
margin-bottom: 25px; padding: 10px; border-top: 35px solid #424242; border-bottom: 25px solid #424242; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwrriAatuFX8H0dpriPs54orzm0HN9X1x15ikl54Zxc-_D0UZiVWFfJmigwKE30CLvvqfDMuZdRNG19PUktbuOe5Bgxq94Cxvo_ubR-bjCIs3JJzcuBHoSLRGSeCPcjhyphenhyphenTYPjBBwErT50/s128/metal.gif); color:#424242; text-shadow: 1px 1px 1px #FFFAFB; box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65); border-radius: 18px; float: left;
}
/* Style the inner container */ .contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Styles fields */
.contact-form-email-message {
padding: 5px;
}
/* send button */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px; border-radius: 8px; box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #fff; font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none;
vertical-align: middle; margin-bottom: 10px; float: right;
}
/* send button when hovering */ .contact-form-button-submit:hover{ background: #424242;
color: #ccc; border: none;
}

Code#8:

This code will create the contact form as shown in below image.

<form name="contact-form"><span><i class="fa fa-pencil-square-o">
class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form
name" name="name" size="30" type="text" value="" /> <br /> <br /> <span>
<i class="fa fa-envelope-o">
</i> Email Address <span style="color: #f56954; font-size: x-small; font-weight:
bold;">important</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content
<span style="color: #f56954; font-size: x-small;
font-weight: bold;">important</span> </span><br /> <textarea cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br /> <div style="max-width: 222px; text-align: center;width: 100%;">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div></div></form><br />
<div style='display: none ! important;'>
<a href="http://www.playwithpc.com" rel="dofollow"></a></div>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email{ height:auto;margin:5px
auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;
border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;
padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;
border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-message:focus{outline:none;background:
#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px
rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';
float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;
cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;
text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;
border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:
hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;
box-shadow:none;
color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;
border:none;
box-shadow:none;color:#fff;} img.contact-form-cross
{line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,
#ContactForm1_contact-form-submit{width:100%;}}
</style>

Bottom Line

Choose one of the above contact forms that suits your blog best. By now, you and your visitors can use this contact form easily. Comment below to give your valued feedback or to ask a question in case of any confusion.

Breaking

Friday, 23 September 2016

8 Beautiful Contact Forms For Separate Page Of Blogger

Step 1: Enabling A Contact Gateway In Your Blog

Step 2: Saying Good Bye To The Default Contact Form