Having this feature in your blog is a way for your blog users to reach you directly.
Using the contact form is a much reliable way for your users to communicate with you.
Some may not be able to freely express their views in the comment section of your blog, that is why
the contact form is so important.
In this tutorial, am going to show you how to add contact form gadget to your blogger blog. Just follow the following instructions correctly and you'll be able to add this feature to your blogger blog.
Step 1
Login to your blogger dashboard
Step 2
Select Layout and click on “Add a Gadget” on where best you want to place the contact form.
Step 3
Now from the top-left side of the window, click “More Gadgets” immediately under “Basics”.
Step 4
Now click on “Contact Form”
Now you have successfully added the contact form gadget to your blog, but we shall hide it so that it only shows up in static page, like Contact Us page. Now carefully follow the steps below to hide the contact form gadget.
Step 1
Go to Theme/Template
Step 2
Select “Edit HTML”
Step 3
Now inside the template box, search for (ctrl + f) this code
]]></b:skin>
Step 4
Now add the following code before the ]]></b:skin> code
#ContactForm1{display: none !important;}
Step 5
Save Template
Having done that, we'll now have to create the Contact Us page to display the Contact Form
Related: How to add Customized Search box to blogger
Step 1
Select Pages and Click on “New page” at the top of the window
Step 2
Now put in the name of the page in the title box for example “Contact Us”
Step 3
After writing the page title, click on “HTML” at the top left window and clear the few codes in the box. Now paste the following codes in the box
<style type="text/css">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-
left:auto;margin-right:auto;width:600px;max-
width:100%;padding:25px 0;background:#EBEBE3;-webkit-
border-radius:2%;-moz-border-radius:2%;border-
radius:2%}.contact-form-widget .form{width:91%;margin:0
auto}.ribbon{font:16px Arial;text-transform:capitalize;text-
shadow:0 1px 2px rgba
(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-
align:center;padding:1em 2em;margin:0
-16px}.ribbon:before,.ribbon:after
{content:"";position:absolute;display:block;bottom:-1em;border:1.5em
solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-
right-width:1.2em;border-left-color:transparent}.ribbon:after
{right:-1.7em;border-left-width:1.2em;border-right-
color:transparent}.ribbon .ribbon-content:before,.ribbon
.ribbon-content:after
{content:"";position:absolute;display:block;border-
style:solid;border-color:#42362A transparent
transparent;bottom:-1em}.ribbon .ribbon-content:before
{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after
{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-
email,.contactf-message{text-align:left;margin-
top:25px;color:#a1937b;font-size:13px}.contactf-
name,.contactf-email{float:left;width:100%}.contact-form-
name,.contact-form-email,.contact-form-email-message,.contact-
form-name:hover,.contact-form-name:focus,.contact-form-
email:hover,.contact-form-email:focus,.contact-form-email-
message:hover,.contact-form-email-message:focus
{width:100%;max-width:100%;margin:10px 0
0;padding:10px;font-size:12px;color:#aaa;border-
color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-
border-radius:5px;-moz-border-radius:5px;border-
radius:5px}.contact-form-name,.contact-form-email
{height:35px}.contact-form-email-message
{height:100px}.contact-form-button-submit,.contact-form-
button-submit:hover{margin-
top:25px;width:100%;height:37px;font:normal 12px
Arial;outline:none;letter-spacing:1px;color:#fff;text-
align:center;cursor:pointer;text-shadow:1px 1px 0
#ffe8b2;color:#7c5d1b;border:1px solid
#d6a437;background:#febd4b;background:-webkit-gradient
(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-
webkit-linear-gradient(#fed970,#febd4b);background:-moz-
linear-gradient(#fed970,#febd4b);background:-ms-linear-
gradient(#fed970,#febd4b);background:-o-linear-gradient
(#fed970,#febd4b);background:linear-gradient
(#fed970,#febd4b);-pie-background:linear-gradient
(#fed970,#febd4b)}.contact-form-button-submit:active
{color:#7c5d1b;border:1px solid
#d6a437;background:#febd4b;background:-webkit-gradient
(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-
webkit-linear-gradient(#febd4b,#fed970);background:-moz-
linear-gradient(#febd4b,#fed970);background:-ms-linear-
gradient(#febd4b,#fed970);background:-o-linear-gradient
(#febd4b,#fed970);background:linear-gradient
(#febd4b,#fed970);-pie-background:linear-gradient
(#febd4b,#fed970)}.contact-form-cross{border:medium none!
important;box-shadow:none!important;padding:0!important}
</style>
<div class="widget ContactForm" id="ContactForm1"><div
class="contact-form-widget"><h2 class="ribbon"><strong
class="ribbon-content">Send Me a Message Here</strong></h2><div
class="form"><form name="contact-form"><div
class="contactf-name">Your name:<input class="contact-form-
name" id="ContactForm1_contact-form-name" name="name"
size="30" type="text" value="Name" onblur='if (this.value ==
"") {this.value = "Name";}' onfocus='if (this.value == "Name")
{this.value = "";}' /></div><div class="contactf-email">E-mail
address *:<input class="contact-form-email"
id="ContactForm1_contact-form-email" name="email"
size="30" type="text" value="E-mail address" onblur='if
(this.value == "") {this.value = "E-mail address";}' onfocus='if
(this.value == "E-mail address") {this.value = "";}'/></div><div
style="clear:both"></div><div class="contactf-
message">Message *:<textarea class="contact-form-email-
message" cols="25" id="ContactForm1_contact-form-email-
message" name="email-message" rows="5" value=""
placeholder="Type your message here..."></textarea><input
class="contact-form-button contact-form-button-submit"
id="ContactForm1_contact-form-submit" type="button"
value="SEND MESSAGE" /><div class="contact-form-error-
message" id="ContactForm1_contact-form-error-message"></
div><div class="contact-form-success-message"
id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>
Step 4
Now under “Options” menu at the top-right side of the window, change the Reader Comments to “Don't Allow” and click “Done”
Step 5
Finally, click on “Publish” to make your page go Live.
Now you have successfully added a contact form Gadget to your blogger blog.
Please visit for other awesome tutorials
0 Comments