Blogger Contact Form, Contact us page for blogger, How to create contact us page in blogger, Blogging, How to add custom blogger contact form, How to add custom blogger contact page, Custom blogger contact form, Contact form for blogger html code

Blogger Contact Form | Contact Form for Blogger HTML Code

We will try our best to provide you the best and easiest way in blogging. This is very useful content for blogger, it will help you to add contact form in your blogging website.

Let us now learn how to create a custom contact form, which we will create in the easiest way.

Step1: After Login into your blogger dashboard Click on Layout and then “Add a Gadget” link on the page Sidebar.

Step2: After click on the “Add a Gadget” then down the scroll and choose the “Contact Form” Gadget.

The "Configure Contact Form" slide will open.

Step3: “Contact Form” Rename into “Contact Us”, and Click on the “Save” Button.

Now “Contact Us” Gadget/Form is ready for Contact.

Step4: Refresh You Website you will see Contact Us Form is Ready for contact.

Hide Blogger Contact Form from sidebar

Step 1: Go to “Theme”, click on the Customize Arrow, and click on the “Edit HTML” Button.

Step 2: Now the code editor will open, click anywhere inside the code area and press the Ctrl + F key for open the Search Box.

 

Step 3: Paste the following tag inside the Search Box, and Press the "Enter" key for find it.

]]></b:skin>

 Step 4: Just above the ]]></b:skin> tag, add the given below code.

#ContactForm1{display: none !important;}

Step 5: Click the "Save Template" Button on the upper right side and refresh the website, now you will see "Contact Form" is remove.

Create a Custom Blogger Contact Form in a Static Page

Finally, now we enabled the functionality of the contact form, let’s add a custom contact form in our Blogger blog.

Step1: Go to “pages” and click on the “New page” button.

Now creation form will open.

Step2: Click on HTML View and paste the code below, and also give the title of the page. 

<style type="text/css"> .widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#ee81f0;-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:#18de1c;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 #18de1c;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:#18de1c 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:#000000;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 #000000;color:#7c5d1b;border:1px solid #d6a437;background:#f22e48;background:-webkit-gradient(linear,0 0,0 100%,from(#ce29d6) to(#f22e48));background:-webkit-linear-gradient(#fed970,#f22e48);background:-moz-linear-gradient(#fed970,#f22e48);background:-ms-linear-gradient(#ce29d6,#f22e48);background:-o-linear-gradient(#fed970,#f22e48);background:linear-gradient(#fed970,#f22e48);-pie-background:linear-gradient(#fed970,#f22e48)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#f22e48;background:-webkit-gradient(linear,0 0,0 100%,from(#f22e48) to(#ce29d6));background:-webkit-linear-gradient(#f22e48,#ce29d6);background:-moz-linear-gradient(#f22e48,#ce29d6);background:-ms-linear-gradient(#f22e48,#ce29d6);background:-o-linear-gradient(#f22e48,#ce29d6);background:linear-gradient(#f22e48,#ce29d6);-pie-background:linear-gradient(#f22e48,#ce29d6)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;} </style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Contact By 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" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /></div><div class="contactf-email">E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" /></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..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" value="Type your message here..."></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>

Step3: Publish the Contact page.

Click on Page View, and View the page, now Contact page will successfully have added in your website.

I think, this is very useful content for blogger, it must have helped you to add contact form in your blogging website.