You Are Here : Home » , , » How to Add/Create Contact Us Form to Static Page in Blogger

How to Add/Create Contact Us Form to Static Page in Blogger

Hey! Welcome to my blog. In my previous blogger trick I showed you how to add animated loading effect on sidebar. It was really cool effect with CSS trick. With the help of CSS you can customize your Blog or Site in any way you want. In this post I will show you How to Add Contact Form to Static Page in Blogger with the help of Blogger's official Contact Form Widget. Until now, you were familiar with the official Contact Form of Blogger. Actual Contact Form of provided by Blogger is a gadget which can be added anywhere in a widget section. But it can't be added in static page without the use of HTML and CSS. So, In this post we are going to add that Contact Form provided by Blogger in one of the Static Page. We will use CSS3 to customize the Contact Form design and layout. I will show you step by step procedure to add this beautiful Contact Form in Blogger Blog. Before getting started take a look at the image of a Contact Us Form given below.

How to Add Contact Us Form to Static Page in Blogger
Contact Page for Blogger
So! You like the above Contact Form. Well, the actual contact form look much better than the above shown image. The above image is missing many CSS effects that we will apply on our Contact Form for Blogger. I have added some amazing effects to make the Contact Form page in Blogger blog look awesome. Now without wasting more time let us proceed to the tutorial on adding Contact form on Static Page in Blogger blogs.
First of all I would like to remind you to make a Backup of your Blogger blog. It will really help on getting your Template back in case you destroy your Template with these Customizations. I am 100% sure these customizations will not destroy your Template but it is always a better idea to be one step away. After making Backup follow these easy steps to add Contact us Form in your Blogger blog.

  • First thing first, sign in to your Blogger Account.
  • After signing in click on your Blog on which you want to add this awesome contact page.
  • Now click on the Layout located in the left hand side on the Dashboard.
  • In the Layout page Click on Add a Gadget. After clicking on Add a Gadget a window will popup. Now add the contact form widget to your Blogger blog. Don't Worry about the Contact Form widget that will appear on sidebar. We will hide this widget with the help of CSS a little later in this tutorial.
  • After adding the Contact Widget click on Pages located on the sidebar.
  • Now create a Blank Page and name it Contact Form or whatever name you would like to add to Contact Form for your Blogger blog. Now Click on the HTML Mode of the post/page editor and add the HTML codes given below.
<div style="text-align: left;">
WRITE LITTLE DESCRIPTION FOR YOUR CONTACT PAGE HERE
</div>
<div style="text-align: left;">
WRITE LITTLE DESCRIPTION FOR YOUR CONTACT PAGE HERE TOO</div>
<div id="contact_wrap">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
Don't forget to replace "WRITE LITTLE DESCRIPTION FOR YOUR CONTACT PAGE HERE" with the description which you want to add in your Contact Page. The Description will appear before the starting of the contact form. Before adding the above code in the HTML area of your new page you have to delete all the Codes in the new page. Now you can add the code provided above to the HTML section of your new static page. Now Publish your newly created page.

Wait. You haven't added the CSS until now. So, in the next step you will add the CSS to make the make the Blogger Contact Form look awesome. Now follow the steps given below.
  • Now to add the CSS go to the Template page of your Blogger blog(Home > Dashboard > Template). Now click on Edit HTML which is located just below the live preview of your Blogger blog.
  • Now search for the code given below.
]]></b:skin>
To search click anywhere in the HTML and Press CTRL+F. Now write "]]></b:skin>" in the search box without quotes and press enter.
  • Now add the CSS given below just above the "]]></b:skin>" tag.
/* ========== Contact form Start ======== */

#ContactForm1_contact-form-name{
width: 300px;
height: 25px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center;
border: 1px solid #E5E5E5;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;}
#ContactForm1_contact-form-email{
width: 300px;
height: 25px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center;
border: 1px solid #E5E5E5;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;}
#ContactForm1_contact-form-email-message{
width: 300px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px;
border: 1px solid #E5E5E5;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;max-width: 400px;
line-height: 18px;
}
#ContactForm1_contact-form-name:hover, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email-message:hover{
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;}
#ContactForm1_contact-form-submit {
float: right;
color: #FFF;
cursor:pointer;
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#contact_wrap {
margin-left: 10%;
width: 350px;
}
#ContactForm1_contact-form-submit:hover {
background:#292832;
}
#ContactForm1_contact-form-submit:active {
position:relative;top:0.5px;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:42px;
}

/* ========== Contact form End ======== */
  • Now after adding the above CSS code on the specified place quickly preview your Template.
  • Now Click on Orange Save Template button.
That's All! You have just added/created Contact Form in the Static Page of your Blogger blog. Go and see how your newly created Contact Us Form looks in your blog.
If your faced any problem in adding this Contact Form to your Blogger blog than feel free to contact through Contact Form or drop a comment below. I will try to assist you.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

1 comments:

  1. Looks good Simple Contact form for blogger
    http://www.bedoitechsolutions.com/2013/12/simple-contact-form-for-blogger.html

    ReplyDelete

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top