Saturday, 15 February 2014

How to Embed Blogger's Contact Form Widget In Post/Page?

Every blog should have a contact page so that your visitors can interact with you directly and can gives you lot of suggestions to improve your site. Sometimes ago, Blogger introduces Contact Form Widget but this widget can only be added to Blog's sidebar so what to do if you want to create a contact page using Blogger Contact form Widget? Yes you heard it right you can embed blogger contact form widget to any specific page or post. So that you can get directly responses from your readers and visitors. This enables you to make your services better for them. So today I am going to tell you an amazing way to embed blogger Contact Form widget to 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. 
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>
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 want to 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!

Final Words:


This is an easy and very useful tutorial for all the blogger. I recommend you to create a contact page to interact with your audience. Now It's your turn to share this post with your friends and share your views in comment box till then Peace, Blessings and Happy Contacting.

No comments:

Post a Comment