Stylish Color Text Box for Blogger Post

10 Stylish Color Text Box for Blogger Post | Best Colored Text Box

Stylish Color Text Box for Blogger Post– Every bloggers tries to attract their visitors by making their blog look elegant. Apart from writing a good keyword rich perfect SEO friendly blog post, article design matters to a lot to appeal a visitor. A well design blog with beautifully curated contents makes visitors feel comfortable while reading a long descriptive article in a blog. One of the key tactics to beautify your blog post is by adding stylish html color text box with images or highlighted text with colored background.

In my previous tutorial, I wrote article relating How to Add Html Text box in Blogger Post and Color Code Box in Blogger Post. In this tutorial I came up with 10 Stylish Color Text Box for Blogger Post to beautify your blog post, where you can write appealing blog post with highlight text and colorful background. Also, you can add image inside the colorful text box to beautify your article. So, let’s dive in!!!

Why should you use Color Text Box in Blogger Post?

The main reason for adding colored text box in blogger post is to make readers feel comfortable while reading a long descriptive blog post. Nobody likes to read long descriptive black and white blog post. If an article is long descriptive then visitor gets bored, eventually they starts scrolling from top to bottom and they leave that page resulting bounce rate increases and visitors length decreases which is harmful for SEO.

Stylish Color Text Box for Blogger

Blog Post with colorful text box increases readers focus more into the article resulting reader spends more time on blog which decreases bounce rate & boosts SEO.

Sample Colored Text Boxes for Blogger Post

Stylish Color Text Box for Blogger PostColor Text Box Codes

Style-1

<div style=”background-color: #fff1c6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-1</div>

Style-2

<div style=”background-color: #fef7e0; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-2</div>

Style-3

<div style=”background-color: #357ae830; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-3</div>

Style-4

<div style=”background-color: #e5e5e570; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-4</div>

Style-5

<div style=”background-color: #c6eadb70; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-5</div>

Style-6

<div style=”background-color: #26fba270; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-6</div>

Style-7

<div style=”background-color: #7866fb17; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-8</div>

Style-8

<div style=”background-color: #4726fb17; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-8</div>

Style-9

<div style=”background-color: #fbe12661; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-9</div>

Style-10

<div style=”background-color: #77766c26; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
Style-10</div>

How to add these Stylish Color Text Box in Blogger Post?

To add stylish color code box in blogger post follow by previous blog where i wrote how to add color text box in blogger post. Click here to add stylish color code box.

◆ Last Word: Hope you are benefited by this article and learned something new. Let me know how this tutorial helped you to display color text box in your blog post. For any issues relating implementation of the code drop a comment below we are ready to help you. Also, if benefited please share with your friends in social media.

Color Text Box for Blogger

COLOR TEXT BOX: HOW TO ADD STYLISH COLORED TEXT BOX IN BLOGGER POST

Add Color Text Box in Blogger Post– Every bloggers tries to attract their visitors by making their blog look elegant. Apart from writing a good keyword rich perfect SEO friendly blog post, article design matters to a lot to appeal a visitor. A well design blog with beautifully curated contents makes visitors feel comfortable while reading a long descriptive article in a blog. One of the key tactics to beautify your blog post is by adding stylish html color text box with images or highlighted text with colored background.

In my previous tutorial, I wrote article relating How to Add Html Text box in Blogger Post and Color Code Box in Blogger Post. In this tutorial I came up with stylish HTML Color Text Box to beautify your blog post, where you can write appealing blog post with highlight text and colorful background. Also, you can add image inside the colorful text box to beautify your article. So, let’s dive in!!!

Why should you use Color Text Box in Blogger Post?

The main reason for adding colored text box in blogger post is to make readers feel comfortable while reading a long descriptive blog post. Nobody likes to read long descriptive black and white blog post. If an article is long descriptive then visitor gets bored, eventually they starts scrolling from top to bottom and they leave that page resulting bounce rate increases and visitors length decreases which is harmful for SEO.

Color Text Box for Blogger

A beautifully curated blog post with colorful background distracts readers from getting bored. Blog Post with colorful text box increases readers focus more into the article resulting reader spends more time on blog which decreases bounce rate & boosts SEO.

Sample Colored Text Boxes for Blogger Post

<div style=”background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>Your Text Here </div>

<div style=”background-color: #FFF4D6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>Your text here </div>

These were the sample color codes for the above two styles. For more styles you can check 10 stylish color Text Box for Blogger Posts.

How to add Color Text Box in Blogger Post?

To add the above colored text boxes in your blogger post follow the above steps:

Step 1: Login to your blogger dashboard and select your blog.

color text box in blogger post

Step 2: Go to Posts >All New Post > HTML.

Step 3: Paste color text box code in HTML area.

Step 3: Replace “Your Text Here” with your desired text.

◆ Customization: To customize above colored text box just just replace #FFF4D6 with your desired colored code. For various codes use this color code generator. Also, to add image inside color code just add image URL inside colored text box code area in HTML. You’re done!

◆ Last Word: Hope you are benefited by this article and learned something new. Let me know how this tutorial helped you to display color text box in your blog post. For any issues relating implementation of the code drop a comment below we are ready to help you. Also, if benefited please share with your friends in social media.

Stylish Blogger Contact Us Form #style_10

10 Stylish Blogger Contact Form For Static Page

Adding a Stylish Blogger Contact Form is one of the most toughest task since blogger doesn’t support any plugins as of WordPress. But in this tutorial we picked 10 best stylish contact us form for static pages for Blogspot blogger.

Most of bloggers uses third party sites to Contact Us page in bloggers like (123FormBuilder, 123ContactForm, Jotform, etc.).

Officially blogger allow us to add Contact Us widget in the sidebar or footer. In my previous tutorial I wrote a detailed post relating how to add contact form in blogger. In this article I’m going to share 10 stylish contact form for blogger picked available on the web developed by the various bloggers. Let’s get start.

How to add Contact Us Form In Blogger

Step 1

Add Contact Us gadget.

  1. Login to your blogger dashboard.
  2. Go to Layout.
  3. Click on Add a Gadget/Widget.
  4. Scroll down and add Contact Us Widget.

Step 2

Hide default contact us form using css in template editor.

  1. Login to your blogger dashboard.
  2. Go to Theme.
  3. Click On Edit HTML.
  4. Click anywhere inside code area and press CTRL+F. Pop-up box will appear in the corner of the code area.
  5. Paste  ]]></b:skin> inside the code box appeared on the top corner and hit enter.
  6. Above ]]></b:skin> paste the following Code.

div#ContactForm1 {

display: none !important;

}

Step 3

Adding Contact Us Form in Static Page.

  1. Goto Page.
  2. Click Add New Page.
  3. In the Top Left corner there you will find Compose | HTML. Select HTML mode and remove everything.
  4. Paste the following code (any one from the above 10 contact us from code) into the HTML post editor.
  5. Save and Publish.
  6. You’re done.

Stylish Blogger Contact Us Form #style_1

Stylish Blogger Contact Us Page Form
Stylish Blogger Contact Us Form #style_1

CONTACT US FORM CODE #STYLE_1:

<script>
var blogId = ‘2375945666816187403’;//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg =’Sending…’;
var contactFormMessageSentMsg = ‘Your message has been sent.’;
var contactFormMessageNotSentMsg = ‘Message could not be sent. Please try again later.’;
var contactFormEmptyMessageMsg =’Message field cannot be empty.’;
var contactFormInvalidEmailMsg = ‘A valid email is required.’

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘sidebar’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: contactFormMessageSendingMsg , ‘contactFormMessageSentMsg’: contactFormMessageSentMsg , ‘contactFormMessageNotSentMsg’: contactFormMessageNotSentMsg , ‘contactFormInvalidEmailMsg’: contactFormInvalidEmailMsg , ‘contactFormEmptyMessageMsg’: contactFormEmptyMessageMsg , ‘title’: ‘Contact Form’, ‘blogId’: blogId, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’));
widgetLoaded=true;
document.getElementById(‘ContactForm1_contact-form-submit’).click();
}
return true;
}
</script>
<form name=’contact-form’>
<div>Your Name : </div>
<input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>
<div>Your Email: <em>(required)</em></div>
<input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>
<div>Your Message: <em>(required)</em></div>
<textarea class=’contact-form-email-message’ id=’ContactForm1_contact-form-email-message’ name=’email-message’ rows=’5′></textarea>
<p></p>
<input class=’contact-form-button contact-form-button-submit’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Send’ onclick=”sendEmailMsg()”/>
<div style=’text-align: center; max-width: 450px; 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>

Stylish Blogger Contact Us Form #style_2

Stylish Blogger Contact Us Form #style_2
Stylish Blogger Contact Us Form #style_2

CONTACT US FORM CODE #STYLE_2:

<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 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,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:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.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” 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=”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″ type=”text” 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>

Stylish Blogger Contact Us Form #style_3

Stylish Blogger Contact Us Form #style_3
Stylish Blogger Contact Us Form #style_3

CONTACT US FORM CODE #STYLE_3:

<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:#444;background:#F3F3F3;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:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;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>

Stylish Blogger Contact Us Form #style_4

Stylish Blogger Contact Us Form #style_4
Stylish Blogger Contact Us Form #style_4

CONTACT US FORM CODE #STYLE_4:

<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class=”tb-contact-form-widget”>
<form name=”contact-form”>
<div class=”name”>
<input class=”c-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” placeholder=”Your Name”/>
<label for=”name”>Name</label>
</div>
<div class=”email”>
<input class=”c-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” placeholder=”mail@example.com”/>
<label for=”email”>E-mail *</label>
</div>
<div style=”clear: both;”></div>
<div class=”message”>
<textarea class=”c-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″ placeholder=”Write something to us…”>
</textarea>
<div class=”srbtn”>
<input class=”cform-button” id=”ContactForm1_contact-form-submit” type=”button” value=”Submit” />
</div>
<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>

Stylish Blogger Contact Us Form #style_5

Stylish Blogger Contact Us Form #style_5
Stylish Blogger Contact Us Form #style_5

CONTACT US FORM CODE #STYLE_5:

<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: #FA540B;
border-radius: 2px;
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;
}
/**** Submit button style ****/
.contact-form-button-submit {
background: #FA540B;
font-size: 20px;
letter-spacing: 2px;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
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=”Write your message here…” 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>

Stylish Blogger Contact Us Form #style_6:

Stylish Blogger Contact Us Form #style_6
Stylish Blogger Contact Us Form #style_6

CONTACT US FORM CODE #STYLE_6:

<form name=”contact-form”><span><i class=”fa fa-pencil-square-o”></i> Name </span><br /> <input id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /> <br /> <br /> <span><i class=”fa fa-envelope-o”></i> Email Address <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span></span> <br /> <input id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /> <br /> <br /> <span><i class=”fa fa-keyboard-o”></i> Content <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span></span><br /> <textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″></textarea> <br /> <input id=”ContactForm1_contact-form-submit” type=”button” value=”Send” /> <br /> <div style=”max-width: 222px; text-align: center; width: 100%;”><div id=”ContactForm1_contact-form-error-message”></div><div id=”ContactForm1_contact-form-success-message”></div></div></form><br /><style scoped=”” type=”text/css”> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:’Open Sans’,sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:’Open Sans’;float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

Stylish Blogger Contact Us Form #style_7:

Stylish Blogger Contact Us Form #style_7
Stylish Blogger Contact Us Form #style_7

CONTACT US FORM CODE #STYLE_7:

<style> .tb-contact-form-widget{background-color:#A4A4A4;background-image: url(“https://2.bp.blogspot.com/-JgcTvhPBO1o/WU1E2reu27I/AAAAAAAAAE4/op_A1zV78IMyRhQYKGV1zbcXtX3eybwNACPcBGAYYCw/s1600/to-contact-img-2.jpg”);background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;} .srbtn{display:inline-block;} .cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;} .cform-button:hover {background-color: #2980b9;color: #fff;} .btn-reset:hover {background-color: red;color: #fff;} .tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;} .c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none; -moz-box-shadow: 0 0 0 1px #e8c291 inset; -webkit-box-shadow: 0 0 0 1px #E8C291 inset;} .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;} #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;} </style> <div class=”tb-contact-form-widget”> <form name=”contact-form”> <div class=”form-name”><span><i class=”fa fa-pencil-square-o”></i> Your Name: </span><br /><input class=”c-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /></div> <div class=”form-email”><span><i class=”fa fa-envelope-o”></i> E-mail Address *: </span><br /><input class=”c-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /></div><div style=”clear: both;”></div><div class=”form-message”> <span><i class=”fa fa-keyboard-o”></i> Message *:</span><br /> <textarea class=”c-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″></textarea><div class=”srbtn”><input class=”cform-button” id=”ContactForm1_contact-form-submit” type=”button” value=”Submit” /><input type=”reset” class=”btn-reset” value=”Clear” /></div><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> <h3>Our Social Sites</h3> <ul class=”b-social-buttons”> <li><a href=”#” class=”btn-lg”><i class=”fa fa-twitter”> <span class=”network-name”>Twitter</span></i></a></li> <li><a href=”#” class=”btn-lg”><i class=”fa fa-facebook”> <span class=”network-name”>Facebook</span></i></a></li> <li><a href=”#” class=”btn-lg”><i class=”fa fa-youtube-play”> <span class=”network-name”>Youtube</span></i></a></li> </ul></div></form></div>

Stylish Blogger Contact Us Form #style_8:

Stylish Blogger Contact Us Form #style_8
Stylish Blogger Contact Us Form #style_8

CONTACT US FORM CODE #STYLE_8:

<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”>Get in touch.</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>

Stylish Blogger Contact Us Form #style_9:

Stylish Blogger Contact Us Form #style_9
Stylish Blogger Contact Us Form #style_9

CONTACT US FORM CODE #STYLE_9:

<style> .contact-form-widget { -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #eaeaea; background: -moz-linear-gradient(top, #ffffff, #eaeaea); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea)); color: #444; border: 1px solid #cacaca; margin: 0 0 25px; max-width: 96%; font-size: 1.4em; padding: 8px 10px; } .contact-form-name, .contact-form-email { width: 50%; max-width: 50%; margin-bottom: 10px; } .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } </style> <div class=’widget ContactForm’ id=’ContactForm2′> <div class=’contact-form-widget’> <div class=’form’> <form name=’contact-form’> <p>Name</p> <input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/> <p>E-mail *</p> <input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/> <p>Message *</p> <textarea class=’contact-form-email-message’ cols=’25’ id=’ContactForm1_contact-form-email-message’ name=’email-message’ rows=’5′></textarea> <input class=’contact-form-button contact-form-button-submit’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Submit’/> <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> </form> </div> </div> </div>

Stylish Blogger Contact Us Form #style_10:

Stylish Blogger Contact Us Form #style_10
Stylish Blogger Contact Us Form #style_10

CONTACT US FORM CODE #STYLE_10:

<div class=”contact1″>
<div class=”container-contact1″>
<div class=”contact1-pic js-tilt” data-tilt>
<img src=”images/img-01.png” alt=”IMG”>
</div>

<form class=”contact1-form validate-form”>
<span class=”contact1-form-title”>
Get in touch
</span>

<div class=”wrap-input1 validate-input” data-validate = “Name is required”>
<input class=”input1″ type=”text” name=”name” placeholder=”Name”>
<span class=”shadow-input1″></span>
</div>

<div class=”wrap-input1 validate-input” data-validate = “Valid email is required: ex@abc.xyz”>
<input class=”input1″ type=”text” name=”email” placeholder=”Email”>
<span class=”shadow-input1″></span>
</div>

<div class=”wrap-input1 validate-input” data-validate = “Subject is required”>
<input class=”input1″ type=”text” name=”subject” placeholder=”Subject”>
<span class=”shadow-input1″></span>
</div>

<div class=”wrap-input1 validate-input” data-validate = “Message is required”>
<textarea class=”input1″ name=”message” placeholder=”Message”></textarea>
<span class=”shadow-input1″></span>
</div>

<div class=”container-contact1-form-btn”>
<button class=”contact1-form-btn”>
<span>
Send Email
<i class=”fa fa-long-arrow-right” aria-hidden=”true”></i>
</span>
</button>
</div>
</form>
</div>
</div>

Frequently asked questions about the Blogger Contact Form for Static Page

Who can send me message using Blogger Contact Form?

Ans: Anyone can send you message using the above mentioned 10 Stylish Blogger Contact Form.

Where i can get those messages when anyone tries to contact me using Blogger Contact Page?

Ans: Whenever anyone sends you  message using these contact form your message will straight go into your email address associated with the blogger account.

Blogger Contact Form not working. I’m not receiving message if someone messages me using my blogger contact form?

Ans: The probable reason might be you didn’t entered your _Var Blog ID or some other reasons. I recommend please delete all the existing codes and reinsert Blogger Contact Us Form code from the above list. Then try to test. Hope your issue will be resolved.

◆ Last Word: Hope you are benefited by this article and successfully added Stylish Contact Us Form in your blogger blog. Let me know how this tutorial helped your Styslish Contact Us form. For any issues relating implementation of the code snippet drop a comment below we are ready to help you.

If you find this tutorial is useful then share this article Facebook or other social media. Comment below lemme know how this contact form worked in your blog 🙋.