Slide Up and Down Style Blogger Official contact form for Blogger

Slide Up and Down Style Blogger Official contact form for Blogger

Comments: 0
Default contact form

Hi We know Google's one of the best release is their official contact form. But still this contact form hasn't option to directly place into blog static page. For this reason you have to take help with some CSS trick. Due to lack of space on your blog home page many blogger doesn't like to pace Google official contact form rather they are depending in third party contact form. So I have created a CSS code that you can place your contact form like floating style on your blog home page. It will display just like a Button Contact at the bottom right corner of your blog template. And when anybody click on contact button then the contact form will slide up. After writing and submitting the email it will slide down again if any visitors click on contact button. Its sounds like interesting. So let's proceed to install Blogger Official contact form with awesome trick.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>

/* Slide Up and Down Style Form by*/
.ContactForm, .ContactForm .title {
 display: none;
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
.BloggerSpiceFC-head a {
 padding: 5px 10px;
 background: #04BDFA;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
.BloggerSpiceFC-body {
 height: 285px;
 background: white;
 border: 5px solid #04BDFA;
 padding: 10px;
 display: none;
.BloggerSpiceFC-head {
 text-align: right;
.BloggerSpiceFC-body .ContactForm {
 margin: 0;
 display: block!important;

Step 5 Now Find this code </body> by pressing Ctrl + F

Step 6 Copy the code from below and Paste it  Before/above </body>

<script type='text/javascript'>
/* Slide Up and Down Style Form by*/
$('body').append('<div class="BloggerSpiceFC"><div class="BloggerSpiceFC-head"><a href="#no-move">Contact</a></div><div class="BloggerSpiceFC-body"></div></div>');
var slide_up_ct = false;
$('.BloggerSpiceFC-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 } else {
 slide_up_ct = false;

Step 7 Now simply hit the save button.

If you face any problem just feel free to contact me or leave a comment below. 

Related Post

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *