How to Add A customised Offical blogger contact Form To your Blogger Contact Page

Recently,the blogger team lauched their official blogger contact page which enables blog visitors/readers to contact the blog admin for any enquiry.While many applauded the new development,many also did not because of some of its short commings which restrict the blogger official contact form to been placed only on a blog’s sidebar or footer.What this means is the offical blogger contact page cannot be placed on a stand alone contact page except on a sidebar,footer and possibly other widget area.

If you would like to have a more profession contact page placed on a standalone contact page,then this hack to the official blogger contact page would e beneficial to you.

Just follow the few steps below on how to place the blogger contact form on a contact page.

 

How to Install the Contact Form

First you would have to install the offiial blogger  cintact.Kindly follow the simple guide below to install the new blogger contact form to your blog.

  • Visit blogger.com and sign in
  • While on the dashboard
  • Click on “More options”
  • Click on “Layout”
  • Click “Add a gadget”, a window pops up
  • Click on the “More Gadgets” tab on the left
  • Click on Contact Form and Save

Add The Blogger Static Contact Page

After you add the contact form,then proceed to add a static contact page to your blog

sign into Blogger > Dashborad

Click on Drop Down Menu and select Pages

Click on New Page

Select Blank Page

Click on Html instead of compose

And add  the following code

<div class=’form’>

<!– Custom Contact Form By ebimablog 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=’WG-btnLogin’ type=’reset’ value=’Clear’/>

<!– Send Button –>

<input class=’WG-btnLogin’ 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 ebimablog Ends –>

</div>

Then finally publish your static contact page

 Customize Contact Form in New Look

To finally customise your blogger contact page,

Sign in to your blogger dashboard

Go to template editor,

Backup your template  before making any changes to your blog in case of any occurence

Press Ctrl + F  to search for  the below line of  code

]]></b:skin>

Then paste the below code  just before the above code

#ContactForm1
{
display: none ! important;
}

Now Search for </head> Paste below code just before </head>

<b:if cond=’data:blog.pageType == “static_page”‘>

<style>

#ContactForm1{ display:none!important;}

</style>

</b:if>

<style>

/*—- Compatible contact Form by WG —–*/

.contact-form-name, .contact-form-email, .contact-form-email-message {

max-width: 220px;

width: 100%;

font-weight:bold;

}

.contact-form-name {

background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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;

}

.WG-btnLogin

{

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:15px;

background:#a1d8f0;

background:-moz-linear-gradient(top, #badff3, #7acbed);

background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#badff3′, EndColorStr=’#7acbed’)”;

border:1px solid #7db0cc !important;

cursor: pointer;

padding:11px 16px;

font:bold 11px/14px Verdana, Tahomma, Geneva;

text-shadow:rgba(0,0,0,0.2) 0 1px 0px;

color:#fff;

-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

margin-center:12px;

float:center;

padding:7px 21px;

}

.WG-btnLogin:hover,

.btnLogin:focus,

.btnLogin:active{

background:#a1d8f0;

background:-moz-linear-gradient(top, #7acbed, #badff3);

background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#7acbed’, EndColorStr=’#badff3′)”;

}

.WG-btnLogin:active

{

text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;

}

</style>

<!–[if IE 9]>

<style>

.contact-form-name {

background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px;

}

.contact-form-email {

background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px;

padding: 15px 15px 15px 28px;

}

.contact-form-email {

background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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>

Preview and then save your template if there is no error  and enjoy a nice looking blogger contact form

If you find this topic a bit useful, consider sharing with your friends on facebook, and other social media or better still leave a comment below

Leave a Reply

Your email address will not be published. Required fields are marked *