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.
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 {Paste the following jQuery code just above </head>
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;
}
<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.
$(function(){
$('.contact-button').click(function(){
$('.contact-inner').slideToggle(400);
});
});
</script>
- 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'>Save the template and check the effect. If their is something not working find contact form or comment below.
<b:includable id='main'>
<span class='contact-button'>Contact Us</span>
<div class='contact-inner'>
<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>
<span class='contact-email'><a href='mailto:contactus@bloggerever.com' target='_blank'>contactus@bloggerever.com</a></span>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Post A Comment:
0 comments: