How To Add Contact Us/Feedback Page/Form To Your Blogspot/Website

Hello guys! This is Manish Jain. I have finished my graduation in BCA. This is my webiste which I have created to share my views and ideas on the use of technology and smartphones. You can checkout more stuffs related to this on my website http://www.trickbuff.com/.

Now im going to show you how to add a contact us or feedback page to your blogspot or website.
Contact us form help us to get feedback from the visitors who visit our sites it helps in giving some suggestion and also some motivation through good comments.........

Steps To Add Contact Us Page To Blogspot/Website :

1.Login to your blogger.com

2.Go to blogger dashboard and from there select layout

3.In layouts click on add a gadget and go to more gadgets and select contact form

4.After adding contact form go to templates and click on edit html

Note : Before editing html save your template by backing up....

5.In edit html press ctrl+f and search for ]]></b:skin> and paste the below code above it

/* Contact Form Container */

.contact-form-widget {

width: 500px;

max-width: 100%;

margin: 0 auto;

padding: 10px;

background: #F8F8F8;

color: #000;

border: 1px solid #C1C1C1;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);

border-radius: 10px;

}

/* Fields and submit button */

.contact-form-name, .contact-form-email, .contact-form-email-message {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

}

/* Submit button style */

.contact-form-button-submit {

border-color: #C1C1C1;

background: #E3E3E3;

color: #585858;

width: 20%;

max-width: 20%;

margin-bottom: 10px;

}

/* Submit button on mouseover */

.contact-form-button-submit:hover{

background: #4C8EF9;

color: #ffffff;

border: 1px solid #FAFAFA;

}

6.This step is to hide the contact form gadget which you added at the 3rd step now search for contactform  and expand the highlighted line by clicking the black arrow and again expand the sub part of contact form and remove the below code

 <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>

        <p/>

        <data:contactFormNameMsg/>

        <br/>

        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>

        <p/>

        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>

        <p/>

        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>

        <p/>

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>

        <p/>

        <div style='text-align: center; max-width: 222px; width: 100%'>

          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>

          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>

        </div>

      </form>

    </div>

  </div>

  <b:include name='quickedit'/>

7.Save the template

8.After saving the template go to pages and create a new blank page

9.In that select HTML from left corner and paste the below code in that page

<div class='widget ContactForm' id='ContactForm1'>

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

10. That's it your done now emails will be sent to your blogger id.........enjoy...................