Contact form is an indispensable thing for each and every website or blogger bog owners to communicate with their online visitors/customers. Generally, we provide our email address, phone numbers and office address publically to the contact us page so that users of our blogger blog send their feedback and messages. It may result unnecessary messages and spams in our inbox.
Blogger has now launched a simple contact form widget for its blog users to get instant message from live visitors. In the default blogger contact form, visitors have to provide only three information viz. Name, Email and Message. Out of these three info only two are compulsorily required for sending message and the first one i.e. Name is optional. So, blog owner need not require to show their Email Address publicly.
How to Add Contact Form widget to Blogger Blog
First of all we will add Blogger default contact form widget on the sidebar of our blog by following these simple steps:
Step-1: Login to your blogger account (www.blogger.com) and go to the Layout tab of any particular blog.
Step-2: Click on Add a Gadget text link from the sidebar of the layout window. It will open a pop-up window.
Step-3: From More Gadgets option from the left menu, click on Contact Form and after giving an appropriate title (Contact Me/Us or Send Your Feedback or Email Your Message) save it. You will see a live Blogger Default Form on the sidebar of your blog. You may also drag the Form widget to anywhere including footer and blog body as you want it to appear.
How to Add SWT Customized Blogger Contact Form
Now, we will customize the blogger default contact form so that it looks professional and pretty dynamic with some HTML and CSS3 codes:
Step-4: Navigate the Template Tab of your blog and click on Edit HTML text button.
Step-5: Click on Jump to widget drop-down menu of html editor and select ContactForm1 to jump there.
Step-6: Click on the black arrow corresponding to the <b:widget id='ContactForm1' line to expand the codes. After expanding ,you will see <b:includable id='main'>…</b:includable> line there. Now, replace that line with the following bunch of html codes very carefully.
<b:includable id='main'>
<b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if>
<!-- Custom Contact Form By Showeblogin (www.SuperWebTricks.com) START -->
<div class='swt-contact-form-widget'>
<form name='contact-form'><p/>
<!-- SWT Customized ContactFormName -->
<data:contactFormNameMsg/><br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='Enter Your Full Name' size='35' type='text' value=''/><p/>
<!-- SWT Customized ContactFormEmail -->
<data:contactFormEmailMsg/>
<span style='color: #ff0000; font-weight: bolder;'>(Required)</span><br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' placeholder='Enter Your Valid Email ID' size='35' type='text' value=''/><p/>
<!-- SWT Customized ContactFormMessage -->
<data:contactFormMessageMsg/>
<span style='color: #ff0000; font-weight: bolder;'>(Required)</span><br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' placeholder='Write Your Message here...' rows='7'/><p/>
<!-- SWT Customized ContactFormButton -->
<input class='contact-form-button' expr:id='data:widget.instanceId + "_contact-form-submit"' style='cursor: pointer;' type='button' value='Submit'/>
<input class='contact-form-button' type='reset' value='Clear'/><a href='http://www.superwebtricks.com/'>
<img alt='SWT' height='24' src='http://4.bp.blogspot.com/-sQftq6vkCXs/VHX4hM30YKI/AAAAAAAAAFM/9FLc7AqDfww/s1600/swt_Logo.png' style='float:right' title='Thanks to Showeblogin' width='24'/></a><p/>
<!-- SWT Customized ContactFormValidator -->
<div id='ContactFormValidator' style='text-align: center; max-width: 240px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/></div>
</form>
</div>
<!-- SWT Customized ContactFormStyle -->
<style type='text/css'>.widget.ContactForm * { max-width: 100%; }.contact-form-name { background: #FFF url(http://3.bp.blogspot.com/-FZnzFroziII/VHXv_jgFE6I/AAAAAAAAAEw/eXx8DQ41JHA/s1600/swt_Man.png) no-repeat 2px 1px; padding: 0 25px; } .contact-form-email { background: #FFF url(http://2.bp.blogspot.com/-G0S0Aw-RLxo/VHXwJmDchmI/AAAAAAAAAE8/meKBeK9a0FU/s1600/swt_Email.png) no-repeat 1px; padding: 0 28px; } </style>
<!-- Custom Contact Form By Showeblogin ( Tutorial at http://www.superwebtricks.com/?p=720) END -->
</b:includable>
Step-7: Now, click on Save template button and enjoy SWT customized Form for your blogger blog.
How to use Blogger Contact Form in a static Page (Contact Us)
Many blogger prefers to create a separate webpage for contact like other websites. You may use blogger default contact form in any post/article page or stand-alone i.e. static page of your blog. There is no need to remove/delete Blogger Contact Form widget from your blog from sidebar or elsewhere you have already added/showed up.
Just follow these simple process and the blogger contact form will automatically added to your contact page:
Step-8: First of all create a Static page from Pages Tab. It’s simple and similar to creating a post page. You may give the page title as Contact Us. Now, click on the page settings from right sidebar and select Don’t allow readers comment under setting options and click done.
Go to the HTML mode of that page and paste these codes.
<style type="text/css">
/* SWT Customized ContactFormCSS
----------------------------------------------- */
.swt-contact-form-widget{
max-width: 100%;
}
.widget.ContactForm {
display: block;
}
#ContactForm1 h2, .widget.ContactForm .title, .post-footer, .blog-pager, .blog-feeds {
display: none;
/* Tutorial at http://www.superwebtricks.com/?p=720 */}</style>
Now, switch again to the compose mode and write anything you want to appear on Contact Us page and then click on Publish button.
Step-9: Go to the Layout Tab of your blog and drag the Contact Form widget from sidebar and drop it just below the Blog Posts widget as shown in the screenshot.
Step-10: Navigate the Template Tab menu from the left sidebar of your blogger blog dashboard. Click on Edit HTML button to open template editor.
Now, click anywhere in the template editor window and press Ctrl+F so that a search box will appear at the right top corner for searching the html codes. Find the closing tag ]]></b:skin> . Finally, copy the following CSS codes and paste it just before/above ]]></b:skin> and save the template.
/* SWT Customized ContactFormCSS
----------------------------------------------- */
.widget.ContactForm {
display: none;
}
Visit your live blog and the contact form has gone from the sidebar and appears only on Contact Us page.
Some FAQs related to Blogger Contact Form:
Problem-1: I am not receiving message through blogger contact form?
Suggested Solution: Please remove the blogger contact form and its associated codes (if any in case of customization) from your blog. Now, add blogger default form again by following the above mentioned step-1 to step-3.
It may be the case, your blogger account login Email address is different from the Email ID you have provided in your blogger profile i.e. Email address for readers to contact you under Identity heading. Therefore, you have to edit your blogger profile to receive the message through blogger contact form.
Problem-2: How to reply messages/comments received through Blogger Contact Form?
Suggested Solution: You can’t reply the message from the received mail box itself by using reply button. This is because you have received the message from no-reply@blogger.com which is a notification mail id of blogger itself.
Accordingly, you have to send your reply to the senders’ Email address which has already been received by you in the message.
Problem-3: There is no Email ID of sender in received messages through blogger contact form?
Suggested Solution: Without providing an Email ID, no one can send the message through contact form. However, if you are not seeing any e-mail address in the received message then do the following steps to get senders email.
Click on the little black drop-down arrow from the mail header as shown in this screenshot to see details.
Now, you will see the Name as well as the senders Email address under reply-to field.
Problem-4: Why Blogger form is not working on Internet Explorer?
Suggested Solution: Blogger form may not be compatible with Internet Explorer. You may see sending message after pressing send button but it will not send successfully to your email associated with your blogger blog account. Thus, you may use Compatibility View Settings in Internet Explorer.