add Contact Form in specific Blogspot Page or Post
There is no direct way to add Contact Form in BlogSpot page, as Blogger only allows to add Contact Form Gadget in Sidebar or Footer. But Blogger has gives us the freedom to edit Code, it means we can add Contact Form in Blogspot page.
Step 1 : First add Contact Form in Sidebar or Footer. Don't worry, it will be hidden. Make sure this sidebar (or may be Footer) is visible in every page. This "Contact Form" is a default feature provided by Blogger, and without doing this, the Contact Form will not work.
Step 2 : Hide the recently added Contact Form using CSS. Here is the Code.
<style>
#ContactForm1{
display: none !important;
}
</style>Step 3 : Now create a your contact page, and from HTML Mode, paste the Code below.
<form name="contact-form">
<p>Name</p>
<p><input class="Contact_Page_input" id="ContactForm1_contact-form-name" name="name" type="text" value="" /></p>
<p>Email *</p>
<p><input class="Contact_Page_input" id="ContactForm1_contact-form-email" name="email" type="text" value="" /></p>
<p>Message *</p>
<p><textarea class="Contact_Page_textarea" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></p>
<p><input class="Contact_Page_button" id="ContactForm1_contact-form-submit" type="submit" value="Send" /></p>
<div style="text-align: left; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
<style>
/* Contact_Page Class Start */
/* Common Styles */
.Contact_Page_textarea,
.Contact_Page_input,
.Contact_Page_select {
width: 100%;
appearance: none;
padding: 10px;
box-sizing: border-box;
margin: 0px;
}
/* Unique Styles */
.Contact_Page_textarea {
height: 200px;
text-align: justify;
overflow-x: hidden;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
}
.Contact_Page_input {
display: block;
}
.Contact_Page_textarea:focus,
.Contact_Page_input:focus,
.Contact_Page_select:focus {
transition: 0.1s;
outline: none;
}
.Contact_Page_button {
padding: 10;
cursor: pointer;
white-space: pre-wrap;
word-wrap: break-word;
margin: 5px;
}
</style>If you don't use CSS, it will follow default stylesheet. But you can make it more beautiful.
