Today we have the custom stylish contact us form widgets for Blogger to leave it with stylish looks. The contact us form is made with HTML and JavaScript to allow you to apply it to your static contact us page to allow your blogger blog users to reach out to you easily. My Blogger blog implements one of the stylish blogger contact form widgets listed in this post. Choose from the many contact form gadget widgets and use the code to add to your static page. Make sure you Contact Us for more assistance. Without wasting time let’s jump into the contact form widget examples.
Contact Forms have different features that need to be used to make them work in your template. To Create Custom Contact Forms for Blogger you have to set the destination for emails in your code and then add the widget to your static page. The special features that every contact us form have name entries and email addresses which are a must in the widget gadget to allow sending of email messages. Below, there are listed different clean and colorful designs that will go hand in hand with your blogger blog. They are also customizable, and I will take you through how you can change their design to make them look like your Blogger website colors.
Blogger Email Setup
To add your Email address to your website so that the Custom Contact Forms Widget Gadgets for Blogger can use in sending the message, use the code below your <head> tag in the template code.
<meta content=’seoblur’ name=’author’/>
<meta content=’seoblur@gmail.com’ name=’email’/>
<link href=’https://plus.google.com/seoblur/about’ rel=’author’/>
<link href=’https://plus.google.com/seoblur/posts’ rel=’publisher’/>
<link href=’https://plus.google.com/seoblur’ rel=’me’/>
You will have to change the email and the google plus URL`s so that the email message from the contact forms can be received by the correct recipient. The main aim of the email address meta in code is to avoid the contact form from not sending messages to your blogger blog users. This helps the custom widget identify your email. Let’s now look at the contact form examples, and we will start with the Best and most common free blogger contact widget 1.
1. Simple Clean Contact Form Widget
This contact form is the best since most blogger blogs have white background colors. This means that the widget having a white look will look premium on your static contact us page. The code is highlighted below. I will take you on steps to add the code in the static page HTML view in your contact us page after choosing the best widget you find looking good to you.
CODE.
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.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:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#454545;background:#f2f4f4;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#fff;display:block;outline:none;margin-bottom:20px;text-align:center;background:#f1c40f;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-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"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>
The code comprises both HTML and CSS. Later customization includes changing the colors and design. Stay close. You can also customize the words NAME, MESSAGE, EMAIL, and SEND in the HTML part of the above contact form widget. Let’s look at the second stylish blogger widget.
2. Responsive Contact Form Blogger Widget
The best contact widget for Blogger Website is the above one. I use this one. I designed it from scratch borrowing from other widget gadgets to bring a nice responsive design to the widget. Use the code below to add it to your blogger static page.
CODE.
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #808000,10em 0 0 0 #FDCD78,15em 0 0 0 #008000,20em 0 0 0 #800080,25em 0 0 0 #000000,30em 0 0 0 #000080,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#fd8701;border:0;border-bottom:2px solid #fd8701;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #fd8701;box-shadow:inset 0 -2px #fd8701}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr /><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == "") {this.value = "E-mail address";}" onfocus="if (this.value == "E-mail address") {this.value = "";}" size="30" type="text" value="E-mail address" /></div><div style="clear: both;"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == "") {this.value = "Type your message here...";}" onfocus="if (this.value == "Type your message here...") {this.value = "";}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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></div></form></div></div></div>
The code above uses both CSS and HTML to give a pleasant look to your contact us page widget. Use it in your blogger blog and change colors from the rainbow upper part of the widget by changing the HTML color codes to your preferred ones.
3. Minimalistic Contact Form Widget for Blogger
The above widget is made in a way that corresponds to the one from the WordPress websites. The design is made to give your blogger blog contact a static page that resembles the one used in WordPress websites. It’s a white one and hence it looks so premium for your blogger website.
CODE.
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.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:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;} </style> <div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Contact Me For More.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png" width="16" height="16" /></div><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"><div class="email-icon"><img src="https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" 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"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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>
4. Stylish Contact Form Blogger Widget
This widget is best suited for those running tech and stylish-looking blogger blogs. Adding the stylish contact gadget will increase your click-through rate since it looks beautiful. I would even advise you to change the ribbon on the widget with a color of your theme to correspond with the browser address bar color.
CODE.
<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:#6c3483;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 #6c3483;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;height:11px !important;width:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Contact Me Through This Contact Form</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="E-mail address" 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="Type your message here..." rows="5" value="" placeholder="Type your message here..." value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></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>
You can change some things in the gadget such as the words Email address, Name, and Contact me through this form to whatever you want the contact form to display.
5. Sidebar Contact Form Blogger Widget
This widget is different from the other widget since it’s meant for the sidebar side of your blogger blog and so you will have to add it as a gadget. In the HTML/ JavaScript gadget setting in the layout of your blogger blog.
<div id="custom_ContactForm1" class="widget ContactForm"><div class="contact-form-widget"><p>Get in touch with us by filling out the form below. </p><div class="form"><form name="contact-form"><p></p>Name<br><input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name"><p></p>Email<span style="font-weight: bolder;">*</span><br><input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email"><p></p>Message<span style="font-weight: bolder;">*</span><br><textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea><p></p><input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit"><p></p><div style="text-align: center; max-width: 222px; width: 100%"><p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p><p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p></div></form></div></div><div class="clear"></div><span class="widget-item-control"><span class="item-control blog-admin"><a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=3473888338289815739&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget§ionId=sidebar-right-1" class="quickedit"><img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt=""></a></span></span><div class="clear"></div></div>
For the part labeled BlogID, replace that with your blogger blog ID. If you don’t know how to go through it, get the explanation below the widgets.
6. Best Sidebar Contact Blogger Widget
This is a colorful widget with a nice gradient to make people even contact you more. It looks so premium. You just need to add it to your blogger sidebar widgets and that’s all. I have designed it specifically for your blogger users. Am sure they will like it.
CODE.
div dir="ltr" style="text-align: left;" trbidi="on">Here Goes Your Contact Page Message To Visitors or Else Delete it.<br /><style>.twist_blogger_cntct_form_wrap {margin: 0 auto;max-width: 840px;padding: 0 10px;position: relative;background-color: #FDFDFD;}.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {content: '';display: table;clear: both;}/*----Change Contact Form Background Color Here----*/div#twist_blogger_cntct_form {padding: 20px 20px 10px 20px;background: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);border-radius: 4px;margin: 20px auto 20px;color: #FFF;font-size: 16px;max-width: 260px;}input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {padding: 5px;box-shadow: none!Important;min-width: 186px;max-width: 260px;width: 100%;border: 0 !important;line-height: 1em;min-height: 31px;background: #FCFCFC;margin-bottom: 15px;border-radius: 10px;}/**** Submit button style ****/.contact-form-button-submit {background: #fff;font-size: 20px;letter-spacing: 2px;cursor: pointer;outline: none!important;color: #000;border: 2px solid rgba(255,255,255,1);border-radius: 50px;min-width: 186px;max-width: 260px;width: 100%;text-transform: uppercase;height: 46px;margin-top: 10px!important;transition: all 300ms ease-;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;}/**** Submit button on mouse hover ****/.contact-form-button-submit:hover {border: 2px solid;color: #FFFFFF;background: #EF4800 !important;}/**** Submit button on Focus ****/.contact-form-button-submit:focus, .contact-form-button-submit.focus {border-color: #FFFFFF;box-shadow: none !important;}/**** Error message and Success Message ****/.contact-form-error-message-with-border .contact-form-success-message {background: #f9edbe;border: 1px solid #f0c36d;bottom: 0;box-shadow: 0 2px 4px rgba(0,0,0,.2);color: #666;font-size: 12px;font-weight: bold;padding-bottom: 10px;line-height: 19px;margin-left: 0;opacity: 1;position: static;text-align: center;}</style><br /><br /><div class="twist_blogger_cntct_form_wrap"><div id="twist_blogger_cntct_form"><form name="contact-form">Your Name<br /><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br /><br />Your Email<br /><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br /><br />Your Message<br /><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea><br /><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /><div style="max-width: 260px; text-align: center; width: 100%;"><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><br /></div></div></div>
How To Customize Blogger Contact Form Widgets
The best way to customize the contact form widgets is by changing HTML color codes. If you don’t understand this, blogger supports the HTML color codes and also gradients which change the color of your widgets completely. How to know the color of the code you just search for it on the website htmlcolorcodes.com and enter the #999999 or any color value you find in your widget and change it by choosing other codes.
How To Add Blogger Contact Form Widgets in Static Page
follow the steps which you will use to add the blogger contact widget that you find best in the ones I have provided below.
- Step one is logging in to blogger.com
- Step two is navigating to the pages section from the left sidebar.
- Step three, click on New Page.
- step four, in the title section, enter the name “contact us”.
- step five, on the options below title written to compose and HTML, click on HTML.
- Step six, copy your preferred Contact Form Widget Code and paste it into the HTML space part.
- Step seven, enter your contact page meta description and click on save.
Benefits Of Contact Form Widgets In Blogger
- Your blogger blog visitors get to be in touch with you for support.
- This engages your visitors to your website and increases Click Through Rate.
- Visitors In your blogger blog feel acknowledged and that can increase your blogger blog traffic.
Functions & Properties of The Blogger Contact Form Widget
- Stylish Design
- Premium Looks.
- Direct Email Delivery.
- Message and name entry.