Welcome back to another Blogger Tutorial which talks about how to create Contact us Page by adding Contact Form Widget to blogger.
Follow the steps mentioned below for adding Contact Form widget in Blogger blog.
Step 1: Add Contact Form Widget to Blogger
- Log in to your Blogger Dashboard and click on Layout.
- Go to Sidebar and click on Add a Gadget link on the right side.
- Now click More Gadgets and look for Contact Form Widget, click on Add (+) icon to add that gadget. Then click the save button.
Now, you will see that Blogger Contact form has been added to your sidebar. If you want to hide it, you can do so in the final step.
Step 2: Create Contact Us page for blogger
- Go to Pages on the left side and create a new page.
- Switch to HTML and paste the following Contact Form HTML code in the post editor.
<div id=”custom_ContactForm1″ class=”widget ContactForm”>
<div class=”contact-form-widget”>
<p>Get in touch with us by filling out the form below.</p>
<div class=”form”>
<form name=”contact-form”>
<p></p>
Name
<br>
<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>
<p></p>
Email
<span style=”font-weight: bolder;”>*</span>
<br>
<input type=”text” value=”” size=”30″ name=”email” id=”ContactForm1_contact-form-email” class=”contact-form-email”>
<p></p>
Message
<span style=”font-weight: bolder;”>*</span>
<br>
<textarea rows=”5″ name=”email-message” id=”ContactForm1_contact-form-email-message” cols=”25″ class=”contact-form-email-message”></textarea>
<p></p>
<input type=”button” value=”Send” id=”ContactForm1_contact-form-submit” class=”contact-form-button contact-form-button-submit”>
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p id=”ContactForm1_contact-form-error-message” class=”contact-form-error-message”></p>
<p id=”ContactForm1_contact-form-success-message” class=”contact-form-success-message”></p>
</div>
</form>
</div>
</div>
<div class=”clear”></div>
<span class=”widget-item-control”>
<span class=”item-control blog-admin”>
<a title=”Edit” target=”configContactForm1″ onclick=”return _WidgetManager._PopupConfig(document.getElementById(“ContactForm1″));”
href=”//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm& widgetId=ContactForm1&action=editWidget§ionId=sidebar-right-1″ class=”quickedit”>
<img width=”18″ height=”18″ src=”//img1.blogblog.com/img/icon18_wrench_allbkg.png” alt=””>
</a>
</span>
</span>
<div class=”clear”></div>
</div>
- Add Title such as Contact Us and change the Page setting as shown below.
- Now, Finally Click on the publish button.
You have successfully created a Contact Us page for blogger.
Step 3: Adding above created Contact Us page at the navigation menu.
- Go to Theme/Template and Click on Edit HTML.
- Now you need to paste your Contact us Page URL in the Theme as shown below. You can view your Contact page URL by clicking on View link of Contact US Page in the Pages Section.
- Click on Save theme button. Hide the warning if appears.
Step 4: Hide Contact Form Widget from Blogger Sidebar
- Now we need to Edit the Blogger Theme. Go to Theme/Template and click on Edit HTML.
- Place your cursor inside the code and press CTRL+F using the keyboard. Search for ]]></b:skin> in the search bar.
- Paste the below given code just above the ]]></b:skin> .
div#ContactForm1 {
display: none !important;
}
Click on Save theme button. Contact Form is hidden from the Blogger Sidebar.
If you have any problem in adding the Contact Form to your Blogger blog, feel free to reach us by leaving a comment below.
nice artical