WordPress uses plugins to install contact forms but it isn’t possible in Blogger. It doesn’t mean adding a contact form on Blogger is laborious either. It is pretty simple and takes less than five minutes. There are two ways to add contact forms to Blogger and this blog post will help you add such a form in a step by step manner.
1. Adding the Contact Form Widget
- Login to your blog and select the blog you want to add the form by clicking on the down arrow in the top left corner.
2.Select the Layout column in the left side.
3. Decide where you are going to add the form. (In this case I am going to add the form in the sidebar-right-1)
4.Click on the “Add a Gadget” link.
5. A new window will pop up. Scroll down to the bottom of the page where you can find a widget named “Contact Form”. Click on the “+” sign to add it to your blog.
6. Click “Save”.
7. Click on “Save Arrangement” button in the top right corner of your screen. You can click preview and see how the contact form is displayed on your screen.
Congratulations you have added the contact form on your blog.
2. Adding Contact Form to pages.
What if you do not wish to view the entire contact form and just the link to contact form in a separate page? Yes, You heard me! There is a way to do this.
- Select Pages column from the left and select ‘Create a new page’.
2. Add a title to the page in the top.
3. In the top left corner you can see ‘Compose/HTML’. Select HTML.
4. Remove everything and paste the following piece of code given below.
<div dir="ltr" style="text-align: left;" trbidi="on"> <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="" /> <br /> <div> Your Email: <i>(required)</i></div> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <div> Your Message: <i>(required)</i></div> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <br /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 450px; text-align: center; width: 100%;"> <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> </div> </form> </div>
5. Click on “Publish” in the top right corner of your screen.
6. Select Layout from the left. Find out if you have enabled the pages widget. If yes click on “Edit” in the Pages widget.
7. Under “Pages to show” select your contact form in the check box and click Save.
8. Click on “Save arrangement” in the top right corner of your page.
9. If you cannot find pages widget. Enable the pages widget as you have enabled the contact form widget above and follow steps 7 and 8.
Congratulations you have added the contact form to your blog . Click on the preview button to view how the contact form looks like. You can click on the contact form to view the Contact form page.
Frequently Asked Questions
Yes it is pretty easy. Just go to the HTML code where you can find the div tags. You are free to change the content within the tags and do not make any other changes.
Just delete the page which you have created for the contact form. As a consequence the contact form will be removed.
I hope this article helped you to add a contact form to your blog. If you have queries leave them in the comments below. I wish you a successful blogging career. Happy Blogging.