How to Add Professional Contact Page For Blogger
Professional contact page helps to better communicate with visitors and clients. It is also highly required by Google Adsense to approve website or blog. Adding a separated contact page in Blogger is little tough but it will be easier now here.
This tutorial will help you to create contact page for Blogger.
To add professional and custom contact page in Blogger apply the following steps.
Step-1: Add Contact Form Gadget
Have you already added 'Contact Form' gadget? If you did not add it, first go to Blogger dashboard→Layout→Add a gadget and choose 'Contact Form' beside 'More Gadgets'→Save
Step-2: Add CSS to hide Contact Form
Again go to Blogger dashboard and choose Template→Edit HTML. Click on code and press "Ctrl + F" from your keyboard. Paste ]]></b:skin> and press Enter to find end of blogger CSS. Paste the following CSS just before ]]></b:skin> and save your template.
Step-3: Create Contact Us Page
Create your 'Contact Us' page by Blogger Dashboard→Pages→New Page. Give contact page name and switch HTML to enable html mode of this page. Save page (do not publish now).
Step-4: Design and Customize
Choose Contact form below and paste its selectable code (given below) on just created contact page.
Step-5: Publish to finalize
Publish your Contact Us page after designed and customized.
Selectable Code:
Selectable Code:
Selectable Code:
Recommended: Use Google Fonts in Blogger.
Selectable Code:
Recommended: Use Google Fonts in Blogger.
N.B All the contact forms for blogger in here is free to use. You need not to credit COMPROMATH. 😀
Have got this article helpful or not working? Put your comment below.
This tutorial will help you to create contact page for Blogger.
To add professional and custom contact page in Blogger apply the following steps.
Step-1: Add Contact Form Gadget
Have you already added 'Contact Form' gadget? If you did not add it, first go to Blogger dashboard→Layout→Add a gadget and choose 'Contact Form' beside 'More Gadgets'→Save
Step-2: Add CSS to hide Contact Form
Again go to Blogger dashboard and choose Template→Edit HTML. Click on code and press "Ctrl + F" from your keyboard. Paste ]]></b:skin> and press Enter to find end of blogger CSS. Paste the following CSS just before ]]></b:skin> and save your template.
div#ContactForm1{display:none !important}Step-3: Create Contact Us Page
Create your 'Contact Us' page by Blogger Dashboard→Pages→New Page. Give contact page name and switch HTML to enable html mode of this page. Save page (do not publish now).
Step-4: Design and Customize
Choose Contact form below and paste its selectable code (given below) on just created contact page.
Step-5: Publish to finalize
Publish your Contact Us page after designed and customized.
Responsive Multi-layer Contact Form
A. Style One
 |
Selectable Code:
<div class='contact_form'>
<div class='contact_form-left'>
<div class='form' style='float:left;'>
<span>Put your messege here</span>
<div class='widget ContactForm' id='ContactForm2'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' />
<p>E-mail *</p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
<p>Message *</p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
<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>
</form>
</div>
</div>
</div>
</div>
</div>
<div class='contact_form-right'>
<div style='float: left;'>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="asidebar" style="clear: both; text-align: left;">
<a href="http://www.compromath.com/p/about.html" imageanchor="1"><img border="0" src="https://4.bp.blogspot.com/-mF5fSoQq7Dc/WLGMrqCLKxI/AAAAAAAABcg/0QhqxTbQaGcj7W6D0OIuXbwx0k3qXA7EwCLcB/s1600/Elliyas%2BAhmed.png"/></a>
</div> <br />Park Mor<br />Begum Rokeya University<br />Rangpur CC<br />Bangladesh<br /></div>
</div>
<div class="contact-social-title"><p>COMPROMATH in social site</p></div>
<div class="contact-social">
<ul>
<li title="Be Facebook Fan"><a href="http://facebook.com/compromath/" rel="nofollow"><img src="https://3.bp.blogspot.com/-ItRge4ExyPM/WLGuPzMNJrI/AAAAAAAABc4/GD3vFk5MOzUgrDjgC7REIlykd0-NQaI0ACLcB/s1600/facebook%2Bicon.png"/></a></li>
<li title="Follow on Twitter"><a href="https://twitter.com/compromath" rel="nofollow"><img src="https://1.bp.blogspot.com/-0ifsCvU2iyg/WLGuQoNPZzI/AAAAAAAABdM/cBuFV60RoRQwKPbfAILlo_uiLOb4EplzACLcB/s1600/twitter%2Bicon.png"/></a></li>
<li title="Follow on Google Plus"><a href="https://plus.google.com/+compromath" rel="nofollow"><img src="https://3.bp.blogspot.com/-VJGWhCggjSA/WLG2JjkzikI/AAAAAAAABds/gu0IJKMlJj0mrM7skxwNr3ffLgM7jg03gCLcB/s1600/google%2Bplus%2Bicon.png"/></a></li>
<li title="Connection on Linkedin"><a href="/"><img src="https://3.bp.blogspot.com/-1AtLT4ASRT8/WLGuQP_1mlI/AAAAAAAABdA/iwp_8j9-0So_jTElal9IuU7ASCNyhQFVACLcB/s1600/linkedin%2Bicon.png"/></a></li>
<li title="Follow on RSS"><a href="/"><img src="https://4.bp.blogspot.com/-MR7UuGHTw_Y/WLG1b8rVRRI/AAAAAAAABdo/iYQljH5zwNQF6X1P7o5FRIfJtbmjUMChQCLcB/s1600/rss%2Bicon.png"/></a></li>
</ul>
</div>
</div>
</div>
<style>
#ContactForm2 {
background: #4b4747;
}
.contact_form {
border: 1px solid #f5f5f5;
padding: 0px 10px 20px 0;
overflow: hidden;
background: #e1e1e1;
}
.contact_form-left {
padding: 2%;
float: left;
width: 376px;
}
.contact_form-right {
width: 278px;
float: left;
padding: 2%;
}
.contact-form-widget {
margin: 0 auto;
padding: 5%;
width: 100%;
max-width: 100%;
}
.contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.form p {
color: #5cb85c;
}
.asidebar img {
border-radius: 70px;
border: 2px solid #949e9e;
width: 57%;
padding: 1%;
}
.contact-social {
float: left;
background: black;
padding: 5px;
width: 250px;
}
.contact-social img {
max-width: 40px;
}
.contact-social ul {
list-style: none;
display: inline;
}
.contact-social ul li {
float: left;
padding: 4px;
}
.contact-social ul li a{}
.contact-social-title p {
float: left;
background: #191919;
color: #ffdb00;
padding: 3px;
}
</style>
 |
Selectable Code:
<div class='contact_form'>
<div class='contact_form-left'>
<div style='float: left;'>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="asidebar" style="clear: both; text-align: left;">
<a href="http://www.compromath.com/p/about.html" imageanchor="1"><img border="0" src="https://4.bp.blogspot.com/-mF5fSoQq7Dc/WLGMrqCLKxI/AAAAAAAABcg/0QhqxTbQaGcj7W6D0OIuXbwx0k3qXA7EwCLcB/s1600/Elliyas%2BAhmed.png"/></a>
</div> <br />Park Mor<br />Begum Rokeya University<br />Rangpur CC<br />Bangladesh<br /></div>
</div>
<div class="contact-social-title"><p>COMPROMATH in social site</p></div>
<div class="contact-social">
<ul>
<li title="Be Facebook Fan"><a href="http://facebook.com/compromath/" rel="nofollow"><img src="https://3.bp.blogspot.com/-ItRge4ExyPM/WLGuPzMNJrI/AAAAAAAABc4/GD3vFk5MOzUgrDjgC7REIlykd0-NQaI0ACLcB/s1600/facebook%2Bicon.png"/></a></li>
<li title="Follow on Twitter"><a href="https://twitter.com/compromath" rel="nofollow"><img src="https://1.bp.blogspot.com/-0ifsCvU2iyg/WLGuQoNPZzI/AAAAAAAABdM/cBuFV60RoRQwKPbfAILlo_uiLOb4EplzACLcB/s1600/twitter%2Bicon.png"/></a></li>
<li title="Follow on Google Plus"><a href="https://plus.google.com/+compromath" rel="nofollow"><img src="https://3.bp.blogspot.com/-VJGWhCggjSA/WLG2JjkzikI/AAAAAAAABds/gu0IJKMlJj0mrM7skxwNr3ffLgM7jg03gCLcB/s1600/google%2Bplus%2Bicon.png"/></a></li>
<li title="Connection on Linkedin"><a href="/"><img src="https://3.bp.blogspot.com/-1AtLT4ASRT8/WLGuQP_1mlI/AAAAAAAABdA/iwp_8j9-0So_jTElal9IuU7ASCNyhQFVACLcB/s1600/linkedin%2Bicon.png"/></a></li>
<li title="Follow on RSS"><a href="/"><img src="https://4.bp.blogspot.com/-MR7UuGHTw_Y/WLG1b8rVRRI/AAAAAAAABdo/iYQljH5zwNQF6X1P7o5FRIfJtbmjUMChQCLcB/s1600/rss%2Bicon.png"/></a></li>
</ul>
</div>
</div>
<div class='contact_form-right'>
<div class='form' style='float:left;'>
<span>Put your messege here</span>
<div class='widget ContactForm' id='ContactForm2'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' />
<p>E-mail *</p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
<p>Message *</p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
<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>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#ContactForm2 {
background: #4b4747;
}
.contact_form {
border: 1px solid #f5f5f5;
padding: 0px 10px 20px 0;
overflow: hidden;
background: #e1e1e1;
}
.contact_form-left {
padding: 2%;
float: left;
width: 376px;
}
.contact_form-right {
width: 278px;
float: left;
padding: 2%;
}
.contact-form-widget {
margin: 0 auto;
padding: 5%;
width: 100%;
max-width: 100%;
}
.contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.form p {
color: #5cb85c;
}
.asidebar img {
border-radius: 70px;
border: 2px solid #949e9e;
width: 57%;
padding: 1%;
}
.contact-social {
float: left;
background: black;
padding: 5px;
width: 250px;
}
.contact-social img {
max-width: 40px;
}
.contact-social ul {
list-style: none;
display: inline;
}
.contact-social ul li {
float: left;
padding: 4px;
}
.contact-social ul li a{}
.contact-social-title p {
float: left;
background: #191919;
color: #ffdb00;
padding: 3px;
}
</style>
Customize:Recommended: Use Google Fonts in Blogger.
1. Profile Image: Replace your image's url instead of
https://4.bp.blogspot.com/-mF5fSoQq7Dc/WLGMrqCLKxI/AAAAAAAABcg/0QhqxTbQaGcj7W6D0OIuXbwx0k3qXA7EwCLcB/s1600/Elliyas%2BAhmed.png
2. Image URL: Replace your 'About Us/Me' URL instead of http://www.compromath.com/p/about.html
3. Address: Customize your address.
4. Replace COMPROMATH with your website name.
5. Replace your social link with your social link.
6. Background and Color: You can customize background, color, font and other on css.To customize color and background use the Color Picker Tool .
Responsive Full Width Contact Form for Contact Page
 |
<div class='contact_form'>
<div class='form' style='float:left;'>
<div class='widget ContactForm' id='ContactForm2'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' />
<p>E-mail *</p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
<p>Message *</p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
<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>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
#ContactForm2 {
background: #4b4747;
}
.contact_form {
overflow: hidden;
background: transparent;
}
.contact-form-widget {
margin: 0 auto;
padding: 5%;
width: 100%;
max-width: 100%;
}
.contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.form p {
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.form{
width: 100%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 100%;
width: 100%;
}
.contact-form-button-submit {
background-color: #4d90fe;
border-color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
}
</style>
Customize Background and Color:
You can customize background, color, font and other on css.To customize color and background use the Color Picker Tool .
Recommended: Use Google Fonts in Blogger.
Mini Contact Form For Contact Page
 |
<div class='contact_form'>
<div class='form' style='float:left;'>
<div class='widget ContactForm' id='ContactForm2'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' />
<p>E-mail *</p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
<p>Message *</p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/>
<br/> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
<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>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
#ContactForm2 {
background: #36BDAF;
}
.contact_form {
overflow: hidden;
background: transparent;
max-width: 50%;
margin: 0 auto;
}
.contact-form-widget {
margin: 0 auto;
padding: 5%;
width: 100%;
max-width: 100%;
}
.contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.form p {
color: black;
text-align: center;
font-size: 17px;
font-weight: bold;
}
.form{
width: 100%;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 100%;
width: 100%;
background: #384452;
color: white;
}
.contact-form-button-submit {
background-color: #4d90fe;
border-color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
}
</style>Customize Background and Color
You can customize background, color, font and other on stylsheet css.To customize color and background use the Color Picker Tool .
Recommended: Use Google Fonts in Blogger.
N.B All the contact forms for blogger in here is free to use. You need not to credit COMPROMATH. 😀
Have got this article helpful or not working? Put your comment below.
About Elliyas
