Blogger Ever

Change you normal Blogger contact form into a popup menu

Blogger contact form popup menu is popular is Premium Blogger templates. Since no one easily share these ways, therefore I'm chose to share this.

A few days before I received an email to share this post. So I've decided finally go for it. I've already shared many tutorials related to Blogger contact form, to which reader gave me a very positive response so I've decided to share more about this widget.

Basically this popup works when someone click a button and in response the contact form appears. A close button will close this popup. This helps in ease-of-contact.

Step 1: Remove Contact Form

If you have added contact form before then follow this step else leave this step.
  • Go to Blogger > Layout,
  • click Edit on Contact Form Widget
  • and click remove.

Step 2: Add Code

  • Go to Blogger > Template > Edit HTML
  • press Ctrl+F,
  • find <body>
  • and paste the following code just below it.
<!--Blogger Ever Popup Contact Form Code Starts-->
<div class='mask'/>
<b:section class='contact-popup' id='contact-popup' maxwidgets='1'>
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<span class='closepopup'>X</span>
<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>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<!--Blogger Ever Popup Contact Form Code Ends-->
Find ]]></b:skin> and paste the following code just above it:
 .mask,.contact-popup{
transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
display:none;
}
.mask.active{
display:block;
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
z-index:1;
}
.contact-popup.active{
display:block;
width:200px;
position:fixed;
top:20%;
left:50%;
margin-left:-100px;
z-index:2;
}
#ContactForm1{
background:#fff;
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
position:relative;
padding:10px;
max-width:auto;
min-width:auto;
}
span.closepopup{
position:absolute;
right:-10px;
top:-10px;
width:20px;
height:20px;
display:block;
border-radius:50%;
background:#00bfff;
color:#fff;
font-size:20px;
padding:10px;
cursor:pointer;
}
.contact-trigger{
cursor:pointer;
display:inline-block;
margib:5px;
padding:10 15px;
background:#00bfff;
color:#fff;
}
Now if you do not have jQuery then add the following line after <head>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Now add the following code just before </head>
<script type='text/javascript'>
        //<![CDATA[
  $(function(){
       $('.contact-trigger').click(function(){
$('.mask,.contact-popup').addClass('active');
       });
       $('span.closepopup').click(function(){
$('.mask,.contact-popup').removeClass('active');
       });
});
//]]></script>
Save the template.

Step 3 : Add Trigger 

Go to Blogger > Layout and where ever you want to put the trigger button click add widget > HTML/Javascript and put the following code their.
<div class='contact-trigger'>Contact Us</div>
Save layout and try. If you find any problem comment or contact me.
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.