How To Add Contact Form in Blogger Templates

XpertShout

Read Also

Get an easy way to add contact form in blogger templates. Contact form is important gadget for the bloggers because they can connect with visitors only with contact forms. Many blogger are getting problem with high quality contact form on their sites.
How To Add Contact Form in Blogger Templates

How To Add Contact Form in Blogger Templates

Which are the contact form problems? You can see below list of that problems.

Contact Form Problems

  • Send Button not working.
  • Message not sending.
  • Message is not receiving in email via contact form.
  • Email not set as necessary required.
  • Name not set as necessary required.
  • Today i will give you the best contact form solution. You have to adopt simply these steps.

    Add Contact Form in Blogger Templates

    First of all Add contact form widget => Layout > Add gadget > Select Contact Form.
    Now go to pages in blogger dashboard.
    Create new page as contact page. If you have already then skip this step.
    Now click on edit this page and select HTML instead of  TEXT.
    Now Just paste there the below script, css and html.
    <form name="contact-form">
    <div class='formcolumn1'>
    <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
    
    </div>
    <div class='formcolumn2'>
    <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
    
    </div>
    <div class='formcolumn3'>
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
    
    </div>
    <div class='formcolumn4'>
    <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Email" />
    
    </div>
    <div style="max-width: 100%; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    <style scoped="" type="text/css">
    #sidebar-wrapper {display:none;}
    #post-wrapper {width:100%;max-width:100%;}
    .post-inner {padding:0;}
    h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-weight:700;
    font-size:2rem;color:#999;}
    .post-body p,.post-body code {font-size:1.3rem;font-weight:700;}
    .post-body td a {background:initial;color:#444;padding:0;font-size:100%;float:initial;display:initial;border-radius:0;font-weight:700;}
    .post-body td a:hover {background:initial;color:red;} .post-vinfo {display:none;}
    #ContactForm1,#comments{display:none}
    #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s}
    #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s}
    #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;outline:none;border-color:#f24a4a}
    #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
    .formcolumn4{position:relative}
    .formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
    #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
    #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
    form{color:#888}
    .formcolumn1,.formcolumn2{float:left;width:50%}
    .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
    .formcolumn2{padding:0 0 0 10px}
    @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
    </style>
    
    <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3137038739860774865';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3137038739860774865','//adeelstriker.blogspot.com/','3137038739860774865');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3137038739860774865', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>

    Now simply replace my Blog id with your blog id. Blog id can be find on top in browser URL. Also replace my blog URL wit yours. Now save the page and see the results.

    Load comments