How To Add a Contact Form on google Blogger

On the Website or Blogger have a contact page is highly important one. It is how visitors, brands, and companies can reach you and it’s something that every blogger should have. If sharing your email address on your blog is not your cup of tea, a contact form can serve as an easy way for others to get in touch.

Adding a Contact Form to Blogger

Step 1: 
         Go to the Layout page in Blogger and click an Add a Gadget link. From the popup, choose More Gadgets in the sidebar and then select Contact Form and add it. It doesn’t matter where it ends up in your sidebar right now, since we are going to modify that and make it look nice what you like!

Step 2: Now, go to Customize > Edit HTML page.

Click inside of the editor textarea and press CTRL+F  and in the search bar type ContactForm then hit enter.

It should find the code below. Click the black down arrow to the left of:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

then click the down arrow again beside:

<b:includable id='main'>

if they are not already open.

Step 3. You will see this code:

<b:includable id='main'>

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

</b:includable>

Delete everything shown in red so you should just be left with:

<b:includable id='main'></b:includable>

Step 4. Do a new search, this time looking for ]]></b:skin> and pasting this code directly before it:

/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */

.contact-form-widget {

margin-left:auto;

margin-right:auto;

width: 600px;

max-width: 100%;

padding: 0px;

color: #000;

}

.fm_name, .fm_email {

float:left;

padding:5px;

width:48%

}

.fm_message {

padding:5px;

}

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

width: 100%;

max-width: 100%;

margin-bottom: 10px;

height:40px;

padding:10px;

font-size:16px;

}

.contact-form-email-message {

width:100%;

max-width: 100%;

height:100px;

margin-bottom:10px;

padding:10px;

font-size:16px;

}

.contact-form-button-submit {

border-color: #C1C1C1;

background: #E3E3E3;

color: #585858;

width: 20%;

max-width: 20%;

margin-bottom: 10px;

height:30px;

font-size:16px;

}

.contact-form-button-submit:hover{

background: #ffffff;

color: #000000;

border: 1px solid #FAFAFA;

}

Step 5. Save the template then go to Pages to create a new Contact page if you haven’t got one already. In the page editor, switch to HTML mode and paste the following:

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

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

<div class="form">

<form name="contact-form">

<div class="fm_name">

Your Name:

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>

<div class="fm_email">

E-mail Address *:

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>

<div style="clear:both">

</div>

<div class="fm_message">

Message *:

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

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

</div>

</form>

</div>

</div>

</div>

6. Save your page and view your new contact form.