How To Add Contact Form Contact Us Page In Blogger

Blogger contact structure is very vital to provide your readers with the possibility to speak with you. Adding a contact form to your Blogger weblog is now not so tough. There is a Blogger Contact Form widget accessible in the list of Blogger’s default widgets. But a few days ago, It was once exceptionally hard because there used to be no such sort of widget on hand out there. Today we will learn how to add a fashionable Blogger contact shape in a static page? 

In this way, we will make a contact page for our blogger blog. Blogger’s default contact shape widget is very sparkling and lightweight. To make it greater attractive, I will provide some superbly designed Blogger Contact Form widget. You will be capable to use these in a contact web page of your blogger blog. So let’s start. 

How To Add/Enable Blogger Contact Form In Blogger?

First of all, we will have to add the blogger contact form widget anywhere in our blogger blog. This will enable the functionality of the contact form. Otherwise, we will not receive emails from our contact forms. To do that, first of all:

1. Sign in to your blogger account.

2. Go to the Blogger Dashboard/Overview.

3. Select the Layout section from the left menu.

4. Click on the Add a Gadget (Sidebar/ Footer will be better) > More Gadgets.

5. Click on the Blue Plus Button of the Contact Form Gadget and then Save it.

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 : ]]></b:skin>. Paste 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.

Code :

div#ContactForm1 {
display: none !important;}

Insert Font Awesome Icons In Blogger:

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this style sheet into your blog. To do this:

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

Code :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

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

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 a 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 button as shown below:

• 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. See the screenshot to become clearer:

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

1. Blogger Contact Form Design 

This is a beautiful and responsive blogger contact form. It has a simple and attractive design. Also, this form has some additional features. It has a clear button to make the text area empty with one click. It has some social buttons to notify users about social pages.

Code :

<style>.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvhNx2t6h9f5T2IlpKINMqmmEoS-jeikzqqtmZz4ZR9YrUZIN_A3QqmZ7xG2frZ7Klf87vfaf9CVSjnwWzKUX5A-O51iKo2sq-Yz1icgzgy2cIdlANnLEc_y-tEj14Yo-OoadoTKNckxk9/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.

I hope you enjoy this post and the photos. How to Add Contact Form Contact Us Page in Blogger

Share this post