I have recived so many mails from my readers and ofently my friend also asked me how we can add contact us page in blogger?
we can add contact us form by adding widget and In a website we can easily add contact us page but in blog adding contact us page it is difficult task.
So in this blog today i am posting about
How Add Blogger Contact Form to Specific Pages.
Blogspot update new contact form for blogger and in this post we learn "How Customize Contact Form of Blogger".
Start:
First step add contact form widget to Blog
Login to Blogger > Dashborad
Click on Drop Down Menu and select Layout
Add Gadget
Click on More Gadget
Select Contact Form And give your choice Title ( like contact us) and Save it.
Now your contatc us form is ready and will display on your blog.
Hide this contact us widget form
click on template tab and first Back up your template. Then click on Edit HTML and
Press Ctrl + F and search the code shown below.
]]></b:skin>
and paste below code above it.
#ContactForm1
{
display: none;
}
* Don’t change this because it’s case-sensitive.
* Save the template.
*This display: none; will work to hide the gadget which you’ve added to layout tab.
Customize Contact Form in New Look
Click on ‘Pages’ tab on the left hand side.
Now click on New page > Blank page.
And click on HTML tab. [From Two tabs Compose and HTML].
save page title whatever you like
Then select the “Use <br> tag” option in the Line Breaks section like below.
paste below code on the box in empty HTML area.
/*---- Compatible contact Form by bestseoppc.blogspot.in -----*/
<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
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" />
<p></p>
Your 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>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<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>
</div>
</form>
Save, Publish and enjoy.
Benefits by add contact page
#contact page to your website will give a professional look
#It is Free.
#We can use this contact us page for contact , etc.
