Instagram Widget

How to add a free Contact form Page in Blogger/Blogspot Website or Blog with Pictures

Contact Us page is one of the most basic pages every website or blog should have. In this post we will see How to add a free Contact form Page in Blogger/Blogspot Website or Blog with Pictures.

  • Go to blogger dashboard

  • Select the blog -> Go to Layout

  •        Click on Add Gadget from your sidebar

  •        Select Contact form from the list 

  •        Tick the checkbox “show this widget” then the contact form will not work.

  •    Now we will hide Contact Form from sidebar

  •        From Right side blogger menu select Themes

  •        Click Customize à Click Edit HTML

  •        Search for ]]></b:skin>

  •        Paste below code just above it.

div#ContactForm1{display: none !important;}

  •         Click Save

  •      Go to Blogger’s Pages menu item

  •     Add a new Page

  •       Fill out details
  •       From Left select HTML view

  •       Paste below code.

<style> .page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;} .page-contact-form {padding: 10px;background: #ea6337; color: #fff;border: none;} .page-contact-form {background: #d85b32;color: #fff;} </style> <div class="contact-form-widget page-contact-form"> <div class="form"> <form name="contact-form"> Name:<br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> E-mail: <span id="required">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Message: <span id="required">*</span><br /> <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> </form> </div> </div>

  •     Click Save

Congratulations, Now you will be able to see the Contact page.

Post a Comment