How to Add Blogger Contact Form for Blogger Easily

Most of bloggers are using custom blogger contact form. For that they used third party site to get work done. It is bit complex work for beginners. Blogger launched new blogger contact form. So, this official blogger contact form and they provide stranded User interface your this new blogger widget. Therefore we have to apply new css style to make it looks nice.

Blogger contact form is very important because every visitors can contact administrator easily.So, you don't want to share your main email address directly with your blog.

Why you should use a blogger contact form

1. This is the best widget for away from third party blogger contact forms.
2. This widget  developed by blogger and you can trust them than third party blogger contact us forms
3. Blogger Contact us form helps to contact administrator of the blog for some questions,Some business through this. So, this is very excellent way to get connected.
4. Blogger administrator get message immediately to his inbox.
5.If your blog provide some services, visitors can request service or information thought this blogger contact form.

How to add blogger Contact Form for Blogger widget

Before adding this blogger contact form widget. you have to activate it and apply on slidebar

1. Go to blogger.com and sign in first
2. In blogger Dashboard Click Layout on Left side bar
3. Click on ad Add Gadget (any add gadget where you want to add) and select Contact Us From 

4. Now you can save it.

For now, you are successfully added contact form for blogger. Now you need to style your blogger contact form.

How to Add styles to Contact Form For Blogger

1. In Blogger Dashboard Click on Template
2. Now click on Edit HTML and Search  ]]></b:skin>  By (Ctrl + F)
3. Now Paste below code before ]]></b:skin>

/* Contact Form Container  www.bloggertrix.com*/
.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 www.bloggertrix.com */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

4: Now Save your template. You are successfully done for now.

Your Blogger contact form looks like below

How To Add Contact Form for Blogger Static Pages

You can add this blogger contact form to static page in blogger.This is easy to add to blogger and you can make it as a contact form page. follow these guideline.

1. In Blogger Dashboard Click on Template
2. Now click on Edit HTML and Search  id="ContactForm"  By (Ctrl + F)

3. Now you can see a code like below.

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <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>
  </b:widget>

4. Now just remove the code which i mention with red color
5. Click Save Template button and save your template
6. Now click Pages on blogger dashboard and Click New Page and create a new page
7. Now switch in to HTML composer on left and paste below code.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<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="" />
        <br />
E-mail *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        <br />
Message *<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>
</div>

8. Now publish your page and you are done.

If you want, you can copy this page link and connect with your Menu bar, Then users easy to get connect with this blogger contact form

This message will send to email address which you registered with blogger. If you have any request ion regarding to this add blogger contact form for blogger