First Step:


Backup your template and data.

Template:- Go to >> Blogger >> Theme>> 3 dots(My Theme)>> Backup.

Data:- Go to >> Blogger >> Settings>> Manage Blog>> Backup content.


Second Step:


Add Contact Us Widget To Sidebar.

Go to >> Blogger >>Layout>>Add a Gadget>>Contact Form.


Third Step:


Hide Contact Us Widget In Theme Code:

Go to >> Blogger >> Theme>> 3 dots(My Theme)>>Edit HTML.

  1. Click Anywhere in the code.
  2. Press CRTL+F
  3. Copy This Word:-  ]]></b:skin> 
  4. Paste In Search Feild(Search: (Use /re/ syntax for regexp search)).
  5. Press Enter.


Fourth Step:


Copy The Below Code


.sidebar .widget.ContactForm { display: none!important; }


Paste Above ]]></b:skin>


Fifth Step:


Copy The Below Code



<style>

#contact{

    background-color:#fff;

    margin:30px 0 !important

}

#contact .contact-form-widget{

    max-width:100% !important

}

#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{

    background-color:#FFF;

    border:1px solid #eee;

    border-radius:3px;

    padding:10px;

    margin-bottom:10px !important;

    max-width:100% !important

}

#contact .contact-form-name{

    width:47.7%;

    height:50px

}

#contact .contact-form-email{

    width:49.7%;

    height:50px

}

#contact .contact-form-email-message{

    height:150px

}

#contact .contact-form-button-submit{

    max-width:100%;

    width:100%;

    z-index:0;

    margin:4px 0 0;

    padding:10px !important;

    text-align:center;

    cursor:pointer;

    background:#27ae60;

    border:0;

    height:auto;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

    -ms-border-radius:2px;

    -o-border-radius:2px;

    border-radius:2px;

    text-transform:uppercase;

    -webkit-transition:all .2s ease-out;

    -moz-transition:all .2s ease-out;

    -o-transition:all .2s ease-out;

    -ms-transition:all .2s ease-out;

    transition:all .2s ease-out;

    color:#FFF

}

#contact .contact-form-button-submit:hover{

    background:#2c3e50

}

#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{

    box-shadow:none !important

}

</style>

<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

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

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="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>

</div>

</div>

</div>

</div>

</div>




Sixth Step:


  1. Go To>>Blogger Dashboard>>Pages>>Create New Page (Click Orange Button).
  2. Now Add Title As Contact Us.
  3. Click HTML View (<> This Icon).
  4. Paste the Copied Code In Description.
  5. Publish The Post.


That's It Contact form Should be working.