How to add blogger contact form to blogger static page using CSS

I

n older posts, i posted a post about how to add blogger contact form to blogger static page using CSS. if you are new here then also check it out. so, today i found another tricks to add contact form to static page using simple and short jQuery. Main advantage of jquery than CSS is it allow you to place contact form anywhere you want, like: post, pages, sidebar etc. and this simple and easy method to add contact form to static page. read below full tutorial to know further.

Step :-1 Add JQuery plugin to your blog’s HTML

This widget will work based on jQuery, then your blog must have jQuery plugin. remember : ignore this step, if your blog have already jQuery plugin

• Go to blogger –> Template –> Edit HTML
• CTRL + F to find </head> tag
• Copy and paste below code just above/before </head> in your blogs HTML

• Next, Read my blog post to know how to add contact form to blog.

Step :-2 Add CSS and jQuery

• Go to blogger dashboard –> Template –> Edit HTML
• CTRL + F to find ]]></b:skin> tag
• Copy and paste below code CSS code just above/before ]]></b:skin>

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

• Next, Search for </body> tag
• Copy and paste below code just above/before </body>

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

• Now, save your template.

Step:- 3 Add Short code of Contact form widget

• Now, you can add below short code anywhere you want to show contact form in your blog. 

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

Let’s add it to Static page ..

• In your blogger dashboard, Click “Pages” from the menu
• Now click on new page and choose “Blank Page”

• In post editor, switch to HTML mode and paste above code and publish it.

• That’s it, now see the result 

Credit :
This tip is already published in BloggerItems.com, i just Re-shared it here. all credits going to Tien Nguyen founder of ( Blogger Items ). many thanks him for written this awesome tip & jQuery.