Fancy Blogger Contact Form

Adding a Blogger contact form is very crucial to your blog.  It has a professional look and it also allows readers, advertisers, etc a great way to contact you.  It is far better than creating a page and adding your email address, such as Contact me  email@gmaildotcom.

Why add a Contact form to your blog?

• Your messages are delivered directly to your blog's email.
• This form is developed by Blogger, therefore there is no need to go elsewhere
• Your readers might want to contact you to ask a question.
• Brands, advertisers will find your blog  more professional, therefore a great way to contact the blog owners, who wish to monetize their blogs.

Blogger offers a contact form for your blog in the  gadgets. To find it, click More gadgets. Once you add the gadget to your blog, then I am sharing a code you can add directly to a Contact page to customize the typical Blogger Contact code.
ADDING A BLOGGER CONTACT FORM
The first thing to do, is to add a Gadget.  Go to the section where it says More Gadgets and choose Contact form. 

 After you add the Contact form gadget, save it in your footer or somewhere out of the way.
Now, create a new page and name it Contact. Now, on that page, edit it in HTML.

Copy and paste this code in your HTML section of your page. Click preview and then save.

<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:#f2f2f2;-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:#000000;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:#000000;font-size:15px}.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:15px;color:#404040;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 15px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #;color:#ffffff;border:1px solid #ffffff;background:#404040;background:-webkit-gradient(linear,0 0,0 100%,from() to(#404040));background:-webkit-linear-gradient(#404040);background:-moz-linear-gradient();background:-ms-linear-gradient();background:-o-linear-gradient();background:linear-gradient(#404040);-pie-background:linear-gradient()}.contact-form-button-submit:active{color:#ffffff;border:1px solid #ffffff;background:#404040;background:-webkit-gradient(linear,0 0,0 100%,from() to());background:-webkit-linear-gradient(#404040);background:-moz-linear-gradient(#404040);background:-ms-linear-gradient(#404040);background:-o-linear-gradient(#404040);background:linear-gradient(#404040);-pie-background:linear-gradient(#404040)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important} .b-social-buttons{list-style-type:none;text-align:center;} .b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;} .b-social-buttons li a{color:#333;text-decoration:none;}
</style>
<br /> <div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <h2 class="ribbon"> <b class="ribbon-content">Drop Me an Email</b></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" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /></div> <div class="contactf-email"> E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" /></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" placeholder="Type your message here..." rows="5" value=""></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><br /> <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>

 Below is how the contact me page will look.  To change the color, look for #f2f2f2, that is highlighted in yellow.  Change that color to whatever color code you would like to match your blog. If you feel adventurous, change the Drop me An Email.  Just look for the highlighted Drop Me An Email in the coding.

Have fun giving your blog a great new contact form, that is actually quite attractive.

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.