Recent Posts

How to add contact us page in blogger

In this article, I will show you how to add contact us page in blogger. Yes, professional contact-us page in blogger like you sees in the WordPress or other websites. All over the world, people use blogger platform to write the article and share their thought with other. Blogger is a free and easy platform to make a blog but in blogger main drawback is contact us page, you cannot make professional contact us page easily in blogger.

So let’s start step by step to make one.

Add contact us gadgets


Step 1. Log in into your blogger platform, navigate through blogger menu option and click on     Layout.

Step 2. After clicking on Layout option, you can see your template layout section, in this click on add a gadget in the sidebar right.

blogger


Step 3.  When you click on add a gadget you can see a new pop up window is open scroll down to find contact us gadget click on that and add into your sidebar right.

blogger


Contact us gadget will be added in a sidebar but not in a page. In the next section, we will hide contact us gadget in a sidebar and added to our page. For this, we make some changes in our template before doing this make sure backup your template file.

Step 4. In a blogger, menu clicks on Theme you can find just below in Layout option.

Step 5. After click on Theme click on Edit HTML. After clicking you can see your template HTML code. You can make some change on that.

blogger


Hide contact us gadget in sidebar.

Step 6. For hiding click on code section and Search ]]></b:skin>.
To searching press ctrl+F, you can see input section is open on the input area type ]]></b:skin> on it and press enter button on your keyboard. 

Step 7. Paste the flowing code just above the ]]></b:skin>. You can see on the image we provided.

 

blogger

After adding make sure click on the save theme button. Now contact us gadget will be hiding in the sidebar area. In the last and the main step, we create contact us page in blogger.

Also Read : How can add Category and subcategory in WordPress permalink

Create Contact us page


Step 1. Navigate to blogger menu options click on the page option and create a new page.

contact-us


Step 2. First click on the HTML it will convert the page into HTML editor. Now paste the given code into that area.

contact-us


This code has two section one is CSS and second are HTML. The benefit of this code you can customize this code according to you.

CSS code

 


HTML code

<div class="tb-contact-form-widget">
<form name="contact-form"> 
<div class="form-name"> 
<i class="fa fa-pencil-square-o"></i> Your Name: <br /> 
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</div> <div class="form-email"> 
<i class="fa fa-envelope-o"></i> E-mail Address *: <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"> 
<i class="fa fa-keyboard-o"></i> Message *:<br /> 
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">
</textarea><br />

 <div class="srbtn"> 
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<input class="btn-reset" type="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 class="btn-lg" href="https://twitter.com/"><i class="fa fa-twitter"> 
<span class="network-name">Twitter</span>
</i></a></li>
 <li><a class="btn-lg" href="https://www.facebook.com/">
<i class="fa fa-facebook"> <span class="network-name">Facebook</span></i>
</a>
</li> 
</ul> 
</div> 
</form> 
</div> 
</div>


Select all CSS and HTML code and paste in your page area.

Step 3. Last click on the publish button to save the page and voila you have done it.

Also Read : What is SEO and how it’s work - A step by step process


 I hope this article helps you to add contact us page in your blogger website. If you face any difficulties please comment us. We happy to help you.
How to add contact us page in blogger How to add contact us page in blogger Reviewed by TechnoBush on October 08, 2018 Rating: 5

1 comment:

Home Ads

Powered by Blogger.