Thursday, July 27, 2017


By this useful article I guide you that how to add Contact Form in  blogger blog. I have found and searched that lot of free services are available in this regard. You will be able to find fairly only some of them. 


Now I introduce two Contact form one is simple second is CSS style.  If you want to add contact form in your Blogger Blog you will show professional look of your blog due to contact form. Now I describe following suggestions  suggestions and tips how you add contact form. 

  1. What is Contact Form
  2. Why We Add Contact Form in Blog
  3. How Add Simple Contact Form to Blog
  4. How Add Stylish Contact Form to Blog

Add Stylish Contact Form to Blogger

1.   What is Contact Form

In the event that you visit various sites around the web, it is likely that the greater part of those site will have a Contact Form. A contact Form is essentially an arrangement of inquiries rounded out on the page by your visitors that is consequently sent to your email when it is rounded out. The essential case of a Contact Form is that you can be utilized for pretty much anything you can consider yet here are a couple of cases of motivations to utilize a Contact Form. This is a Contact Form that is utilized for general remarks from your visitors and readers and Contact Form enables visitors to get in touch with you with different inquiries they may have identifying with your business. On the off chance that your business offers an administration, or item your clients can utilize this to ask more data. Since contact frames are dealt with server side and your email address is not promptly accessible spammers can't reap it as effortlessly and this is significantly more secure than utilizing the mailto. Since you indicate the data you'd like from the client you can catch the correct data you need from them. Since all the data is given to you a similar way, the messages from the contact form are reliable and can enable you to remain sorted out. 

2.   Why We Add Contact Form in Blog

Rather if you are utilizing your email or mailto: tag,  or other services are a very parcel focal points and not the following points. 

Consistency: regardless of whether you're file organizer is a carefully marked exemplification of productivity or simply the favor name you've offered to that shoebox in your wardrobe, you can't deny that business runs all the more easily when your data is steady. Contact shapes enable you to remain sorted out, by continually furnishing you with a similar data similarly, regardless of who comes calling.

Data Information: tired of asking for that same snippet of data from your customers again and again at whatever point they send you a nonexclusive email? Include a tab asking for whatever data you require in advance, and never endure that cerebral pain again! 

Spam channel: the advantage of utilizing a Contact Form over providing your email address is that spammers and bots won't get the chance to surge your inbox very as effortlessly. It's route more secure than depending on a mailto: tag. 

3.   How Add Simple Contact Form to Blog

How to Add Simple Contact form to the Blogger Now I guide you how to add it and do the carefully following suggestions:

1. Go to www.blogger.com and login your account and chose Layout from left side and to get an option Add Gadget. See the picture has given below:



2. Now you will show Add Gadget click to main panel of right side and you will see the list of gadgets for more information see the picture has given below:



3. Now chose more gadgets from the left side and you will contact form and now add it for more information see the picture has given below:



4. Now to go Theme section and click on theme from left menu for guidance see the picture has given below:



5. After that Click on Edit HTML and you will be provide whole code for the further functions for more guidance see the picture has given below:



6.  Now Search this simple line of code ]]></b:skin> and place the following code just before it.
div#ContactForm1 {
display: none !important;
}

Which place you will be add the above code for more information see the picture has given below:



Now you have added the above code in blogger and save your blogger theme template.

7. Now add Contact form to page and customized blogger contact form and it will be shown on separate form, for more guidance see the picture has given below:



After opening of separate page paste the following code and in HTML post editor and remove everything from it and given the name of the page Contact Form and publish it.


<div class='contact-form-widget'>

    <div class='form'>
        <form name='contact-form'>
            <p/>
            <data:contactFormNameMsg/>
            <br/>
            <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value='' />
            <p/>
            <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

            <br/>

            <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value='' />
            <p/>
            <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

            <br/>

            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5' />
            <p/>
            <input class='contact-form-button contact-form-button-submit button-color' type='reset' value='Clear' />
            <p/>
            <p/>
            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button' />
            <p/>
            <div style='text-align: center; max-width: 222px; width: 100%'>
                <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"' /><p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"' /></div>
</form>
</div>
</div>



4.   How Add Stylish Contact Form to Blog

1.  Now see the above instructions same and simple add the following FontAwesome Icons below  <head> section of your blogger theme and save your blogger template.


<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

2.  After that go to page area and open new page and then set post settings area for more information see the pictures has given below:




3. Now paste the following code in CSS area before this code line  ]]></b:skin>.
<style>
div#blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    background-color: #251818;
    font-family: sans-serif;
}
div#blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #FFFFFF;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #7C2222;
    box-sizing: border-box;
}
div#blogger_cntct_form .wrap-me:before {
    content: '\f0e0';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}
.contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #0083FF !important;
}
.contact-form-button-submit {
    background: #19B3EA;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
}
.contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
.contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
}
.contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
div#blogger_cntct_form span.name-bg {
    background-color: #E8F2FF;
 }
div#blogger_cntct_form span.email-bg {
    background-color: #FFE8E8;
}
div#blogger_cntct_form span.name-bg, div#blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
}
div#blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #60A2FF;
 }
div#blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #FF530B;
}
div#blogger_cntct_form span.name-bg:before, div#blogger_cntct_form span.email-bg:before, div#blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
}
div#blogger_cntct_form span.message-bg {
    background-color: #EBFFE8;
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    margin: 0px 0px 4px;
}
div#blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #20CC00;
}
div#blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
}
div#blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
 }
div#blogger_cntct_form span.send-bg:before, div#blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #000;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
}
div#blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
}
div#blogger_cntct_form span.clear-bg:before {
    content: '\f021';
 }

input.contact-form-button.contact-form-button-submit.clear-button:hover {

    background-color: #E83434 !important;
}
div#blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #FF2C2C;
    float: right;
    display: table;
    height: 32px;
}
</style>

4. Now add the following HTML Code in page area and Publish your new page with the name of Contact Form and now done it.

<div id="blogger_cntct_form">
<div class="wrap-me">
<form name="contact-form">
<span class='name-bg'>Your Name</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
<span class='email-bg'>Your Email*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
<span class='message-bg'>Your Message*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<span class='send-bg'><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span>
<span class='clear-bg'><input class='contact-form-button contact-form-button-submit clear-button' type='reset' value='Clear'/></span>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br />
</div>
</div>

I hope you like this article and leave your comments. 

Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2017. Media Music Mania - All Rights Reserved.