Back to Top

5 Create Simple Contact Us Page On Your Blog/ Website

Bloggers often forget this utility which has a seamless importance of its own. A simple Contact Us form! This form help visitors in direct interaction with authors privately and make communication personal. One more important thing about contact us form is a legal aspect of your website. To be a professional Blogger/ Website owner, having a Contact Us form is necessary. Contact Us form keep discussion private which otherwise many times visitors hesitate to do.

Create a Contact Us form on your Blogger Blog using their own widget.

1. Using Blogger "Contact Us" Widget on Sidebars.

Blogger recently has upgraded a lot of things and one of them include a Contact US Widget. Simply Go to Blogger Layout Section and Click on Add a Gadget.

Select "More Gadgets" and you must get "Contact Us New!" widget. Just Add it. Select desired changes and Save.
New Contact Us widget on Blogger

2. How to create Contact Us Page on Static Pages in Blogger?

Hide "Contact Us" Widget to use it on Static Page

If you wish to follow Method 2, then you need to hide above widget (Step 1) from the Blogger's sidebar so as to activate it in the Static pages using following steps.

a. Go to Edit HTML tab in your Layout Section, Insert below codes lines above ]]></b:skin> code.

display: none ! important;
Save Template.

b. Go to Blogger's Dashboard, and Select your Blog

On the left side pan, select Pages and Create Blank Page

Create a Static Page

Switch to its HTML mode and choose "Options" tab and select "Use <br> tag" option in the Line Breaks Section.

Edit Page Properties

Now in Edit HTML tab insert below lines of codes.
<form name="contact-form">
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
Write Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<div style="text-align: center; max-width: 222px; 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>
You can change the Bolt highlighted text to your own words.  Click Save.

3. Codes through the third party Java Scripts such as Foxyform

Foxyform.com provides a simplest Javascript code with Antispam protection to use on your pages. Select the desired options, enter your email credentials, insert Antispam verification and hit Create Formula.

java script using Foryform for Contact Us Page

A code box will appear, Just copy these codes and use them in your HTML pages (Layout Section > Add a Gadget> and Save the page. This will give desired output.

Foxyform Generated codes for Contact us page
Related Posts Plugin for WordPress, Blogger...