Custom Stylish Contact Form for Blogger [2020]

How To Add Custom Stylish Contact Us Form In Blogger

Hello there! Welcome to my today’s post about contact form tutorial. 
Blogger is simple yet complicated, there are pros and cons to it. Blogger already has a widget called contact form but it’s not really that attractive, people want to make their blog look more professional. Blogger does not have any support for third-party widgets like WordPress but since you are here, just follow my step by step instructions and make your own Stylish Contact Us page.

There are lots of benefits to it, like:

1. You will have a very professional looking separate page for contact us form
2. You will get your messages almost instantly
3. Messages sent through this will directly go to all the admin’s emails added to the account.
4. You can customize it just the way you would like it to look like.

Let’s get started then,

Adding the Contact form Gadget

Step 1: Log in to your blogger blog and select the blog for which you would like to add this contact us form.


Step 2: Go to layout section from the left sidebar on Blogger dashboard.

Step 3: Click on add a gadget and it will bring all the available gadgets that you can add.

Step 4: Add the contact form widget, if you already have one added then just skip this part.

Hiding the gadget

We are now going to hide the gadget cause we don’t want to use the simple designed google’s contact form. We will use make it stylish and add it on a new page but for that we have to hide it from the blogger blog’s homepage. Just follow the steps below and you will be good to go to the last part.


Step 1: Just like the layout section, go to the Template section from the sidebar of blogger dashboard. It is right below layout section.

Step 2: Now click on the ‘Edit HTML’ button like the image below and you will see your blogger blog’s codes in the box.

Step 3: Search for “]]></b:skin>” , You can use CTRL+F.

Step 4: Copy and Paste the following codes just above “]]></b:skin>“

[div#ContactForm1 { 
display: none !important;  
}]

Step 4: Now click on save template and you are done with this part. 


You won’t see the contact form on your blogger blog. Now we need to make it appear on a page with our own stylish contact form code.

Adding a page for the contact form

Now we are all set to do the last part of this trick. All you have to do is make a new page and paste the CSS codes in it. Just follow the below steps to make this magic happen.


Step 1: Go to the page section and click on New Page.

Step 2: Switch to HTML code editor from Compose mode and delete everything there is.

Step 3: Now paste the below codes in the code editor

[<div dir=”ltr” style=”text-align: left;” trbidi=”on”><style>/****** Contact Form Designed by www.BDbloggerhub.com ******/div#bdbloggerhub_cntct_form {    padding: 50px 0px;    border-radius: 2px;    color: #1D1D1D;    font-size: 15px;    font-weight: bold;    background-color: #949a9c;    font-family: sans-serif;}div#bdbloggerhub_cntct_form .wrap-me {    margin: 0 auto;    display: block;    padding: 30px 20px;    background-color: #F3F3F3;    max-width: 440px;    width: 100% !important;    border-top: 65px solid #FF0000;    box-sizing: border-box;}div#bdbloggerhub_cntct_form .wrap-me:before {    content: ‘f0e0’;    position: absolute;    font-family: FontAwesome;    font-weight: normal;    margin-top: -88px;    margin-left: -23px;    left: 50%;    display: inline-block;    font-size: 28px;    width: 53px;    height: 53px;    border-radius: 50px;    text-align: center;    color: #FFFFFF;    box-sizing: border-box;    border: 2px solid #FFFFFF;    line-height: 49px;}input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {    padding: 5px;    margin-top: 4px !important;    box-shadow: none!Important;    max-width: 300px;    width: 100%;    border: 1px solid #D2D2D2;    line-height: 1em;    min-height: 31px;    background: #FEFEFE;    font-family: sans-serif;    margin-bottom: 15px;    border-radius: 0px;}.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {    padding: 5px;    margin-top: 4px !important;    box-shadow: none!Important;    max-width: 400px;    width: 100%;    border: 1px solid #D2D2D2;    line-height: 1em;    min-height: 80px;    background: #FEFEFE;    font-family: sans-serif;    margin-bottom: 10px;    border-radius: 0px;}/***** Focus *****/#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {    outline: none;    background: #FFFFFF !important;    color: #444;    border-color: rgb(236, 235, 235) !important;    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;    transition: all 0.3s ease-in-out !important;}/**** Submit button style ****/.contact-form-button-submit:hover {    color: #FFFFFF;    background: #0083FF !important;}.contact-form-button-submit {    background: #19B3EA;    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#bdbloggerhub_cntct_form span.name-bg {    background-color: #E8F2FF; }div#bdbloggerhub_cntct_form span.email-bg {    background-color: #FFE8E8;}div#bdbloggerhub_cntct_form span.name-bg, div#bdbloggerhub_cntct_form span.email-bg {    display: inline-block;    max-width: 300px;    line-height: 21px;    width: 100%;    color: #696969;    padding: 3px 5px;    margin: 0px 0px 4px;    box-sizing: border-box;    height: 30px;    border: 1px solid #E4E0E0;    padding-left: 39px;}div#bdbloggerhub_cntct_form span.name-bg:before {    content: ‘f007’;    background-color: #60A2FF; }div#bdbloggerhub_cntct_form span.email-bg:before {    content: ‘f1fa ‘;    background-color: #FF530B;}div#bdbloggerhub_cntct_form span.name-bg:before, div#bdbloggerhub_cntct_form span.email-bg:before, div#bdbloggerhub_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: 28px;    height: 28px;    display: table;    position: absolute;    margin-left: -40px !important;    border: 1px solid rgba(0, 0, 0, 0.1);    border-right: 0 !important;    color: #FFFFFF;}div#bdbloggerhub_cntct_form span.message-bg {    background-color: #EBFFE8;    display: inline-block;    max-width: 400px;    line-height: 21px;    width: 100%;    color: #696969;    padding: 3px 5px;    box-sizing: border-box;    height: 30px;    border: 1px solid #E4E0E0;    padding-left: 39px;    margin: 0px 0px 4px;}div#bdbloggerhub_cntct_form span.message-bg:before {    content: ‘f0e0’;    background-color: #20CC00;}div#bdbloggerhub_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#bdbloggerhub_cntct_form span.send-bg:before {    content: ‘f1d8’; }div#bdbloggerhub_cntct_form span.send-bg:before, div#bdbloggerhub_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#bdbloggerhub_cntct_form span.clear-bg {    display: inline-block;    float: right;    margin-top: 15px;    max-width: 45%;    width: 100%;}div#bdbloggerhub_cntct_form span.clear-bg:before {    content: ‘f021’; }
input.contact-form-button.contact-form-button-submit.clear-button:hover {    background-color: #E83434 !important;}div#bdbloggerhub_cntct_form .clear-button {    color: #FFFFFF;    border: 1px solid #FFF !important;    background-color: #FF2C2C;    float: right;    display: table;    height: 32px;}.sidebar, #footer-wrapper, #blog-pager, h2.post-title, .comments {display: none !important;}</style>
<br /><div id=”bdbloggerhub_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><div style=”clear: both;”></div><div class=”post-share”><span class=”share-toggle pi-btn”><i class=”fa fa-share-alt”></i></span></div></div>]