Tuesday, October 11, 2016

How To Add Contact Form In Blogger

Tags

These days people are passionate about blogging where some are doing business over blogging. Blogging means writing what you know. Its the easiest way to earn money as well. You just need to write articles on the topic you know and you will be getting money if you have place ads in your blog. For that you need to have good blog with perfect posts so you can apply for adsense and earn money.
After having a blog you must need to have the contact page in your blog where the blog readers can give their suggestions and any ideas to improve your site or any others good views about blog.A contact is is specially made for the visitors of your site where they can question you on the topics from your site,they may have queries which they can send you from the contact page.Contact form of your blogger is directly connected with your gmail so you will be mailed if somebody wrote in the contact form page.
  But these days there are many ways to reach to the blogger or the the blog owner through different social site which are linked in the blog but also contact page is the traditional way so why not to have it and make your blog a bit better.

  So  Are You having Problem in adding contact page with contact form ???
If  yes You don't need to worry about that I'm gonna give you full tutorial about it.so I'm going to give you the tutorial step wise.
So here are the steps and I'm giving the screen shot where it is necessary as every steps do not need any screen shot.

  1. At first you just need to open your blog in editing mode not in the preview mode..it it shown below  and you just need to see there and find pages then you simply click on it.

  2. After you click there there appears the list of pages you have created if you don't have created yet there wont be any pages.so let click in the new page as shown below.
  3. After you clicked in new page you are redirected in the another page where you can make your contact page. after page is opened then give that page a title as Contact Form and after you did that then click in html as shown below in below.
  4. Then you just need to copy the below code and paste it in the html and publish the page.
<div id="custom_ContactForm1" class="widget ContactForm">
 <div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
  <div class="form">
   <form name="contact-form">
    <p></p>
    Name
    <br>
    <input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
    <p></p>
    Email
    <span style="font-weight: bolder;">*</span>
    <br>
    <input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
    <p></p>
    Message
    <span style="font-weight: bolder;">*</span>
    <br>
    <textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
    <p></p>
    <input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
    <p></p>
    <div style="text-align: center; max-width: 222px; width: 100%">
     <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
     <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
    </div>
   </form>
  </div>
 </div>
 <div class="clear"></div>
 <span class="widget-item-control">
  <span class="item-control blog-admin">
   <a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;ContactForm1&quot;));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" class="quickedit">
    <img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
   </a>
  </span>
 </span>
 <div class="clear"></div>
</div>

Finally You are done with your contact page and the contact page will appear like this.

Hope you all get the idea about creating the contact form if the is still something you don't understand about it just go to our contact page and contact us  as i request to utilize the contact page though you can also comment your queries below easily...and for the code you can also go to the google and get it and you can edit the code its design and color if you are good in html and CSS editing..As for example in the above screen shot picture you see just above contact form the is written"Get in touch with us by filling out the form below" So that can also be edited as you want if you know coding.

Thanks for giving your time in reading it.

Comment Down Freely What You Think About this Post
EmoticonEmoticon