Monday, February 27, 2017

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.

How to Add Professional Contact Us Page in 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 dashboardLayoutAdd 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
Responsive Multi-layer Contact Form Style One
Demo

 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>
B. Style Two
Responsive Multi-layer Contact Form Style Two
See Demo

 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:
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 .
Recommended:  Use Google Fonts in Blogger

Responsive Full Width Contact Form for Contact Page

Responsive Full Width Contact Form for Contact Page
See Demo
 Selectable Code:
<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

 Mini Contact Form For Contact Page
See Demo
 Selectable Code:
<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.