Contact Us form is a way to prove it self and most main essential for nay publisher. It is a very important approach to speak with your visitors with the helpful way. Not just it will help you to enhance your services it could likewise make your community solid as visitor will ready to communicate with you live without any obstruction. Blogger does not give Contact Us service you need to work bit make it working for you. Blogger user can use only comments for communicate with the owner but Blogger can’t sent you a private message so it is a useful to have a contract Us form to make individual stuff private. Today we will learn out How to add a contract us form in Blogger’s blog.
Firstly, you should to take a backup of your template because if you get any error you can use backup to restore the template.
Ø Go to your Blogger Blog
Ø Click Template > Edit HTML and press Control F
Ø When Search Box show you can search for skin tag
Ø After search skin tag paste following CSS code
#mbl-contact .ContactForm { margin: 0px!important;}#mbl-contact .contact-form-button-submit { max-width: none; width: 100%; height: 35px; border: 0; background-image: none; background-color: #FA411E; cursor: pointer; font: normal normal 13px Open Sans; font-style: normal; font-weight: 400;}.#mbl-contact .contact-form-button-submit:hover { background-color: #222; background-image: none; border: 0;}#mbl-contact #contact { position: fixed; bottom: 0; right: 1%; background-color: #EEE; color: #555; width: 300px; z-index: 1.0E+15;}#mbl-contact #contact .contact-form-widget { padding: 30px; display: none;}#mbl-contact #contact { position: fixed; bottom: 0; right: 1%; background-color: #EEE; color: #555; width: 300px; z-index: 1.0E+15;}#mbl-contact #contact h2.title { margin: 0px; font-weight: 400; background-color: #FA411E; color: #FFF; padding: 8px 15px; font-size: 16px; cursor: pointer; letter-spacing: 3px; text-align: center;}#mbl-contact #contact h2.title .fa { position: absolute; left: 10px; top: 12px;}#mbl-contact #contact .contact-form-widget { width: 240px; padding: 30px; display: none;}#mbl-contact #contact * { transition: all 0 ease; -webkit-transition: all 0 ease; -moz-transition: all 0 ease; -o-transition: all 0 ease;}#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message { background-color: #DDD; color: #111; border: 0; padding: 10px 5px; font: normal normal 13px Open Sans;}#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget { max-width: none; margin-bottom: 15px;}
Ø After paste the code you can find <body> tag with help you search box
Ø Paste the following code and Save Template
Ø You can see the Contact Us box over the site
<div id="mbl-contact"><b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'> <b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <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></b:includable> </b:widget> </b:section></div><script type='text/javascript'> //<![CDATA[$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");}); //]]></script>
Congrats, you have effectively included a contact us gadget in blogger. I am very hopeful that this post can helpful you to learn how to add Contract Us form in blogger. If you like this post Please share your friends.
