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-->Find ]]></b:skin> and paste the following code just above it:
<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 != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<!--Blogger Ever Popup Contact Form Code Ends-->
.mask,.contact-popup{Now if you do not have jQuery then add the following line after <head>
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;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>Now add the following code just before </head>
<script type='text/javascript'>Save the template.
//<![CDATA[
$(function(){
$('.contact-trigger').click(function(){
$('.mask,.contact-popup').addClass('active');
});
$('span.closepopup').click(function(){
$('.mask,.contact-popup').removeClass('active');
});
});
//]]></script>
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.
Post A Comment:
0 comments: