Could you add recaptcha?

[olegikorlov]

Could you add recaptcha? http://www.google.com/recaptcha

[elclanrs]

I have no plans on integrating recaptcha. I find captchas very annoying and not really more effective than a human question or a simple problem, or even the old are you human? checkbox. The problem with captchas is usability and Ideal Forms is all about usability...

In any case it shouldn't be too hard to make it work with Ideal Forms:

Load recaptcha API in the head of your document:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
   function showRecaptcha(element) {
     Recaptcha.create("your_public_key", element, {
       theme: "white",
       callback: Recaptcha.focus_response_field
     });
   }
</script>

Create a container to load recaptcha. Put this inside your Ideal Form:

<div id="captcha" class="ideal-wrap"></div>

Show your recaptcha. Put this in your scripts.js before calling Ideal Forms:

showRecaptcha('captcha')

Create a simple PHP file to validate recaptcha with AJAX. You'll need recaptcha PHP library. Then create a file captcha.php

<?php
require_once('recaptchalib.php');
$privatekey = "your_private_key";
$resp = recaptcha_check_answer($privatekey,
  $_SERVER["REMOTE_ADDR"],
  $_POST["recaptcha_challenge_field"],
  $_POST["recaptcha_response_field"]
);

if (!$resp->is_valid) {
  echo json_encode(false);
} else {
  echo json_encode(true);
}

Finally, you can validate recaptcha on submit only if all Ideal Forms fields are valid. Put this in the onSuccess option when calling Ideal Forms:

$myform = $('form').idealforms({
  onSuccess: function (e) {
    e.preventDefault() // prevent submit
    $.post('php/captcha.php',
      $myform.serializeArray(),
      function (data) {
        if ($.parseJSON(data)) {
          // captcha passed handle request
        } else {
          // captcha failed tell the user
        }
      }
    )
  }
})

To handle the error you can use a simple modal box with jQuery UI or an outline around the captcha or some other visual effect. It just doesn't make sense to integrate it as part of Ideal Forms and have it validate "on the spot" like all other inputs, because captchas should only be validated on submit.

The only thing that won't work with recaptcha is the responsive layout but this can be easily solved by customizing your recaptcha with some CSS overriding the original styles or for more advanced styling you can use this guide https://developers.google.com/recaptcha/docs/customization.

As you can see integrating it is not very complicated. Hope this helps.

[masterjedi]

This doesn't working for me. I see the captcha window in my form but this doesnt working.

I put the code into the jquery.idealforms.js

var _defaults = {
  inputs: {},
  customFilters: {},
  customFlags: {},
  globalFlags: '',
  // onSuccess: function(e) { alert('Not succes.') },

  onSuccess: function (e) {
    e.preventDefault() // prevent submit
    $.post('captcha.php',
      $myform.serializeArray(),
      function (data) {
        if ($.parseJSON(data)) {
          // captcha passed handle request
          alert('Captcha success.')
        } else {
          // captcha failed tell the user
            alert('Captcha wrong!')
        }
      }
    )
  },

  onFail: function() { alert('Invalid!') },
  responsiveAt: 'auto',
  disableCustom: ''
}