How To Add Contact Form for Blogger Static Page with jQuery

Google released Contact form for Blogger. and that i received several requests to create a contact form for Blogger on Static page instead widget, as a result of widget is on side bar and it’s not polite to contact or not friendly with guests who typically contact us from a stand alone page.

Now, I even have a workaround answer can assist you show contact type for Blogger on static page with jQuery.

Adding Contact Form for Blogger Static Page with jQuery

• Go to Blogger > Template > Click Edit HTML.
• Find the tag </head> and insert before it with the below line:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Add CSS and Javascript

• Go to Blogger > Template > Click Edit HTML.
• Find ]]></b:skin> ( by Ctrl+F) and add below code.

.ContactForm {
 display: none;
}
.blogger-heroe-contact .ContactForm {
 display: block;
}
.widget.ContactForm .title {
 display: none;
}
.widget.ContactForm * {
 max-width: 100%;
}

• Next, please copy and paste the below code before </body> tag:

<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.blogger-heroe-contact');
//]]>
</script>

• Save template.

Place below shortcode at any where you want to display contact form:

 <div class="blogger-heroe-contact"></div>

• And your done.
• If you have got any problem regarding this tutorial, don't hesitate to comment it below.

Share it Please

Tweet