How to add a free Contact form Page in Blogger/Blogspot Website or Blog with Pictures
Contact Us page is one of the most basic pages every website or blog should have. In this post we will see How to add a free Contact form Page in Blogger/Blogspot Website or Blog with Pictures.
- Go to blogger dashboard
- Select the blog -> Go to Layout
- Click on Add Gadget from your sidebar
- Select Contact form from the list
- Tick the checkbox “show this widget” then the contact form will not work.
- Now we will hide Contact Form from sidebar
- From Right side blogger menu select Themes
- Click Customize à Click Edit HTML
- Search for ]]></b:skin>
- Paste below code just above it.
div#ContactForm1{display: none
!important;}
- Click Save
- Go to Blogger’s Pages menu item
- Add a new Page
- Fill out details
- From Left select HTML view
- Paste below code.
<style> .page-contact-form
input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom:
10px;} .page-contact-form input.contact-form-button.contact-form-button-submit
{padding: 10px;background: #ea6337; color: #fff;border: none;} .page-contact-form
input.contact-form-button.contact-form-button-submit:hover {background:
#d85b32;color: #fff;} </style> <div class="contact-form-widget
page-contact-form"> <div class="form"> <form
name="contact-form"> Name:<br /> <input
class="contact-form-name" id="ContactForm1_contact-form-name"
name="name" size="30" type="text"
value="" /> E-mail: <span
id="required">*</span><br /> <input
class="contact-form-email" id="ContactForm1_contact-form-email"
name="email" size="30" type="text"
value="" /> Message: <span
id="required">*</span><br /> <textarea
class="contact-form-email-message" cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit"
id="ContactForm1_contact-form-submit" type="button"
value="Submit" /> <br/> <div
class="contact-form-error-message"
id="ContactForm1_contact-form-error-message"> </div> <div
class="contact-form-success-message"
id="ContactForm1_contact-form-success-message"> </div>
</form> </div> </div>
- Click Save
Congratulations, Now you will be able to see the Contact page.
1 comment