How to add contact us form in blogger?

First of all, we will have to add the default contact 

form widget in our blogger. That will enable 

the functionality of the contact form. If we don't 

add default contact form, we will not receive Emails 

from our contact forms.

#Follow this steps:

1. Sign into your blogger account.

2. Go to the Blogger Dashboard.

3. Select Layout section from the left menu.

4. Click on the Add a Gadget.

5.Click on the Blue plus Button of the default  contact 

form widget and then  save  arrangement




You have successfully added the default contact 

form Widget in your blog.

How to Hide Default Contact Form?

Why we want hide it, 

because of we want functionality  of  the default 

contact form.Not default contact form...But why 

..default contact form looking not great.

1.  Go to the “Theme section and click on the Edit 

HTML button”.

2.  Just click inside the Edit HTML codes.

3.  Press Crtl+F then small search box will appear.

4.  Copy this code: ]]></b:skin>. And paste in 

the search box.

5.  Paste the below CSS code before the this code.]]>

</b:skin>.

6.  Save your theme and Reload your blog.

7.  Default contact widget disappears.

CSS code:

div#ContactForm1 {Display: none! important;}

#How to Add Contact Form in Blogger?


Now we can create our static Contact Us page for 

blogger for applying a stylish and eye catching 

contact us form. For doing this, we must create a 

contact us page on our blog. If you already have a 

contact us page, you can use it, but if you don’t have, 

you can create it in this way.




1. Fill up the Page Title with Contact Us (or) 

Contact and Click HTML tab.

2. Now choose the Blogger Contact Form design you 

like most from the list  below. 

3. Copy the code and Paste it in your contact page as 

shown below.

4. Now go to the Page Settings  then Click Options.. 

5. Select Readers Comments “Don’t allow, hide 

existing”  Click  on done button.

6. Publish the page.


7. See the screenshot to become clearer.





Blogger Contact Us Form Design :

Code:

<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-right:auto;padding: 0px;width: 600px;} .form_name, .form_email {float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;margin-bottom: 10px;padding:10px;} .contact-form-email-message {height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;} .contact-form-button-submit {font-size:16px;height:30px;border-color: #C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;} .contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;background: #ffffff;} </style> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="form_name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30"   type="text" value="" /></div> <div class="form_email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear: both;"> </div> <div class="form_message"> Message *: <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> </div> </form> </div> </div>