How To Embed Blogger's Contact Form In Any Post/Page

In one of my previous tutorials, I taught you guys how to add Blogger's Contact Form to your blog's sidebar.

But, as it turns out, adding a contact form to the sidebar was not a good choice after all. Adding it to the sidebar means adding it to every page of our blog!

Why bother our visitors with that contact form on each and every page they visit!?

So, in this tutorial, I will teach you how to embed that exact same contact form in ANY post or page!

Live Demo:

Name:

Email *

Message *

How To Embed The Contact Form

1. First, we have to add Blogger's contact form to the sidebar. Don't worry though, we will hide it later. Go to your blogger dashboard >> Layout >> Add a Gadget >> Contact Form. [this tutorial will help you out.]

2. Once you have added the widget to your blog's sidebar, copy the following code:

<form name='contact-form'>
<div>Name: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email *</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Message *</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>

Code Credits: BW

3. Paste it wherever you want the Contact Form to appear. Example: When you are in the "editor" mode of your post/page, you can easily switch to the HTML mode and paste the code there.

The advantage of adding this code is that you can edit it as you want! Suppose you wanna display some different text instead of "Name" or "Email". Suppose you wanna add images. Suppose you wanna style the contact form using CSS!

All this is possible as long as you have a basic working knowledge of HTML and/or CSS :)

Okay, so we have successfully embedded the contact form! Now the only thing left is to hide the Contact Form widget from the sidebar! Follow these simple steps:

How To Hide The Sidebar Widget

1. Go to your blogger dashboard >> Template >> Edit HTML

2. Find the following piece of code:

]]></b:skin>

3. Paste the following code directly above/before ]]></b:skin>

#ContactForm1{display: none !important;}

4. Hit Save template and you're done!

It was THAT simple! The Contact Form widget is hidden but it is still registered!
Important: The widget will still appear in your Layout tab. Make sure you don't remove it from there!