Create Contact Page Using Blogger Contact Form

Step#1

■ Open Blog Dashboard
■ Open Layout → Click on sidebar blank widget box (Displayed in figure below)

■ Then open More Gadgets option and add Contact Form Widgets in your Blog template.

■ Now hit Save button.

Step#2

■ Open Blog Dasboard
■ Open Template → Html Editor
■ Now expand Contact Form Widget

■ Now erase the Highlighted syntax code.

■ Open Pages in your Blogger Dashboard.

■ Now Go to New page then open Blank Page.

■ Now simply add the below code in your HTML page (it is in right side of Compose)

HTML

<div>
We sincerely thank you for reaching out to us. We accept all sorts of valuable suggestions , feedbacks and your views about our blog.<<br />
<br />
Kindly fill the form below and contact us</div>
<div class="contact-form" id="contact-form-1">
<div>
<form name="contact-form">
Your Name : </form>
</div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 650px; text-align: center; width: 120%;">
<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>
</div>
</div>

Now hit Publish button and You are done

DESIGNER