<h1>How to add contact form to blogger blog</h1>

You want to add contact form to your blogger blog, right? It is very easy. Firstly, what is contact form used for? Contact form is used by the administrator of a blog/website to gather feedback from visitors about posts and the blog/website. It is also used by visitors to ask question(s) and to enquire information about a tutorial or product on the blog/website or about a service rendered by the administrator.

Add contact form to your blogger blog

1. Sign in to your blogger dashboard.
2. Click on layout.
3. Click on "Add gadget" and choose contact us form,
4. Save it.

Add style to the contact form

On your blogger dashboard, click on theme > click on Edit HTML > press Ctrl F and search for ]]> on the search box that appear at the bottom left side of the page > Paste the below code before ]]>

/* Contact Form Container www.newsentertips.blogspot.com*/<br /> .contact-form-widget {<br /> width: 500px;<br /> max-width: 100%;<br /> margin: 0 auto;<br /> padding: 10px;<br /> background: #F8F8F8;<br /> color: #000;<br /> border: 1px solid #C1C1C1;<br /> box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);<br /> border-radius: 10px;<br /> }<br /> /* Fields and submit button */<br /> .contact-form-name, .contact-form-email, .contact-form-email-message {<br /> width: 100%;<br /> max-width: 100%;<br /> margin-bottom: 10px;<br /> }<br /> /* Submit button style */<br /> .contact-form-button-submit {<br /> border-color: #C1C1C1;<br /> background: #E3E3E3;<br /> color: #585858;<br /> width: 20%;<br /> max-width: 20%;<br /> margin-bottom: 10px;<br /> }<br /> /* Submit button on mouseover www.bloggertrix.com */<br /> .contact-form-button-submit:hover{<br /> background: #4C8EF9;<br /> color: #ffffff;<br /> border: 1px solid #FAFAFA;<br /> }
Save your theme.

Add Contact Form to static page

Click on theme on your blogger dashboard > Click on Edit HTML > Press Ctrl F and search for id="ContactForm" in the search box that appears at the bottom left side of the page > You will see a code like this:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'><br /> <b:includable id='main'>
<b:if cond='data:title != &quot;& quot;'><br /> <h2 class='title'><data:title/></h2></b:if><br /> <div class='contact- form-widget'><div class='form'><form name='contact-form'><p/><data:contactFormNameMsg /><br /> <br/><br /> <input class='contact- form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/><br /> <p/><data:contactFormEmailMsg/ > <span style='font-weight: bolder;'>*</span><br /> <br/><br /> <input class='contact- form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/><br /> <p/><data:contactFormMessage Msg/> <span style='font-weight: bolder;'>*</span><br /> <br/><br /> <textarea class='contact- form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/></textarea><br /> <p/><input class='contact- form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/><br /> <p/><div style='text-align: center; max-width: 222px; width: 100%'><p class='contact- form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/><p class='contact- form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/></div></form></div></div><b:include name='quickedit'/>
</b:includable><br /> </b:widget>
4. Remove the code I typed in blue from your theme HTML code.
5. Save your theme.

Now, create a new page. To do this, click on "pages" on your blogger dashboard, click on new page and create your page. You can just name the page Contact Form. You can also use your "Contact Us" page for this.

Now, click on Html beside compose to edit your page. Copy and paste the below code into it:

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form">Name<br /><br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br /> <br /><br /> E-mail *<br /><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br /> Message *<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 /> <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></div>
Publish your page.

Congratulation, you have just added contact form to your blogger blog. To add the page to your menu bar, copy the page link and connect it with your menu bar.

As I have said earlier, any message sent on your contact form will be delivered to the email you used to create you blog. Thank you for reading and make sure your share with your friends. Thank you.