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=""></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'>
  • 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.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!


  1. Tharun Raj says:

    nice post brother

  2. Zulqarnain Khan says:

    awesome one but adrain please post a beautiful one having better effects i really cant find them

Speak Your Mind