JQuery Advance Contact Form For Blogger

Advance jQuery Contact Form

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

CODE

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

You May Like: How To Add Seperate Contact Page In Blogger

Add CSS and Javascript

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

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.