Docs - Contact Forms with Captcha

PI themes contact form goes with google recaptcha by default on 2 contact pages only. We added captcha to contact pages only (footer form has no captcha), because we think that it would look weird in footer.

CAPTCHA WON'T WORK BEFORE YOU OBTAIN YOUR OWN API KEYS!
Also it doesn't work before you open your website page with HTTP protocol, that means if you open your website page as HTML file it won't work. Website should be running on server.

1. To obtain your own API keys, you need go to Google Recaptcha website and click "Get reCAPTCHA".
2. Then you need to login into your Google Account, and click "Sign Up Now" button on page Google Recaptcha Sign Up.
3. Enter domain name and click "Create.
4. Copy site and secret keys and paste it instead of our API keys in handlers\formContact.php
5. Add peace of code below to your contact form. Replace data-sitekey with your real site key.

<div class="form-group">
  <div class="g-recaptcha" data-sitekey="6LcQ-_USAAAAAC1auWYZck-TkqvxpqeptnCgasjQlJ"></div>
  <script type="text/javascript"
      src="https://www.google.com/recaptcha/api.js?hl=en">
  </script>
</div>

Full form code example:

<form role="form" action="handlers/formContact.php" data-captcha="no" class="pi-contact-form">
  <div class="pi-error-container"></div>
  <div class="pi-row pi-grid-small-margins">
    <div class="pi-col-2xs-6">
      <div class="form-group">
        <div class="pi-input-with-icon">
          <div class="pi-input-icon"><i class="icon-user"></i></div>
          <input class="form-control form-control-name" id="exampleInputName"
               placeholder="Name">
        </div>
      </div>
    </div>
    <div class="pi-col-2xs-6">
      <div class="form-group">
        <div class="pi-input-with-icon">
          <div class="pi-input-icon"><i class="icon-mail"></i></div>
          <input type="email" class="form-control form-control-email" id="exampleInputEmail"
               placeholder="Email">
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="pi-input-with-icon">
      <div class="pi-input-icon"><i class="icon-pencil"></i></div>
      <textarea class="form-control form-control-comments" id="exampleInputMessage"
            placeholder="Message"
            rows="3"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="g-recaptcha" data-sitekey="6LcQ-_USAAAAAC1auWYZck-TkqvxpqeptnCgasjQlJ"></div>
    <script type="text/javascript"
        src="https://www.google.com/recaptcha/api.js?hl=en">
    </script>
  </div>
  <p>
    <button type="submit" class="btn pi-btn-base pi-btn-no-border">Send</button>
  </p>
</form>