How to Create Contact Us Page for Blogger/Blogspot?

MataKucing October 13, 2021 0 Komentar

A blog should have a contact us page. It helps users to contact webmaster and admin. There are a few ways to add a contact us page in Blogger This post will help you set up a contact us page for Blogger or Blogspot. It is simple to add contact us page HTML into a page. There is a way to get a free contact form for Blogger on your blog sidebar. Let’s check out how to create a contact us page in Blogger.

Add Contact Us Page in Blogger

Blogger Gadgets section has an official contact us gadget, but you can not use it on any of your pages. It’s only accessible through sidebars. Follow this tutorial below to customize it for using it on pages.

Step 1 – Go to your Blogger dashboard and click on the layout tab.

Step 2 – Click on add new gadget.

Step 3 – Select the contact us gadget from the menu and click on the add button. Uncheck the visible option and save the gadget.

and

Step 4 – Add a new page to your blog. Name this page, “Contact Us.” In the HTML editor of this page copy and paste the following HTML contact form code:

<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">
<div class="contact-form-widget">
<p>Please fill in the form below to get in touch with us.</p>
<div class="form">
<form name="contact-form">
<p></p>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your 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>
Your 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=84427382819377482&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=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>

Important – Make sure you change the BlogID located in line 33 of the code above with your blog’s original ID. You can find your BlogSpot blogID by going to your BlogSpot blog dashboard and looking at your URL in the browser’s’ address bar. Here’s how it looks for reference: