Stylish Contact Form For Blogger! Add to Static Page
Stylish Contact Form For Blogger: In previous, we have shared a lot of Blogger widgets for our all loyal readers. But, it’s time to share some awesome, stylish and cool designed widgets which look professional in your blogger blog.
Nowadays we have developed some widgets for you which we shared some time ago like as, AllInOne Admin Box for Blogger, Stylish & Responsive Subscription Box for Blogger, & Cute Popup email Subscription Box for Blogger.
So, now you think what is in today’s post, Right? So guys, Today we are going to share a pro looking stylish Contact Us Form For Blogger which is fully Responsive.
A Contact Form in Blogger blogs is a very tough task for everyone until before blogger has released its official Contact Form Gadget.
Blogger blogs were missing one major feature therefore either we have to use third party services.
But now its take only a few clicks to install it to sidebar or footer bar of any template’s layout. But still, most of the people want to use it on any dedicated contact us page rather than as a sidebar or footer widget.
Contents
Why Blogger’s Contact Form is Best than others?
It is because it has following features:
- Fewer Option.
- Neat & Clean.
- Instant Delivery Service.
- No Page Reload When Someone Click On Send Button.
- Simple to customize With CSS.
- We can install it on any static/specific page instead of sidebar or footer.
- Trust Full, Because it is Blogger’s official widget. So we need not worry about anything.
Add Stylish Contact Form For Blogger
Stylish Contact Form For Blogger
In above Demo Screenshot, you have seen we have done a lot of work to make blogger contact form looks like a professional one.
It is Fully responsive, and it anyway in the center of your static/specific page. Hope you like it. Can we call it Professional version? 🙂 See Live Demo from Below Button.
If you like above demo screenshot, then we shall move on the adding our Blogger Contact form to separate page of Blogger Blog. 🙂
Adding Contact Form To Static Page Of Blogger
Step1] This step is for those people who has not installed the blogger contact form widget from Blogger library.
We hope you have already Logged into your Blogger account so now we head over to Layout >> Add A Gadget >> Now Click On More Gadgets >> Add Contact Form.
Step2] After adding into sidebar or footer area, Now we are going to hide it from appearing as a gadget. Go To Template >> Edit HTML >> Search for ]]></b:skin> tag and just above of this tag paste following code.
div#ContactForm1 {
display: none !important;
}
As you have guessed from above demo screenshot, we are using FontAwesome Icons & if you are not using them then first you’ll have to install it otherwise All the icons will not appear as shown in the Demo Screenshot.
Step3] Installing Font Awesome Icons to Blogger Template
Go To Blogger >> Template >> Edit HTML.
Paste following code just below of <head> tag inside your Blogger Template.
<link href=’http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css’ rel=’stylesheet’/>
Step4] Now Save your Template because you are done with it.
Step5] Now we are going to add Contact Form to a static page on Blogger Blog. If you already have a separated page for contact form and you are using a contact form already then, you need not create a new one for this. But if this is the first time then go to Pages link and on top, Click on New Page Link.
Step6] When blogger post editor is loaded then immediately before doing anything else, just enter your page name in the title box as Contact Us. This is the most important step because you’ll get the same permalink address for your new page.
You’ll not be able to edit your permalink in anyway later. If you skipped this and entered the codes first, then you’ll get a weird permalink address for contact us page. After that Switch to HTML Mode and change the page settings from the left side as shown in the screenshot below.
Step7] You’re almost done by now, and all you need is simple Copy and Paste the code. So just select the whole CSS and HTML code given below and paste into HTML Editor as it is.
Important Notice: You don’t have permission to copy and share my codes on your blog. We have put a lot of efforts into designing it and you can see itself from below CSS code area. Respect the Hard work of others.
CSS Part of Stylish Blogger Contact form
<style>
/****** Contact Form Designed by www.MyBloggerGuides.com ******/
div#mbg-blogger-cntct-form {
width:100%;
height:100%;
padding: 50px 0px;
border-radius: 2px;
color: #1D1D1D;
font-size: 15px;
font-weight: bold;
position: relative;
background-color: #404040;
font-family: sans-serif;
}
div#mbg-blogger-cntct-form .wrap-me {
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: #F0F0F0;
max-width: 750px;
width: 100% !important;
border-top: 60px solid #FF0066;
box-sizing: border-box;
border-bottom: 3px solid #FF0066;
border-left: 3px solid #FF0066;
border-right: 3px solid #FF0066;
border-radius: 15px 15px 15px 15px;
}
div#mbg-blogger-cntct-form .wrap-me:before {
content: ‘f0e0 Contact Us’;
position: absolute;
font-family: FontAwesome;
font-weight: normal;
margin-top:-87px;
margin-left:-95px;
left:50%;
display: inline-block;
font-size: 28px;
width:190px;
height: 53px;
border-radius: 50px;
text-align: center;
color: #FFF;
box-sizing: border-box;
border: 2px solid #FFFFFF;
line-height: 50px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
padding: 5px;
margin-top: 5px !important;
box-shadow: none!Important;
max-width: 450px;
width: 100%;
border: 1px solid #8ff;
line-height: 1em;
min-height: 32px;
background: #FEFEFE;
font-family: sans-serif;
margin-bottom: 15px;
border-radius: 10px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
padding: 5px;
margin-top: 5px !important;
box-shadow: none!Important;
max-width:670px;
width:100%;
border: 1px solid #8ff;
line-height: 1em;
min-height: 50px;
background: #FFF;
font-family: sans-serif;
margin-bottom: 10px;
border-radius: 10px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
outline: none;
background: #fff !important;
color: #111;
border-color: #ffb2b2;
transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
color: #FFFFFF;
background: #3366FF !important;
}
.contact-form-button-submit {
background: #3399FF;
display: table;
font-size: 17px;
margin: 0 !important;
border-radius: 0 !important;
max-width: 100%;
width: 100%;
min-width: 100%;
height: 32px;
line-height: 0.5em;
letter-spacing: 0.5px;
font-family: sans-serif;
font-weight: normal;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
border: 1px solid #fff !important;
text-align: center;
padding: 0px 0px 0px 15px;
text-transform: capitalize;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border-color: #FFFFFF;
box-shadow: none !important;
}
/**** Error 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;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border {
background: #000000;
border: 1px solid #5A5A5A;
bottom: 0;
box-shadow: none;
color: #FDFDFD;
font-size: 15px;
font-weight: normal;
line-height: 35px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
height: 35px;
margin-top: 45px;
}
.contact-form-cross {
height: 14px;
margin: 5px;
vertical-align: -8.5%;
float: right;
width: 14px;
border-radius: 50px;
border: 0 !important;
cursor: pointer;
}
.contact-form-success-message-with-border {
font-weight: normal;
background-color: #000;
border: 1px solid #FFF;
color: #FFF;
line-height: 35px;
margin-left: 0;
font-size: 13px;
opacity: 1;
position: static;
text-align: center;
height: 35px;
margin-top: 45px;
}
/* Extra Stuff */
div#mbg-blogger-cntct-form span.name-bg {
background-color: #99FFFF;
}
div#mbg-blogger-cntct-form span.email-bg {
background-color: #FF99CC;
}
div#mbg-blogger-cntct-form span.name-bg, div#mbg-blogger-cntct-form span.email-bg {
display: inline-block;
max-width: 450px;
line-height: 22px;
width: 100%;
color: #111;
padding: 3px 5px;
margin: 0px 0px 4px;
box-sizing: border-box;
border-radius:10px;
height: 30px;
border: 1px solid #B2C0C0;
padding-left: 39px;
}
div#mbg-blogger-cntct-form span.name-bg:before {
content: ‘f007’;
background-color: #444;
}
div#mbg-blogger-cntct-form span.email-bg:before {
content: ‘f1fa ‘;
background-color: #3333FF;
}
div#mbg-blogger-cntct-form span.name-bg:before, div#mbg-blogger-cntct-form span.email-bg:before, div#mbg-blogger-cntct-form span.message-bg:before {
font-family: FontAwesome;
text-align: center;
margin: -4px 0 0px 0px;
font-weight: normal;
padding: 0;
line-height: 27px;
width: 30px;
height: 28px;
display: table;
position: absolute;
margin-left: -40px !important;
border: 1px solid rgba(0, 0, 0, 0.1);
border-right: 0 !important;
border-radius:10px 0px 10px 0px;
color: #FFFFFF;
}
div#mbg-blogger-cntct-form span.message-bg {
background-color: #FF6666;
display: inline-block;
max-width: 450px;
line-height: 22px;
width: 100%;
color: #111;
padding: 3px 5px;
box-sizing: border-box;
height: 30px;
border: 1px solid #B2C0C0;
border-radius:10px;
padding-left: 39px;
margin: 0px 0px 4px;
}
div#mbg-blogger-cntct-form span.message-bg:before {
content: ‘f0e0’;
background-color: #00E540;
}
div#mbg-blogger-cntct-form span.send-bg {
height: 32px;
display: inline-block;
float: left;
max-width: 45%;
width: 100%;
margin-top: 15px;
transition: all 0.4s ease-in-out !important;
}
div#mbg-blogger-cntct-form span.send-bg:before {
content: ‘f1d8’;
}
div#mbg-blogger-cntct-form span.send-bg:before, div#mbg-blogger-cntct-form span.clear-bg:before {
font-family: FontAwesome;
text-align: center;
font-weight: normal;
margin: 0;
background-color: #000;
padding: 0;
line-height: 27px;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
border: 1px solid #fff;
border-right: 0 !important;
color: #FFFFFF;
}
div#mbg-blogger-cntct-form span.clear-bg {
display: inline-block;
float: right;
margin-top: 15px;
max-width: 45%;
width: 100%;
}
div#mbg-blogger-cntct-form span.clear-bg:before {
content: ‘f021’;
}input.contact-form-button.contact-form-button-submit.clear-button:hover {
background-color: #0000CC !important;
}
div#mbg-blogger-cntct-form .clear-button {
color: #FFFFFF;
border: 1px solid #FFF !important;
background-color: #3333FF;
float: right;
display: table;
height: 32px;
}
</style>
<div id=”mbg-blogger-cntct-form”>
<div class=”wrap-me”>
<form name=”contact-form”>
<span class=’name-bg’>Your Name</span><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 />
<span class=’email-bg’>Your Email*</span><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 />
<span class=’message-bg’>Your Message*</span><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 />
<span class=’send-bg’><input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”Send” /></span>
<span class=’clear-bg’><input class=’contact-form-button contact-form-button-submit clear-button’ type=’reset’ value=’Clear’/></span>
<br />
<div style=”max-width: 100%; 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>
Step8] Now just hit Publish button buddy. Finished? We did it! Yay! 🙂 Now just visit your contact us page and see it live yourself on your own blog.
In Conclusion of Stylish Contact form for Blogger
So above guide is about How To Add Stylish Contact Form for Blogger to the Separated Page. Hope this guide help you and you can easily add this pro looking contact form to separated page of your Blogger Blog. Still, if you have some problems, then please let me know, We’ll help you for sure. We hope you guys liked this new look of blogger contacts us form widget in a separate page of your blog. If you have little time, then you may share this article. 🙂 Thank you! Stay Blessed!