Blogger Ever

Change your boring Blogger contact form into a sticky sliding contact form

After this tutorial your contact form will be developed in an amazingly cool sticky sliding contact form.
Sticky blogger contact form

Customization and all those tutorial which were shared related to Blogger contact form widgets were different from this because this will not add-up anything in contact form instead contact form will appear as more useful tool for this. You can integrate any customization code (CSS) with this, it will not affect the working of contact form. Lets begin:
Check out the demo, how exactly it will looks like.
See the Pen oEFkn by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Please do not send any message through that contact form in above pen.

Well, to make it you need jQuery. Go to Blogger > Template > Edit HTML.

If you do not have jQuery paste the following code below <head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
Now paste the following code just above //]]></b:skin>
.ContactForm {
    position:absolute;
    bottom:0;
    left:0;
}
.ContactForm h2 {
    font:500 20px sans-serif;
    color:#222;
    margin:0;
}
.contact-button {
    padding:10px;
    background:#222;
    color:#fff;
    display:inline-block;
    font:400 15px sans-serif;
    text-transform:uppercase;
    cursor:pointer;
    letter-spacing:1px;
}
.contact-inner {
    display:none;
    background:#eee;
    box-shadow:0 0 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.2);
    padding:15px;
}
Paste the following jQuery code just above </head>
<script>
$(function(){
    $('.contact-button').click(function(){
        $('.contact-inner').slideToggle(400);
    });
});
</script> 
 Now there is something complicated, you need to replace the contact form widget code with my own code. First go to layout and add contact form widget and save layout.
  • Then again go to Blogger > Template > Edit HTML
  • Click on Jump to Widget
  • Click ContactForm1
  • Now you have to merge the code like this:

Select the code like the above picture and paste the following code:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
<span class='contact-button'>Contact Us</span>
 <div class='contact-inner'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
    <span class='contact-email'><a href='mailto:[email protected]' target='_blank'>[email protected]</a></span>
  </div>
      </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Save the template and check the effect. If their is something not working find contact form or comment below.

Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.