7 Awesome Blogspot Contact Form

0 0 Saturday, 30 May 2020 Edit this post

Contact form is the most important part in blogging . When our readers wants to communicate with this tool make vital role to readers and us so its a important part in blogging .

Contact form

In this article i m going to provide 8 awesome contact form of blogger to my readers . Its make your blog more attractive and speedable . All blogger contact form i tested personally in my blog so you can use this freely on your site. Here is the process:

Sign into your blogger account.
Go to the Blogger Dashboard
Select Layout section from the left menu.
Click on the Add a Gadget
Click on the Blue Plus Button of the Contact Form Gadget and then Save it.

Add-blogger-contact-form-in-blogger

After You have successfully added the Blogger Contact Form Widget in your blog. Now it is time to hide this default blogger contact widget because we are going to make our stylish contact form in a static “Contact Us” page.

How To Hide Default Blogger Contact Form?

To hide this default Blogger Contact Form, Go to the “Template section and click on the Edit HTML button”. Now find the style ending code : ]]>>

.Paste below this small CSS code just above this. Save your template and you are done. Reload your blog and you will see the default contact widget disappears.





div#ContactForm1 {

display: none !important;

}

How-to-hide-default-blogger-contact-form & Insert Font Awesome Icons In Blogger:
In this process i have used Font Awesome icons in these custom blogger contact form. So you will have to insert this style sheet into your blog. otherwise its not working. To do this:

Go to the Template section > Click on Edit HTML > Find the ending head :
Copy the code and paste it right above the “.”

Code :





<link https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Click on the “Save Template” button. You are done.

insert-font-awesome-icons-in-blogger

Note: If your template has already contained this code then you don’t have to implement this twice.
How To Add Blogger Contact Form In A Static Page?

Now we can create our static Contact Us page for blogger for applying a stylish and eye catching contact us form. For doing this, we must create a contact us page on our blog. If you already have a contact us page, you can use it, but if you don’t have, you can create it in this way.

Go to the Pages section and click on the New page:

Fill up the Page Title with Contact Us/Contact. (The name of your contact page). Bring this page into HTML mode by clicking on the HTML tab.
Now go to the Page Settings Options. Click on it. Select Readers Comments “Don’t allow, hid existing”. Click on done button.

Now choose the Blogger Contact Form design you like most from the list below. Copy the code and Paste it in your contact page as shown above. Publish the page and see the magic.

Design 1





    <style>

    .tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwgwDB63xG1wXNCQ__o8LrA5nx-HhBC4_HG7A8F8rU2NQuKJ1wX_6WaMePRWgi6apslnZ9IIfwFOH7bUyyiolYJqU-x6Ff4nB6Ppz1z3qNttTzUXokrk9NJO90OkmVn3vu45-c98FtgVr/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}

    .srbtn{display:inline-block;}

    .cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}

    .cform-button:hover {background-color: #2980b9;color: #fff;}

    .btn-reset:hover {background-color: red;color: #fff;}

    .tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}

    .c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

    -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

    box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

    .c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

    -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

    .c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;

    -moz-box-shadow: 0 0 0 1px #e8c291 inset;

    -webkit-box-shadow: 0 0 0 1px #E8C291 inset;}

    .b-social-buttons{list-style-type:none;text-align:center;}

    .b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}

    .b-social-buttons li a{color:#333;text-decoration:none;}

    #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}

    </style>

    <div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />

    <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><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>

    <h3>Our Social Sites</h3>

    <ul class="b-social-buttons">

    <li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>

    <li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>

    <li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>

    </ul></div></form></div>

Configuration: This form uses some font awesome icons. So, you must install the font awesome library as I have shown above. If you get the “https” error message while installing this widget then simply “Dismiss” this and click on the update button again because if we use https ever then all of the resources of this form will redirect automatically.For using social buttons, simply replace the highlighted “#” with your twitter, facebook and youtube channel URLs.

Design 2





    <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>

Design 3



    <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>

Design 4



    <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: 400px; max-width: 100%; }.contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;} </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyweTmip8yt4cr-DVRGVyKuR3LJw_bqZwAO6cAziNe-JLI2yCBkX4CgQiStQQJfI4NSVa_630a-E0ZSJAg6UgyrvKgbjoB07Bh77DraIPv1NOAqdoKESyqI9VkvcyM1bW273xLpbBUKenN/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyweTmip8yt4cr-DVRGVyKuR3LJw_bqZwAO6cAziNe-JLI2yCBkX4CgQiStQQJfI4NSVa_630a-E0ZSJAg6UgyrvKgbjoB07Bh77DraIPv1NOAqdoKESyqI9VkvcyM1bW273xLpbBUKenN/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     </div> </div> </div></div> <div style='clear: both;'></div>

Design 5



    <form name="contact-form"><span><i 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 /><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>

Design 6



    <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> <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> <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbi1iDe5T13CNvCEUalYOW4RQWa09mQu2Dm0mFOlbyKIJaHy9wINjU0agVXWyH6lxs3H5qWSCrhzPcB1vd5bW4PS9HJNmZ2O_tcY3IAyctTRTLtDBzsuwV5W38YjPzhvTfN1FVij1hwfxS/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCp5FZZDVjYgIK_fMVq3lvKlqyyFQlUCaDMrt4HGC3Gn6hD_zRp-JuH1G7xexX3r0YFr7W0xMwWmLvRMMZQ-m7_TqgtbWwBL85-suSu1guEwRg3cn4cRs2SltccmT-LL2Udm3FHvui33K/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvY_GhPfL_dBakJxRXafYB4CMW56lSrMAaCe-4ycdfZ7B32ur2XvvaUYzCwha41RtEv4Td0SFwI53TgZFut1LsBw-cTqYG8mHXmitQY7FxiO3eWzHaa1-mF4DLngriYpR2XL99_GE9QEaA/s1600/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>

Design 7



    <style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}

    .c-form-email-message{width:95%;height:150px;line-height:18px;}

    .tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}

    .tb-contact-form-widget label{margin-left:10px;color:#999999;}

    .cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

    #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}

    </style><div class="tb-contact-form-widget"> 

    <form name="contact-form"> 

    <div class="name"> 

    <input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/>

    <label for="name">Name</label>

    </div> 

    <div class="email">

    <input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/>

    <label for="email">E-mail *</label>

    </div> 

    <div style="clear: both;"></div>

    <div class="message"> 

    <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us...">

    </textarea>

    <div class="srbtn">

    <input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />

    </div>

    <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>

All above pasted code working properly if you faced any problem during implementation please let me know in comment box. i'll response you within 5 Hours . And if you like this article and got help with this Contact form please give small link on your site this site . Thankyou Happy blogging.