Facebook SDK

 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.

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

Step 2 – Click on add new gadget.


Step 3 – Select the contact us gadget from the menu and click on the add button. Uncheck the visible option and save the gadget.


Step 4 – Add a new page to your blog. Name this page, “Contact Us.” In the HTML editor of this page copy and paste the following HTML contact form 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
32
33
34
35
36
37
38
39
<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">
<div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your Email
<span style="font-weight: bolder;">*</span>
<br>
<input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
<p></p>
Your Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
<p></p>
<input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit">
<img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
</a>
</span>
</span>
<div class="clear"></div>
</div>

Important – Make sure you change the BlogID located in line 33 of the code above with your blog’s original ID. You can find your BlogSpot blogID by going to your BlogSpot blog dashboard and looking at your URL in the browser’s’ address bar. Here’s how it looks for reference:

Turn off the comments for your contact us page and make sure you add it to your menu so that it is easily accessible. Congratulations! – Your contact us page is now live. Go have a look at your contact form and test it for the first time. I hope this tutorial was helpful to you. You would also like to read about the best chrome extensions for bloggers and the best blogging tools. Share this post to help others and also leave a comment below sharing your thoughts.

1 Comments

  1. fun88 Casino: $5 Free Bonus Code - Vie Casino
    Play free slots, table games, and 10cric live dealer games online at sbobet ทางเข้า fun88. Sign-up today and claim your Welcome Bonus. fun88 soikeotot

    ReplyDelete

Post a Comment

Previous Post Next Post