How to Create Contact Us (Contact Form) Page in Blogger? : If you are a blogger and using blogger.com as platform for your blog then this blog post is very helpful for you to know how to create a Contact Us or Contact Form page in blogger. Read full content it will take only 2 mins to read it.
Step 1: First of all, If you are using a third party theme just go on Layout (in left side menu bar) you can see add a gadget option in right side sidebar as shown in below image.
Step 2 : You can see “Contact Form” in gadget section click on Plus sign to add it.
Step 3: Now we have make it hide because we don’t want to use it in Side bar, We want to use it on Contact Us page.
- Now go on menu Below Layout , Click on Theme.
- In theme there is option to edit HTML.
- Once you are in HTML area you just press ctrl+f.
- In search box just copy ]]></b:skin> code and paste it & press enter.
- Just below this code paste code which is mentioned below. As mention in below image.
Code : div#ContactForm1 {
display: none !important;
}
Step 4 : Now in the HTML area press ctrl + f and do below steps.
- In the search box paste </head> and press enter.
- Copy code given below right above the </head> same as mentioned in below image & click on save theme.
Code :
<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”/>
Step 5 : Now we have to create a static page in blog.
- Go on the pages create new page.
- Name page title Contact Us/Contact Form select HTML from very left of the menu.
- Copy below given code and paste it in the page.
Code :
<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <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><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
Now we have done everything now make it publish. If any function is not working for you please ask me question in comments section I’ll help you out and fix your issue.