How to add Blogger Contact Form [stylish contact form for blogger]

BlogrBD
Wednesday, November 17, 2021
0

How to add Blogger Contact Form [stylish contact form for blogger]

In this post, I will share with you - How to add Blogger Contact Form Page. Using HTML & CSS Code is very easy to create stylish contact form for blogger website. 

How to add Blogger Contact Form


A blog site must have a contact page.  Users can easily contact the admin through the contact form.  The Blogger Contact Form is very important to give the readers of the website the opportunity to contact the site admin. There are several ways to add a contact form page to a Blogger website. Adding a contact form to a Blogger blog is not that difficult.


if Blogger contact form not working However, in this post we will know how to add blogger contact page / Adding Contact form for blogger. And how to set it up  The following contact form page is created with HTML and CSS. If you want, you can post then mentioned stylish contact forms for free anywhere on the blogger site.


Table Of Content(toc)


How To Add Contact Form For Blogger Widget 

If you want to add Blogger Contact Form default. It will be automatically added on your blog sidebar. Then 

  • Go to Blogger dashboard
  • Select a blog 
  • Layout.
  • Now, Add the contact form to the blog sidebar.


Warning: Default contact form is to be placed in the sidebar of Blogger.  If you want to put it on the contact us page without putting it in the sidebar, then you can put Blogger Contact Form with HTML & CSS code.(alert-warning)


How To Add Stylish Contact Form For Blogger Page

First of all you need to add css code above ]]></b:skin> tag and Then create HTML Page for Stylish Blogger Contact Form.


Step 1 

  • Go to Blogger Dashboard 
  • Select a blog
  • Click Theme 
  • Edite HTML
  • Now, Search for ]]></b:skin> tag. 
  • Then, past CSS code above ]]></b:skin> tag.

Warning: Enter the CSS code of the contact form you want to add below(alert-warning)



Step 2

  • Go to Blogger Dashboard 
  • Select a blog
  • Click Pages
  • Now create a page name with Contact Us. 
  • Switch HTML View then Past HTML Code.

Warning: Enter the HTML code of the contact form you want to add below(alert-warning)


____________________________

More Blogger Tips And Tricks :

____________________________


Stylish Contact Form For Blogger Page


Contact Form Page Style 1 

Stylish Contact Form For Blogger Page


CSS


.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;}(code-box)

 

HTML

<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>(code-box)


Demo and If this code not Work Copy from Here : HTML/CSS Code


Contact Form Page Style 2 

Stylish Contact Form For Blogger Page


CSS

.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.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:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}(code-box)

HTML

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your 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">E-mail address *:<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">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." 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>(code-box)


Demo and If this code not Work Copy from Here : HTML/CSS Code


Contact Form Page Style 3



CSS

.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("http://trylity.blogspot.in/wp-content/uploads/2017/04/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;}(code-box)

HTML

<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><div style="float:right;margin:0;padding:0;opacity:0.1;"></div></form></div>(code-box)

DEMO and If css/html code not Work Copy from Here : HTML & CSS Code 


Contact Form Page Style 4

stylish contact form for blogger


CSS

.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;}(code-box)

HTML

<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>(code-box)

Demo And If this code not Work Copy from Here : HTML & CSS Code 


Conclusion: Today i will share with you, How to add Blogger Contact Form Page.  Blogger contact form is the default, but it is not user friendly because it is in the sidebar, so using custom HTML & CSS Code Create Stylish Contact Form For Blogger page.  If you read the entire post, you can easily add Blogger Contact Form with HTML & CSS Code on Contact Us page.




Tags : 

How do I create a custom form on Blogger?

Stylish contact form for Blogger HTML

Create Contact us page for Blogger

How to add Blogger Contact Form

Stylish Blogger Contact Form 

HTML code for Blogger pages

Free HTML contact form code

Contact us form for website

Add stylish contact form page for blogger

Blogger Tips And Tricks 


Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)