Blogger is very robust and easy to operate the CMS platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there come some limitations, By default, you can't create a Contact us page, you have to either you have to use any third-party plugin or have to tweak blogger's official contact widget so that it can work on static pages. Creating a separate page for contact purposes is very professional and also makes your blog clean by hiding unnecessary widgets and plugins So, Let's move further and see How to create Contact Us page in Blogger

First Step (Important)

Before following the below tutorial we recommend you to install the contact form widget in your blog, it is a very easy process and can be done in minutes, with a simple click. We have published a tutorial earlier, so you won't face any difficulties.

Hiding The widget ( Adding CSS

Before Editing, we recommend you to make a backup of your template so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to log in to your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

<div class="contact-form"><div class="widget ContactForm" data-version="2" id="ContactForm1">

<div class="widget-title">

<h3 class="title">Contact Form</h3>


<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="">

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email*" size="30" type="text" value="">

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message*" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">

<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>






Congrats !! You have made it. now you have learned that How to create Contact Us page in
Blogger Visit your blog and check the awesome widget live in action, This is the Part-III of the
Tutorial, Hope you liked this tutorial, if you enjoyed then please share it with your friends,
we are working hard to develop more such awesome widgets please stay tuned with Us. 

Post a Comment

Previous Post Next Post