How to Make a Your Own Contact Us Page on Blogger

Hello readers, here is another tutorial for optimizing you Blogger website. This time I will teach you how to make your own Contact Us page for your blogging site.

What is Contact Us page?

According to Majestic Form, they define a contact page/form as: "A contact form is a user input form that allows website or app users to type information that is viewable by the website or apps operators." Read More Basically, a contact us is a page where your posible readers or clients can communicate with you directly, it's just like email but modified in a way that the sender will be able to easily send emails. 

Having a contact us page can be helpful specially if you own a shopping , research, services or information website that would sometimes require users or readers to swnd you a communucation letter to purchase, access, or claim any of your personal things.

How to Make a Contact Us page on Blogger easily?

Making a contact us page in blogger is quite easy, compared to making a Sitemap.

Requirements:

Web Browser (Chrome, Mozilla, Opera MiniInternet ConnectionLaptop, PC or SmartphoneBlogger AccountBasic Knowledge

Note: In this tutorial, I will be demonstrating the steps using a mobile phone.

Instructions

1. Open your Google Chrome, in my case I am using Brave Browser.

2. Login into your Blogger account.

3. Once you were logged-in, create a New Page by going "Hamburger Menu > Page > then Click the + button"

see screenshot

4. Write "Contact Us" as your Title

5. Click the Pen Icon on the upper left side corner to switch your canvas to "HTML View"

Note: If there are pre-coded text, just delete it.

6. Copy and Paste the following code:

HTML

<div class="ContactForm" id="ContactForm1">
  <form name="contact-form">
    <div class="input-area">Do you have any suggestions? We are happy to hear it from you.&nbsp;</div><div class="input-area"><label><br /></label></div><div class="input-area">
      <label>Name</label>
      <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
    </div>
    <div class="input-area">
      <label>Email <span>*</span></label>
      <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
    </div>
    <div class="input-area">
      <label>Message <span>*</span></label>
      <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    </div>
    <div class="input-area">
      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
    </div><div class="input-area"><br /></div><div class="input-area"><i><span style="font-size: xx-small;">If you want to donate, you can send me an email, and I will be very pleased to send you my wallet address. Thanks!</span></i></div>
    <div class="notif-area">
      <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>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1812780484383629520';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1812780484383629520','//www.sharedbyrey.cf/','1812780484383629520');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1812780484383629520', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); /*]]>*/</script 

7. After pasting, you are now ready to publish it!

That's it! If you find this post very helpful, please don't hesitate to share it to your friends.

Thanks!