In my previous post i shared article about
how to add official contact form widget to blogger, and as i promised that in my next article, i will come with the solution of adding contact form widget to any specific page, and here i am with the tutorial that will explain you about to add blogger official contact form to a specific page on your blog.
Also see : How to Add Official Contact Form Widget to Blogspot Blog
This is not as difficult as it sounds it can be done within a minute. so, let's move to the tutorial just follow the steps below :
Go to
blogger dashboard > Layout > Add a Gadget > More Gadgets > Choose Contact form, from the list.
Leave the title blank. and save the gadget.
Now, Create a new page, give title as you like, switch to
HTML mode then place the code given below :
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; 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>
Now, disable comments , then finally, publish the page. (
for more information, check out the screenshot below)
Now, from your blogger
dashboard go to Template > Edit HTML, then Press CTRL + F to search for
</b:skin> then paste below code just above it.
#ContactForm1
{
display: none;
}
Finally, save your template, and You're Done !