 |
| Flat and Colorful Contact Form Widget and Page |
Contact form pages are one of the most important part of a website especially for blogs where in companies, visitors or advertisers can contact you for various purposes, it can be a review request, a promotion request, a private query or just an advertising deal. All these great things happen through a simple gateway of contact form. Previously Blogger didn't had this feature but very recently they have added a cool contact form as a widget which is cool but lacks certain features like responsiveness and being a gadget it shows up in every page of your blogspot blog apart from that it needs a little work on it's appearance. In this how to tutorial we will customize it's appearance to beautify it and make it responsive as well so that it fits in wherever it's put irrespective of the width or height of the container.Usually contact forms are put up on separate contact us or me page to avoid spam caused by bots on the Internet but since the blogger's contact form is a widget we will transfer it to a separate contact us page instead of showing up on every page in your blog.
Beautifying the Contact Form :
 |
| Blogger's Official Contact Form widget before editing |
Before we move on to beautifying the contact form widget make sure you have added it to your blogger blog using the add a widget section under "More Widgets". After adding the contact form widget go to your blogger Template → Click Customize → Navigate to Add CSS section under Advanced option in your blogger template designer and add the below CSS code in your template and click apply.
.contact-form-widget {
max-width: 100%;
width:80%;
border-left:10px solid yellow;
padding:15px;
background:rgba(255,25,0,.8);
font-size:15px;
}
The above code will give your contact form a nice red helvetic look with a yellow border making it look very attractive and also suits any blogger theme background.
Making the Contact Form Responsive
 |
| Contact Form After editing |
If you have noticed the contact form widget best fits the sidebar but if you move it in the footer or somewhere else the form doesn't scale down instead it remains the same making it look ugly, so in this step we will make the form responsive including the name, email, message and submit button areas which will automatically scale down irrespective of where they are added. To make the form responsive simply go to your blogger template → Click customize → Navigate to Add CSS section under advanced option in template designer and add the below codes to it and click apply.
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
font-size:15px;
}
.contact-form-button-submit {
width: 30%;
max-width: 100%;
margin-bottom: 10px;
font-size:15px;
}
The above code basically scales down your query areas according to the screen width making it quite responsive.
Creating Separate Contact Form Page for Blogger
Well contact form pages showing up on each page can be annoying and since the blogger's official contact form is a widget you need not break your head looking for third party contact form gadgets to display on your separate contact us page, in fact it's quite easy to make a separate contact us page using the blogger's official form widget itself. All you have to do is go to your Blogger template → Click Edit HTML → Click on "Jump to widget" option in the template editor and navigate to "ContactForm1". Expand the ContactForm1 widget by clicking the "►" expand arrow and select the whole code enclosed between <b:includable id='main'> and </b:includable> and delete it.
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
♖Your Name : <br/>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
✎Your Email <span style='font-weight: bolder;'>*required</span><br/>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
✉Your Message <span style='font-weight: bolder;'>*required</span>
<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' value='Send' type='button'/>
<div style='text-align: center; max-width: 300px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
</div>
Now in order to create a separate contact us page go to your Blogger dashboard → click on "Pages" Option → Click on "New Page" to create a new page on your blog and name it Contact us or me or whatever you wish your contact us page name to be, switch to HTML editing mode using the top left toolbar and add the above code into it and click publish. You can further beautify your contact us page by replacing the css code in step 1 with the below code.
.contact-form-widget {
max-width: 100%;
width:80%;
border-left:40px solid yellow;
padding:40px;
background:rgba(255,25,0,.8);
font-size:15px;
}
The above code just relaxes the structure a bit bringing out the flat beauty of contact form pages.
Disabling Comments on Contact us Page
 |
| Flat colorful and beautiful and responsive contact form Page from Blogger's official contact form widget |
Disabling comments on contact us page is very easy all you have to do is edit the contact us page and from the "Page settings" option in the right hand sidebar click on options and tick the "Don't allow, hide existing" option under Reader Comments and click publish to save your changes.
Following above methods you will get an nice FLAT UI based contact form page for your blogspot blog however
beware not to remove the contact widget that your added to your blogger sidebar or footer because removing it will disable the functionality on your contact form page as well and in case you just wish to show the blank widget only on the contact us page then
add the following code just above the </body> tag in your template.
<b:if cond='data:blog.url != "URL of your contact us page page"'>
<style>#ContactForm1{display:none;}</style>
</b:if>
The above code will eliminate any unnecessary load times making things hassle free. Now go ahead and redirect your advertisers and visitors to your awesome new contact page.You can see a
live demo on our contact us page.