Create And Customize the Contact Us Page



- Go to your Blogger blog dashboard and click on  Pages > NEW PAGE. 

 

- Add Page name and Click on the HTML format editor button and paste the code here (Press CTRL + V to paste) and click publish.




Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="widget ContactForm" id="custom_ContactUsFromForBlogSpotBlogger"> <div class="contact-form-widget"> <p>Please fill in the form below to get in touch with us.</p><p><b>Your Name</b></p><div class="form"><form name="contact-form"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <p></p><b> Your Email <span>*</span> <br /></b> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <p></p><b> Your Message <span>*</span> <br /></b> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <p></p> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <p></p> <div style="max-width: 222px; text-align: center; width: 100%;"> <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> </div> <div class="clear"></div> <span class="widget-item-control"><span class="item-control blog-admin">fvfdvdfvdfvdfv<a class="quickedit" contactform1="" href="//www.blogger.com/rearrange?blogID=84427382819377482&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" target="configContactForm1" title="Edit"><img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"></div> </div>


– Your contact form is now live on your blog. Take a look at it.

Let’s move to our second Step

Step 2 – Customizing The Blogger “Contact Us” Gadget

Blogger Gadgets section has an official contact us gadget, but you can not use it on any of your pages. It’s only accessible through sidebars. Follow this tutorial below to customize it for using it on pages.

 – Go to your Blogger dashboard and click on the layout tab.

 – Click on add new gadget.

 – Select the contact form gadget from the menu and click on the Save button. 

Congratulations! – Your contact us page is now live. Go have a look at your contact form and test it for the first time.