Add a Contact Form to a Page

1. Go to your Blogger dashboard > Pages > click on "New page" > add Contact in the title field.

2. Select the HTML view (instead of Compose) by clicking on the Pencil button:

3. Add this code inside the content area:

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="contact-form-fields clearfix">
<div class="contact-form-field"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Name" vinput="" /></div>
<div class="contact-form-field"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Your Email (required)" vinput="" /></div>
</div>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your Message (required)" rows="5"></textarea>
<button class="contact-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">Send</button>
<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>

4. Publish the page and send a test message to make sure everything works. Note: Since this is the default Contact Form widget provided by Blogger, make sure that you're checking the email you're using for your Blogger account. Your visitors' messages will be sent to this email address from now on.

Now that your contact page has been created, you may want to add page to menu.