Learn how to add a Contact Us form in the blog page or website in 4 easy steps

This method uses the default Blogger Contact Widget. But rather than placing it in the sidebar, we’re going to add it to a page for a much more professional look.


Step-1

Add a Contact Us gadget

• Login to your Blogger Dashboard.
• Go to the Layout page.
• In a sidebar area, click the "Add a gadget" link.
• To add the Contact Form to your widget area, click the blue + plus icon.
• In the "Configure Contact Form Widget" popup window, you can give a title or ignore it.
• Check the checkbox option “Visible – Show contact form”.
• Click the Save button to save your widget.

Step-2

Add HTML ContactForm Code in Themes

• On the Blogger Dashboard, go to the Theme page.
• Click the Edit HTML button. The theme code window will open.
• Press the [Control + F] or [Command + F] keys to open the search box in the code window.
• Search for: ]]></b:skin>
• Press the Enter key to search.
• Paste the following code right BEFORE the "]]></b:skin>" code.

div#ContactForm1 {
display: none !important;
}

• Click the Save theme button to save your changes.

Also Read This: 
+ Basics of website indexing, web crawler, page indexing and SEO process
+ Function and process of web indexing, web crawling and googlebot
+ How to Index a blog or website into google - a step by step guide

Step-3

Add HTML From Code in "Contact Us" Page

• On the Blogger Dashboard, go to the Pages page.
• Create or open your Contact Page.
• Add any content you want like a heading, image or text to the top of the page in Compose mode.
• Switch to HTML mode. Click on the HTML button.
• Paste the code below into the code window below your content.
• Click the Publish or Update button to save your changes.

COPY THIS CODE

<!-- Contact Form Code -->

<style>

.page-contact-form input,

.page-contact-form textarea {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

}

.page-contact-form input.contact-form-button.contact-form-button-submit {

padding: 10px;

background: #000; /* Button background color */

color: #fff; /* Button text color */

border: none;

}

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {

background: #777; /* Button background hover color */

color: #fff; /* Button text hover color */

}

</style>

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

<div class="form">

<form name="contact-form">

Name:<br />

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

E-mail: <span id="required">*</span><br />

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

Message: <span id="required">*</span><br />

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

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

<br />

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</form>

</div>

</div>

<!-- End Contact Form Code -->

Step-4

Set the Comment Notification Email

In blogger 'Settings >> Email', for "Comment Notification Email" tag, write your email, and save settings

Check your mail, you will receive a message to subscribe

After clicking the 'Subscribe' link, the following message will appear in the blogger dashboard.

Top Rated Articles: 
Create a blog - Add Analytics Tracking ID - Indexing in Google
Create RSS Feed - Create Email Submission Form