Easy Steps to Create a Contact Page on Blogger

Easy steps to set up a contact page on blogger

Author to user relationship is one of the basic skill to be made of in running a blog. It is important you give your blog users as an author a free medium to contact you easily either for feedback, questions, suggestions or contributions.

Due to some questions that we've been recieving about how to create a perfect contact page on blogger. Fetney.com has brought to you the easy steps to follow on getting through.

This method has undergone series of reviews and test before publishing, so we are assuring you 100% working issue-free contact page setup.

See Also:   How to check broken links in blog and overcome them

Gently follow the steps below and have your contact page set up page on the go

1. Get your blog ID: Don't be worried about this, for it's as simple as nothing to get.

Login to your blogger dashboard, in the address bar you will find a URL roughly in form of this: https://www.blogger.com/blog/posts/1234567890123456789 as shown below.

Copy the numbers in the highlighted area to your clipboard for you are going to make use of it.

2. Create a new page: I assume you can do this, create a page and give a title "Contact Us" or any of your wish.

3. Copy all the codes below and paste it directly into the new page created.

Note: Make sure you are in the HTML mode as shown below.

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'><b>Your Name</b></label><input class='contact-form-name' id='ContactForm1_contact-form-name' placeholder='Enter your name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'><b>Your Email</b><span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email'placeholder='e.g. youremail@gmail.com' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'><b>What did you want to tell us?</b></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message'placeholder='Write something....' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></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'] = '1234567890123456789';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d12345678901234567890','//www.longtechy.blogspot.com/','1234567890123456789');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Delivering message...', 'contactFormMessageSentMsg': 'Thanks for contacting us. Your message has been sent successfully.', 'contactFormMessageNotSentMsg': 'Message could not be sent due to an error. Please try again later.', 'contactFormInvalidEmailMsg': 'Please enter a valid email address.', 'contactFormEmptyMessageMsg': 'Message field shoud not be empty.', 'title': 'Contact Form', 'blogId': '1234567890123456789', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

After the successful install of this codes, your contact page should be ready and 100% working! You can check EXAMPLE

Changes

Change: 1234567890123456789 with your blog ID. You have to do this in four areas in the HTML codes, please take note.

See also: Fetch More Visitors to Your Blog Taking These Few Steps