Blogging Tips

Free contact form for Blogger – Add Stylish Page 2020

Free contact form for Blogger

Free contact form for Blogger
Free contact form for Blogger

If you are a blogger and you are using a blogger as a hosting, then you should have a Free contact form for Blogger for AdSense approval.

For a reason should this that contact us page creation is not an easy process, You should give some effort to create contact us page.

If you are a blogger and your hosting is from blogger.com, then you should have a contact us page in your site for contacting you.

But, it is not easy to create a contact us page for blogger.


I know you are searching for a different site for contact us page creation. But, you have failed to find it. To create a touch us page you should follow some rules.

You may need Do Follow back link.

Follow the procedure to create a best responsive contact us page.

Step -1 :

Add a new widget into the blogger. Like the image below. Follow the Gallery to create a contact us page.

Code-1

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

Code-2

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

Youtube tutorial for Free contact form for Blogger

                                         

Final Thoughts

So, Finally you can create a contact us page for blogger. If you can not create the comment us.

Leave a Comment