Add Custom Contact Form on Static Page on Blogger

How To Add Custom Contact Form on Static Page on Blogger

Add Custom Contact Form on Blogger 

Why You Should Use A Blogger Contact Form..?

If You Are Still Stuck On Third Party Providers, You Should Definitely Consider Switching To The Official Custom Contact Form For Blogger Since It Has Various Unique Benefits, Like:

• Messages Are Delivered Immediately
• Reliable : It is The Official Contact Form Developed By Blogger.
• Visitors Can Easily Comment On Your Blog By Leaving Their Feedback Through Your Contact Form.
• The Contact Form Offers A Platform For Your Visitors To Ask Specific Questions.

How To Add Blogger Contact Form Gadget: 

Before Adding a Custom Contact Form To a Static page, We Need To 1st Add The Default Contact Form in The Blog Sidebar. To Add Follow Below Steps : 

• Go To Blogger Dashboard Of Your Blog > Layout.
• Click 'Add A Gadget'.
• A Window Will Open Titled 'Add A Gadget'.
• Go To More Gadget > Contact Form.
• Edit The Title If You Require.
• Click Save
• After Adding Hide Contact Form From Sidebar  or Leave it as it is.
• To Hide Go To "Template" And "Edit HTML"
• Find The Code ]]></b:skin>
• Just Above ]]></b:skin> Add This Code #ContactForm1{display: none !important;}
• And Click Save Template Button on Upper Left Side

Adding Custom Contact Form on Static Page

• Go to Page And Click on New Page, If You have Already have a Contact Us Page Just Click on Edit Link Below The Page Title.
• Once The Page Editor is opened  Fill Up Your Title And Click on The Html Tab.
• Add Your Custom Contact Form. 

Below Are The Custom Contact Form Style Code, Copy The Code Provided And Paste Code inside Your Html Box Page Editor.

Simple Contact Form

Simple Contact Form

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.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:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.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="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-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"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>