How to Create A Contact Us Page for Blogger?

0

How to Create A Contact Us Page for Blogger?


 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

You can create a contact us page in Blogger. Want to know – how to add contact us page in Blogger? It is very simple and no technical expertise is required. Just follow the steps given below.


1. Go to Blogger dashboard > Select a blog > Layout


2. Add the contact form to the blog sidebar

Warning: It is required to add the contact form on your blog to work this contact form on the contact us page in Blogger. If you will not add a contact form and tick the checkbox “show contact form” then the contact form will not work.


3. Hide the contact form the blog sidebar


We will hide the contact form for Blogger sider using CSS code. You need to follow the steps to hide the contact form gadget from the blog sidebar.


A.) Go to Themes > Click on the three vertical dots > Edit HTML


B.) Search for the following code-


]]></b:skin>


Here is how to search with Blogger HTML.

How to Create A Contact Us Page for Blogger?


C.) Paste the following CSS code just above it.


div#ContactForm1{display: none !important;}


Check the screenshot on how to implement it.

How to Create A Contact Us Page for Blogger?


D.) Now, click the floppy icon to save the changes.

How to Create A Contact Us Page for Blogger?


After completing all the steps mentioned under point number three. Your contact form will be present in the sidebar but will not be visible to the blog visitor.


2. Next, navigate to Pages section


3. Click the orange ⊕ icon to create a new page. (Not a post)


4. Paste the following HTML code (contact us page template) and publish the page. It is a stylish contact form for Blogger.


 <div class="ContactForm" id="ContactForm1">
  <form name="contact-form">
    <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"></textarea></div>
    <div class="input-area">
      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /></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'] = '6433396119440945424';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6433396119440945424','//median-ui.blogspot.com/','6433396119440945424');
_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': '6433396119440945424', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Check the following screenshot-
How to Create A Contact Us Page for Blogger?



5. Open the page in your web browser and check if the page is working correctly and users can send you messages.

Go to the Pages section and click on the eye icon to view the contact us page.



Your contact us page for Blogger will look similar to this example.

How to Create A Contact Us Page for Blogger?


Done:
Let me know if you have any query regarding Blogger Contact us page.

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Have you any query or suggestions Please let us know?

Have you any query or suggestions Please let us know?

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top