How To Add a Contact Form on a Blogger Page

Hey friend’s welcome to veewom ,in this article i will teach you how to add contact form on a blogger page ,so first of all directly is not possible to add contact form to blogger page so please first watch below video and follow all step.

Watch a Video

Now, visit your Customize > Edit HTML page,Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type ]]> and pasting this code directly before it.


.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;
}

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>

We hope this article helped you learn how to easily add contact form on blogger page. You may also want to see – How To Change The Default WordPress Email Address.

If you liked this article, then please share to social networking site. You can also find us on Twitter,Facebook and Instagram.

Share Share on Facebook Share on Twitter Share on Google+ Share on LinkedIn Pin on Pinterest Share on Stumbleupon Share on Tumblr Share on Reddit Share on Diggit

Bharat Makwana is a Founder of Veewom. He is Content creator and Web Developer from past three years. He loves to read and get in touch with the latest technology, he also have YouTube Channel ” Veewom ” ,for more info contact - bharat@veewom.com.