Beranda
Blogger
Blogger Widgets

How to Add Contact Us Page in Blogger

Hello Guys, welcome to AS Themes World. In this post, I'm going to guide you step by step on adding the contact page on the blogger. So, follow the easy steps and learn more about how to add a contact page in the Blogger.

The first thing you have to do is get your Blog Id code, the way is very easy on the blogger page look at the address bar then you will find examples of links like below: 


https://www.blogger.com/blog/themes/1234567890000000000

The marked part is your blog id code, please copy it because this code will be needed for creating Contact Us page.

Steps to Create Contact Us Page

1. First of all create a new page and switch to HTML mode then copy and paste the code below into your page content:

<div id='ContactForm153' class='ContactForm'>
  <div class="contact-form-widget">
    <div class="form">
      <form name="contact-form">
        <input id="ContactForm153_contact-form-name" class="contact-form-name" name="name" placeholder="Name" type="text" value="">
        <input id="ContactForm153_contact-form-email" class="contact-form-email" name="email" placeholder="Email *" type="text" value="">
        <textarea id="ContactForm153_contact-form-email-message" class="contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
        <input id="ContactForm153_contact-form-submit" class="contact-form-button contact-form-button-submit" type="button" value="Send">
        <div class="contact-form-message-box">
          <p id="ContactForm153_contact-form-error-message" class="contact-form-error-message"></p>
          <p id="ContactForm153_contact-form-success-message" class="contact-form-success-message"></p>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  (function(){var Bid="1234567890000000000";document.addEventListener("DOMContentLoaded",function(){_WidgetManager._RegisterWidget("_ContactFormView",new _WidgetInfo("ContactForm153","sidenav_section",document.getElementById("ContactForm153"),{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:Bid,contactFormNameMsg:"Name",contactFormEmailMsg:"Email",contactFormMessageMsg:"Message",contactFormSendMsg:"Send",submitUrl:"https://www.blogger.com/contact-form.do"},"displayModeFull"))})})();
</script>

Change the part marked in the code above with your blog id.

Information:
  • [1234567890000000000]: Your blog id, there are 1 times writing in the code above.
  • [Your Name, Email, Message]: Input title in the contact form.
  • [Submit]: Text on submit button.
  • [Sending ...]: Text when sending messages
  • [Your message has been sent. ]: Message notification text sent.
  • [Message could not be sent. Please try again later. ]: The message notification text was not sent.
  • [A valid email address is required. ]: Invalid email notification text.
  • [A Message field cannot be empty. ]: Text notification when message body is blank.

2. Now Publish the page.

If something isn't clear or have any question, let us know in the comments

Posting Komentar