Complete Guide To Create Professional Contact Form In Blogger

Blogger blogspot is getting SEO friendly day by day through its awesome updates and with the recent update, you can create contact forms easily just by adding a widget in blogger. We can also easily create custom contact forms just by adding CSS and HTML code in blogger template or page.

After creating a website your task is not over. We have to provide proper navigation settings so user can navigate properly, agree ? The UI and UX should be very good. SEO is the thing which can't be neglect. So, today we will see 2 things in this post,

• Adding Contact Form Widget For Blogspot (default blogger template)
• Adding professional contact us page in blogger (custom template)

If you are using default blogger template then you have to do almost nothing because blogger has give a contact us widget for blogspot user. So, you can simple add it. We'll see step by step process in this post and if you are using custom template like SolveMyhow then also you have to do noting except copy and paste ;)

First we will see adding a default contact form widget for blogger's using default blogger template. Just follow the step by step guide written below,

Adding Contact Form Widget In Blogger:

Adding default contact us page in blogger is very easy. Just follow the simple steps written below, 

Step 1 :- Go to blogger layout.

Step 2 :- Click on "Add a Gadget".
Now look for "add a gadget" option and you will find it in the right hand side and at the footer. Just select wherever you want to install contact form.

PS. best place is footer (recommended).

Step 3 :- Select contact form and click on "+" to add it.
After clicking on "add a gadget" a new window will popup. In that just go to "more gadget" and first option will be of  "contact form widget". Simple click on "+" to add it. Look at the snap shot below,

That's it. Just save all the arrangement once and open your blog. You will find a simple contact us form at the footer of your blog.

Must Read :-

• Complete Guide To Add Author Bio Box/Widget In Blogger (With Pictures)
• How To Set Custom Robots Header Tags In Blogger

Create Custom Professional Contact Form In Blogger:

Now if you are using custom blogger template then you have to add html and css code in the blank page. Just follow the simple steps written below, 

Also See :- Top 10 Sites To Learn Coding / Programming Online

Step 1 :- Hide the default blogger contact form.
If you have added the default contact us widget then you have to hide it. Just to go Template >> Edit HTML.

Then press CTRL + F  and paste "]]></b:skin>". Now you need to paste the below mentioned code just above "]]></b:skin>".

div#ContactForm1 { display: none !important; }

PS. take back of your blogger blog and template

Step 2 :- Go to blogger >> pages.
Now you need to add new page. Just click on "new page" and add it. Name it as "contact us" or "contact me" in the title of the page.

Step 3 :- Change page setting "options".
Just select page setting "options" and change it as exactly shown in the snap shot below,

This block users to comment on contact us form.

Step 4 :- Now switch to HTML mode.
From compose mode switch to HTML mode and press CTRL + A and delete everything.

Step 5 :- Paste the "responsive contact us form code" mentioned below in HTML editor.

---

<div dir="ltr" style="text-align: left;" trbidi="on">
Do you have any query or do you want to give any suggestion/feedback about SolveMyHow ? Then, please drop me a mail, I'll get back to you as soon as possible :)
<br />
<style>
.SMH_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.SMH_blogger_cntct_form_wrap:after, .SMH_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#SMH_blogger_cntct_form {
  padding: 20px 20px 10px 20px;
  background: #FA540B;
  border-radius: 2px;
  margin: 20px auto 20px;
  color: #FFF;
  font-size: 16px;
  max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #FA540B;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>
<br />
<br />
<div class="SMH_blogger_cntct_form_wrap">
<div id="SMH_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 260px; text-align: center; width: 100%;">
<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>
<br />
</div>
</div>
</div>

---

Change green highlighted part and you can write your own message. You can also change "send" button styles by making some change in CSS part.

Step 6 :- Publish the page.
Just save once and click on publish. Now open your contact us page and send message/query to yourself to see whether it is working or not.

That's it. So, this was the complete guide to create professional contact form in blogger blog. Hope you found this tutorial informative and helpful. If you have any question, you can ping me in the comments below. You can also subscribe for SolveMyHow newsletter to get blogger, SEO and make money online tips right into your inbox.

Found this tutorial interesting ? Why not help us by shooting those social media button below, after all "sharing is caring" right !


Also See :-

How To Install Google Analytics Property In Blogger

How To Submit Blogger Sitemap To Google Webmaster Tools

How to Enable and Add Custom Robots.txt File in Blogger

How To Submit Blogger Sitemap To Bing and Yahoo

How to Setup Custom Domain in Blogger with BigRock

Top 10 Richest Bloggers In The World