Monday, 29 July 2013

Part 2: How to Customize & Edit Blogger Contact Form


Recently i posted a article on this topic (Part 1: How to Customize & Edit Blogger Contact Form). Now Lets forward to part 2 article :

3. Customizing The Contact Form - The Fun Part!

Now you will need to create a Static Page where we will add the HTML code for our new contact form.
  1. Go To the blogger > Pages
  2. Choose Blank Page
  3. Give it any title you like. I recommend "Contact Us"
  4. Switch to its HTML mode and paste the following HTML code inside it:
<div class='form'>
<!-- Custom Contact Form By FOSTIPS.Blogspot.com Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- Custom Contact Form By Fostips.blogspot.com Ends -->
</div>
    5.  Don't switch to the Compose Mode of your Blogger Editor else the code will get messed up due to your Editor settings. Save and Publish your Page.
   Now if you visit your contact page you will see the default contact form with blue button. Its time to customize its default styles.
Customizing to The Form:
  1. Go To the Blogger > Template
  2. Backup your Template
  3. Click "Edit HTML"
  4. Update: Search for </head>  and just above it paste the following CSS code:
<style>
/*---- Compatible contact Form by FOSTIPS.blogspot.com -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
     
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8N7u5GkKBflZACs3z802wbbk8F5V8q1Ob-LLW1WW9v1L9Zoqq1PThuBLgfcZegfhurj7N83nM3JWP0jAYghIYDMz2vN3cJq4d7ASt9Qn0FcrL7vBqm6Pu2olIqlFTJ20sDnJW85wjYkY/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
     
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpxvf-MvOQTKGcf1Ze_9wNfeenLVPY8_K3AubVqgSPPYa-GxGwp6-fsvZEJAhxiodHD8HWaJZlAQnlCQkjzMxNud003Z-4c_h0AVZ6C9NfcVGoSKrrViatwFziaIRZbS-jvWPihxBRh0/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>

      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8N7u5GkKBflZACs3z802wbbk8F5V8q1Ob-LLW1WW9v1L9Zoqq1PThuBLgfcZegfhurj7N83nM3JWP0jAYghIYDMz2vN3cJq4d7ASt9Qn0FcrL7vBqm6Pu2olIqlFTJ20sDnJW85wjYkY/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpxvf-MvOQTKGcf1Ze_9wNfeenLVPY8_K3AubVqgSPPYa-GxGwp6-fsvZEJAhxiodHD8HWaJZlAQnlCQkjzMxNud003Z-4c_h0AVZ6C9NfcVGoSKrrViatwFziaIRZbS-jvWPihxBRh0/s320/email.png) no-repeat 7px 6px;
}
    </style>
    <![endif]-->
   
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8N7u5GkKBflZACs3z802wbbk8F5V8q1Ob-LLW1WW9v1L9Zoqq1PThuBLgfcZegfhurj7N83nM3JWP0jAYghIYDMz2vN3cJq4d7ASt9Qn0FcrL7vBqm6Pu2olIqlFTJ20sDnJW85wjYkY/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpxvf-MvOQTKGcf1Ze_9wNfeenLVPY8_K3AubVqgSPPYa-GxGwp6-fsvZEJAhxiodHD8HWaJZlAQnlCQkjzMxNud003Z-4c_h0AVZ6C9NfcVGoSKrrViatwFziaIRZbS-jvWPihxBRh0/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;
}
}
</style>
The above of the Stylesheet will work just fine with all browsers including Internet Explorer. The code has been made compatible to work fine with all major browsers like IE, Mozilla and Webkit browsers.

     5.  Save your template and you done!

4. Add the Form anywhere you like!!!

Now if you wish to add the form to your sidebar or post  then simply follow these steps:
  • To add the form to sidebar. Copy the HTML code in the Step#4   and paste it inside HTML/JavaScript Widget
  • To add the form to Post editor, switch to HTML mode and paste the code in Step#4  inside it

Share your thoughts on the comment box !

Post Your Comment !

  • Post Your Comment and for notifications, Click on 'Subscribe by Email' link below the comment form
  • All Comments are Moderated and Answered within 12 to 24 hours
  • SPAM = Trash

0 Responses to “Part 2: How to Customize & Edit Blogger Contact Form”

Post a Comment

Subscribe to: Post Comments (Atom)