New Way To Add Beautiful Contact Us Form Page In Blogger Using Mobile Phone Or PC

Are you a blogger and has not added contact us page in your blog? It is a very good thing for a dedicated blogger to have this feature in his/her blog because it is through this medium, users will be able to communicate easily with the blog administrator concerning any issue, suggestions or bugs found in the website for proper fix or help depending on the particular services you provide for your audience on your blog.

Some bloggers loved to find third party websites to provide this feature for them E.g foxyform, jotform, 123contactform E.t.c so today, you will be able to add it in your blog easily and in a very simple and understandable way.


It delivers very fast, the simple interface will allow users to make use of it everyday, the entire page will not get reloaded for sending the message, it is very easy and simple.

How to add contact us form page in blogger

Follow these steps below and get it added Instantly;

STEP 1: Just open your Blogger>>Layout>>Add Gadget and then click on MORE GADGETS at the left side then click on CONTACT FORM and Save it. As shown below;

STEP 2: After that, then click on Template>>Edit HTML then look for <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> hmmm it will be at nearly the bottom of your codes, if you are using PC just press ctrl f and paste it, immediately it will be shown then click the three dots and it will open so the code will be like this below;

Just delete the ones in yellow color below;

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

So you will be left with;

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

Then click on SAVE TEMPLATE.


STEP 3: So after that, just go to Template>>Customize>>Advanced>>Add CSS and paste this code below;

/*CUSTOM CONTACT FORM BY BLAZERWAP.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;
}

As shown below;

Then Click on SAVE.

STEP 4: So after that, you can now click on PAGES>>NEW PAGES then use HTML and paste this code below in the big box. As shown below;

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

As shown below;

So after that, then click on SAVE. Then you can now view it and immediately, you have successfully added a contact us page to your blogger. As shown below;

Source