Fancy Blogger Contact Form | Life and Linda

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.
Share on Google Plus

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.
    Your comments are welcome!

8 comments:

  1. Thank you for the advice. I may try this when I have more time to play around on here.

    ReplyDelete
    Replies
    1. I hope you do Carol. It is a great addition.

      Delete
  2. Thank you Linda! This is a great addition. I am going to give it a try in the morning.
    You are the best!
    XO
    Jemma

    ReplyDelete
  3. Hi Linda,
    thank you for me remembering to do this ;O)
    Wishing you a wonderful wek, my dear friend,
    sending Love and hugs and blessings,
    Claudia xo

    ReplyDelete
  4. Thanks for sharing your blog tips with us Linda.
    Have a great day.
    Julie

    ReplyDelete
  5. Pretty handy and so pretty form for bloggers.

    ReplyDelete

I so appreciate your visits and sharing your thoughts at Life and Linda.

Need a New Look?