Jul 22, 2016

Stylish Contact Form For Blogger! Add to Static Page

data:blog.title
In previous we have shared a lot of Blogger widgets for our all loyal readers. But, its time to share some impressive, stylish and cool designed widgets which look professional in your blogger blog. Now days we have designed some widgets for you which we have shared some time ago like as, AllInOne Admin Box for Blogger, Stylish & Responsive Subscription Box for blogger, Cute Popup email Subscription box for blogger & WordPress Like Responsive Social Sharing Bar Widget for Blogger with Counter function. So, now you are thinking 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.
How To Add Stylish Contact Form to Static Page on Blogger
Actually, Adding a Contact Form Blogger blogs is 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 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.

Why Blogger's Contact Form is Best than others?

It is because it has following features:
  1. Fewer Option.
  2. Neat & Clean.
  3. Instant Delivery Service.
  4. No Page Reload When Someone Click On Send Button.
  5. Easy to Customize With CSS.
  6. We can install it on any static/specific page instead of sidebar or footer.
  7.  Trust Full, Because it is Blogger's official widget. So we need not to worry about anything.
How To Add Stylish Responsive Contact Us Form On Separate Page Of Blogger Blog

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 is aligned in center of your static/specific page. Hope you like it. Can we call it Professional version? :) See Live Demo from Below Button.

Live Demo

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 for 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 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 to 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 left side as shown in the screenshot below.

Installing The Stylish Contact Form ON Separated Page


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

<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>



HTML Part:
     <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

Conclusion:

So above guide is about How To Add Stylish Contact Form To Blogger 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 contact 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!  

2 comments:

  1. form created but not sending any email . please guide

    ReplyDelete
    Replies
    1. It is working perfectly. I think you have not follow all guide. Have a look on Step1] and Step2]. First you have to add official contact form gadget from gadget library>>

      Go to layout >> Add A Gadget and then select Contact form after adding it head over to Template >> Edit HTML and search for
      ]]>
      tag and just above of it paste
      div#ContactForm1 {
      display: none !important;
      }


      Thanks for using this widget and tell me if problem persist after doing these tasks.

      Have a look on our our first blogger Template - BlackReen A Responsive Blogger Template.

      Don't forget to subscribe us and share this article with your friends.

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.