Stylish Contact Form Widgets For Blogger / Blogspot [ HTML & CSS ]

In this tutorial, I will share with you How To Add Custom Stylish Contact Form Widgets for Blogger / Blogspot, Pop-up / Floating Contact Page With HTML & CSS & Javascript. 

You have to see a Blogger Contact Form widget available in Blogger’s default widgets. But If You Want to add Custom Contact form widgets on your blogger / Blogspot Website. Please Read This full tutorial post.

{tocify} $title={Table of Contents}

You can design these to your liking, such as creating specific contact pages, using widgets in the sidebar, or floating contact form page.

What Is Contact Form?

A contact form page is a common Form page on a website for visitors/users to contact the organization / Website Owner or individual providing the website. Any visitor can fill out the form using their email and they submit it to send a message to the website owner. 

Benifits Of Custom Blogger Contact Form

Having a contact page makes it more convenient for them to navigate your website and insted of making them look for your email. By providing specified form fields and design which of these fields is required and also you can ensure that your website visitors are giving you the information what you need and many more benefit using custom stylish contact form page. Example:

• Get Messages When it Suits You
• Reduce Spam Emails
• Keep Track of Inquiries
• Build Your Email Marketing List
• Delegate Tasks to Your Team
• Get More Leads
• Automatically Populate Your CRM
• Offer Support to Customers
• Get User Submitted Content
• Automatically Start Projects and To-Do Lists
• Make Quoting Easier with File Uploads 

How To Add Custom Stylish Contact Form Page With HTML & CSS 

Creating a Blogger Custom Contact Form Page is very easy and even if you don't have any kind of coding knowledge to do it, we have given below some blogger contact form page, which is created by HTML, CSS and Javascript.  According to the following steps, any design of your choice should be placed on the upper blogger / Blogspot site.

1 - Pop-up / Floating Contact Form For Blogspot Widgets

• Go To Blogger Dashboard 
• Theme
• Edite HTML
• Now Search For ]]></b:skin> and Paste Blew CSS Code above ]]></b:skin> tag.

/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

• Then Search </body> tag and paste Blew Script code and Save Theme.

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

2 - Stylish Contact Form Page For Blogspot / Blogger

• Go To Blogger Dashboard 
• Create A New Page 
• Now, Select Readers Comments “Don’t allow, hide existing”. 
• Swith HTML View
• Now Paste blew Code and Publish with Contact Us name.

<div dir="ltr" style="text-align: left;" trbidi="on"><style>/****** Contact Form Designed by www.blogbn.com ******/div#blogbn_cntct_form {    padding: 50px 0px;    border-radius: 2px;    color: #1D1D1D;    font-size: 15px;    font-weight: bold;    background-color: #949a9c;    font-family: sans-serif;}div#blogbn_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#blogbn_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#blogbn_cntct_form span.name-bg {    background-color: #E8F2FF; }div#blogbn_cntct_form span.email-bg {    background-color: #FFE8E8;}div#blogbn_cntct_form span.name-bg, div#blogbn_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#blogbn_cntct_form span.name-bg:before {    content: '\f007';    background-color: #60A2FF; }div#blogbn_cntct_form span.email-bg:before {    content: '\f1fa ';    background-color: #FF530B;}div#blogbn_cntct_form span.name-bg:before, div#blogbn_cntct_form span.email-bg:before, div#blogbn_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#blogbn_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#blogbn_cntct_form span.message-bg:before {    content: '\f0e0';    background-color: #20CC00;}div#blogbn_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#blogbn_cntct_form span.send-bg:before {    content: '\f1d8'; }div#blogbn_cntct_form span.send-bg:before, div#blogbn_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#blogbn_cntct_form span.clear-bg {    display: inline-block;    float: right;    margin-top: 15px;    max-width: 45%;    width: 100%;}div#blogbn_cntct_form span.clear-bg:before {    content: '\f021'; }
input.contact-form-button.contact-form-button-submit.clear-button:hover {    background-color: #E83434 !important;}div#blogbn_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="blogbn_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>

3 - Custom Contact Form Page 

• Go To Blogger Dashboard 
• Create A New Page 
• Now, Select Readers Comments “Don’t allow, hide existing”. 
• Swith HTML View
• Now Paste blew Code and Publish with Contact Us name.

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

Note : If you want to hide the default contact form, the following code must be placed before your theme's ]]> </b>:skin> tag.

• Default Form Hide Code :

  div#ContactForm1 { display: none !important;  }

You won't see the default contact form on your blogger blog site. You need to make it appear on a page with our own stylish custom contact form page using HTML & CSS & Javascript.{alertInfo}

Conclusion : In This post - I will Discus, How To Add Blogger Contact Form Page With Floating & Stylish. This design template with HTML, CSS and Javascript Code. If you have any problem adding these code.Please Comment blew on this post or Contact With Us.

Tags: 

Best Contact Form Widgets For Blogger

Contact Form Widgets For Blogger

Blogger Contact Form Page 

Floating Contact Form Page Blogger

Stylish Contact Form Widget For Blogger

Custom Pop-up Contact Form Page Html

Floating Contact Us Form Widget For Blogger Website

Create Contact Form Widget In Blogspot

How To Add Contact Us Page In Blogger