Nuno Freitas's solution to "Integration Google reCAPTCHA"

You need to update the existing HTML where the captcha is rendered to integrate the error message for the captcha.<\/p>\n\n

HTML:<\/p>\n

<input<\/span> type=<\/span>&quot;hidden&quot;<\/span> class=<\/span>&quot;hiddenRecaptcha<\/span> required&quot;<\/span> name=<\/span>&quot;hiddenRecaptcha&quot;<\/span> id=<\/span>&quot;hiddenRecaptcha&quot;<\/span>><\/span>\n<div<\/span> class=<\/span>&quot;g-recaptcha&quot;<\/span> data-sitekey=<\/span>&quot;6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15&quot;<\/span>></div><\/span>\n<\/pre><\/div>\n

Javascript with validation for captcha:<\/p>\n

$<\/span>(<\/span>function<\/span>()<\/span> <\/span>{<\/span>\n    <\/span>//<\/span> <\/span>Validation<\/span>\n    <\/span>$<\/span>(<\/span>&<\/span>quot<\/span>;<\/span>#<\/span>sky<\/span>-<\/span>form&quot<\/span>;)<\/span>.<\/span>validate<\/span>({<\/span>\n        <\/span>//<\/span> <\/span>Rules<\/span> <\/span>for<\/span> <\/span>form<\/span> <\/span>validation<\/span>\n        <\/span>rules:<\/span> <\/span>{<\/span>\n            <\/span>name:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>email:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>,<\/span>\n                <\/span>email:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>phone:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>jmba:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>date:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>time:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>subject:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>message:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>true<\/span>\n            <\/span>},<\/span>\n            <\/span>hiddenRecaptcha:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>function<\/span>()<\/span> <\/span>{<\/span>\n                    <\/span>if<\/span>(<\/span>grecaptcha<\/span>.<\/span>getResponse<\/span>()<\/span> <\/span>==<\/span> <\/span>'') {<\/span>\n                        <\/span>return<\/span> <\/span>true<\/span>;<\/span>\n                    <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span>\n                        <\/span>return<\/span> <\/span>false<\/span>;<\/span>\n                    <\/span>}<\/span>\n                <\/span>}<\/span>\n            <\/span>}<\/span>\n        <\/span>},<\/span>\n        <\/span>//<\/span> <\/span>Messages<\/span> <\/span>for<\/span> <\/span>form<\/span> <\/span>validation<\/span>\n        <\/span>messages:<\/span> <\/span>{<\/span>\n            <\/span>name:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši svoje ime',<\/span>\n            <\/span>},<\/span>\n            <\/span>email:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši svoju e-poštu',<\/span>\n                <\/span>email:<\/span> <\/span>'Upiši ISPRAVNU e-poštu'<\/span>\n            <\/span>},<\/span>\n            <\/span>phone:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši broja telefona da te tehnicar može kontaktirati u slucaju dodatnih pitanja',<\/span>\n            <\/span>},<\/span>\n            <\/span>jmba:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši JMBA ili model uredaja da tehnicar zna o kojem se modelu radi',<\/span>\n            <\/span>},<\/span>\n            <\/span>date:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Odaberi datum kada želiš servis',<\/span>\n            <\/span>},<\/span>\n            <\/span>time:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši radno vrijeme u koje tehnicar može doci',<\/span>\n            <\/span>},<\/span>\n            <\/span>subject:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši naslov poruke',<\/span>\n            <\/span>},<\/span>\n            <\/span>message:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'Upiši poruku'<\/span>\n            <\/span>},<\/span>\n            <\/span>hiddenRecaptcha:<\/span> <\/span>{<\/span>\n                <\/span>required:<\/span> <\/span>'You must complete the CAPTCHA'<\/span>\n            <\/span>}<\/span>\n        <\/span>},<\/span>\n        <\/span>//<\/span> <\/span>Ajax<\/span> <\/span>form<\/span> <\/span>submition<\/span>                  <\/span>\n        <\/span>submitHandler:<\/span> <\/span>function<\/span>(<\/span>form<\/span>)<\/span> <\/span>{<\/span>\n            <\/span>$<\/span>(<\/span>form<\/span>)<\/span>.<\/span>ajaxSubmit<\/span>({<\/span>\n                <\/span>beforeSend:<\/span> <\/span>function<\/span>()<\/span> <\/span>{<\/span>\n                    <\/span>l<\/span>.<\/span>start<\/span>();<\/span>\n                    <\/span>$<\/span>(<\/span>'#sky-form button[type=&quot;submit&quot;]').attr('disabled', true);<\/span>\n                <\/span>},<\/span>\n                <\/span>success:<\/span> <\/span>function<\/span>()<\/span> <\/span>{<\/span>\n                    <\/span>l<\/span>.<\/span>stop<\/span>();<\/span>\n                    <\/span>$<\/span>(<\/span>&<\/span>quot<\/span>;<\/span>#<\/span>sky<\/span>-<\/span>form&quot<\/span>;)<\/span>.<\/span>addClass<\/span>(<\/span>'submited');<\/span>\n                <\/span>}<\/span>\n            <\/span>});<\/span>\n        <\/span>},<\/span>\n        <\/span>//<\/span> <\/span>Do<\/span> <\/span>not<\/span> <\/span>change<\/span> <\/span>code<\/span> <\/span>below<\/span>\n        <\/span>errorPlacement:<\/span> <\/span>function<\/span>(<\/span>error<\/span>,<\/span> <\/span>element<\/span>)<\/span> <\/span>{<\/span>\n            <\/span>error<\/span>.<\/span>insertAfter<\/span>(<\/span>element<\/span>.<\/span>parent<\/span>());<\/span>\n        <\/span>}<\/span>\n    <\/span>});<\/span>\n});<\/span>\n<\/pre><\/div>\n

You can update the error message for the captcha above, like the other messages.<\/p>\n\n

PHP:<\/p>\n

require<\/span>(<\/span>'/path/to/recaptcha/src/autoload.php');<\/span>\n\n$<\/span>secret<\/span> <\/span>=<\/span> <\/span>''; // your secret key here<\/span>\n$<\/span>isCaptchaVerified<\/span> <\/span>=<\/span> <\/span>false<\/span>;<\/span>\n\nif<\/span> <\/span>(<\/span>isset<\/span>(<\/span>$<\/span>_POST<\/span>[<\/span>'g-recaptcha-response'])) {<\/span>\n    <\/span>$<\/span>recaptcha<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>\\<\/span>ReCaptcha<\/span>\\<\/span>ReCaptcha<\/span>(<\/span>$<\/span>secret<\/span>);<\/span>\n    <\/span>$<\/span>resp<\/span> <\/span>=<\/span> <\/span>$<\/span>recaptcha<\/span>-><\/span>verify<\/span>(<\/span>$<\/span>_POST<\/span>[<\/span>'g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);<\/span>\n\n    <\/span>if<\/span> <\/span>(<\/span>$<\/span>resp<\/span>-><\/span>isSuccess<\/span>())<\/span> <\/span>{<\/span>\n        <\/span>$<\/span>isCaptchaVerified<\/span> <\/span>=<\/span> <\/span>true<\/span>;<\/span>\n    <\/span>}<\/span>\n}<\/span>\n\nif<\/span>(<\/span> <\/span>isset<\/span>(<\/span>$<\/span>_POST<\/span>[<\/span>'name']) && $isCaptchaVerified)<\/span>\n{<\/span>\n$<\/span>to<\/span> <\/span>=<\/span> <\/span>'web.prodaja@copy-electronic.hr';<\/span>\n$<\/span>subject<\/span> <\/span>=<\/span> <\/span>'Web upit - Copy Electronic';<\/span>\n$<\/span>headers<\/span> <\/span>=<\/span> <\/span>'From: ' . $_POST['email'] . &quot;\\r\\n&quot; . 'Reply-To: ' . $_POST['email'];<\/span>\n$<\/span>message<\/span> <\/span>=<\/span> <\/span>'Ime: ' . $_POST['name'] . &quot;\\n&quot; .<\/span>\n                    <\/span>'E-pošta: ' . $_POST['email'] . &quot;\\n&quot; .<\/span>\n                    <\/span>'Naslov: ' . $_POST['subject'] . &quot;\\n&quot; .<\/span>\n                    <\/span>'Poruka: ' . $_POST['message'];<\/span>\nmail<\/span>(<\/span>$<\/span>to<\/span>,<\/span> <\/span>$<\/span>subject<\/span>,<\/span> <\/span>$<\/span>message<\/span>,<\/span> <\/span>$<\/span>headers<\/span>);<\/span>    <\/span>\n    <\/span>if<\/span>(<\/span> <\/span>$<\/span>_POST<\/span>[<\/span>'copy'] == 'on' )<\/span>\n    <\/span>{<\/span>\n        <\/span>mail<\/span>(<\/span>$<\/span>_POST<\/span>[<\/span>'email'], $subject, $message, $headers);<\/span>\n    <\/span>}<\/span>\n}<\/span>\n<\/pre><\/div>\n

You need to use the reCAPTCHA PHP client library. You can download it from https://github.com/google/recaptcha<\/a><\/p>\n\n

Don't forget to fill the secret key in the above PHP script.<\/p>\n\n

Note: You should verify all your fields at server side (validate email, check message is plain text, etc.).<\/p>\n\n

Let me know if you find any problems.<\/p>\n

You need to update the existing HTML where the captcha is rendered to integrate the error message for the captcha. HTML:
Javascript with validation for captcha: $(function() { // Validation $("#sky-form").validate({ // Rules for form validation rules: { name: { required: true }, email: { required: true, email: true }, phone: { required: true }, jmba: { required: true }, date: { required: true }, time: { required: true }, subject: { required: true }, message: { required: true }, hiddenRecaptcha: { required: function() { if(grecaptcha.getResponse() == '') { return true; } else { return false; } } } }, // Messages for form validation messages: { name: { required: 'Upiši svoje ime', }, email: { required: 'Upiši svoju e-poštu', email: 'Upiši ISPRAVNU e-poštu' }, phone: { required: 'Upiši broja telefona da te tehnicar može kontaktirati u slucaju dodatnih pitanja', }, jmba: { required: 'Upiši JMBA ili model uredaja da tehnicar zna o kojem se modelu radi', }, date: { required: 'Odaberi datum kada želiš servis', }, time: { required: 'Upiši radno vrijeme u koje tehnicar može doci', }, subject: { required: 'Upiši naslov poruke', }, message: { required: 'Upiši poruku' }, hiddenRecaptcha: { required: 'You must complete the CAPTCHA' } }, // Ajax form submition submitHandler: function(form) { $(form).ajaxSubmit({ beforeSend: function() { l.start(); $('#sky-form button[type="submit"]').attr('disabled', true); }, success: function() { l.stop(); $("#sky-form").addClass('submited'); } }); }, // Do not change code below errorPlacement: function(error, element) { error.insertAfter(element.parent()); } }); }); You can update the error message for the captcha above, like the other messages. PHP: require('/path/to/recaptcha/src/autoload.php'); $secret = ''; // your secret key here $isCaptchaVerified = false; if (isset($_POST['g-recaptcha-response'])) { $recaptcha = new \ReCaptcha\ReCaptcha($secret); $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); if ($resp->isSuccess()) { $isCaptchaVerified = true; } } if( isset($_POST['name']) && $isCaptchaVerified) { $to = 'web.prodaja@copy-electronic.hr'; $subject = 'Web upit - Copy Electronic'; $headers = 'From: ' . $_POST['email'] . "\r\n" . 'Reply-To: ' . $_POST['email']; $message = 'Ime: ' . $_POST['name'] . "\n" . 'E-pošta: ' . $_POST['email'] . "\n" . 'Naslov: ' . $_POST['subject'] . "\n" . 'Poruka: ' . $_POST['message']; mail($to, $subject, $message, $headers); if( $_POST['copy'] == 'on' ) { mail($_POST['email'], $subject, $message, $headers); } } You need to use the reCAPTCHA PHP client library. You can download it from https://github.com/google/recaptcha Don't forget to fill the secret key in the above PHP script. Note: You should verify all your fields at server side (and update the path to the autoload in the script above). You can download it from https://github.com/google/recaptcha Don't forget to fill the secret key in the above PHP script. Note: You should verify all your fields at server side (validate email, check message is plain text, etc.). Let me know if you find any problems.
You need to update the existing HTML where the captcha is rendered to integrate the error message for the captcha. HTML:
Javascript with validation for captcha: $(function() { // Validation $("#sky-form").validate({ // ({ ignore: ".ignore", // Rules for form validation rules: { name: { required: true }, email: { required: true, email: true }, phone: { required: true }, jmba: { required: true }, date: { required: true }, time: { required: true }, subject: { required: true }, message: { required: true }, hiddenRecaptcha: { required: function() { if(grecaptcha.getResponse() == '') { return true; } else { return false; } } } }, // Messages for form validation messages: { name: { required: 'Upiši svoje ime', }, email: { required: 'Upiši svoju e-poštu', email: 'Upiši ISPRAVNU e-poštu' }, phone: { required: 'Upiši broja telefona da te tehnicar može kontaktirati u slucaju dodatnih pitanja', }, jmba: { required: 'Upiši JMBA ili model uredaja da tehnicar zna o kojem se modelu radi', }, date: { required: 'Odaberi datum kada želiš servis', }, time: { required: 'Upiši radno vrijeme u koje tehnicar može doci', }, subject: { required: 'Upiši naslov poruke', }, message: { required: 'Upiši poruku' }, hiddenRecaptcha: { required: 'You must complete the CAPTCHA' } }, // Ajax form submition submitHandler: function(form) { $(form).ajaxSubmit({ beforeSend: function() { l.start(); $('#sky-form button[type="submit"]').attr('disabled', true); }, success: function() { l.stop(); $("#sky-form").addClass('submited'); } }); }, // Do not change code below errorPlacement: function(error, element) { error.insertAfter(element.parent()); } }); }); You can update the error message for the captcha above, like the other messages. PHP: require('/path/to/recaptcha/src/autoload.php'); $secret = ''; // your secret key here $isCaptchaVerified = false; if (isset($_POST['g-recaptcha-response'])) { $recaptcha = new \ReCaptcha\ReCaptcha($secret); $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); if ($resp->isSuccess()) { $isCaptchaVerified = true; } } if( isset($_POST['name']) && $isCaptchaVerified) { $to = 'web.prodaja@copy-electronic.hr'; $subject = 'Web upit - Copy Electronic'; $headers = 'From: ' . $_POST['email'] . "\r\n" . 'Reply-To: ' . $_POST['email']; $message = 'Ime: ' . $_POST['name'] . "\n" . 'E-pošta: ' . $_POST['email'] . "\n" . 'Naslov: ' . $_POST['subject'] . "\n" . 'Poruka: ' . $_POST['message']; mail($to, $subject, $message, $headers); if( $_POST['copy'] == 'on' ) { mail($_POST['email'], $subject, $message, $headers); } } You need to use the reCAPTCHA PHP client library (and update the path to the autoload in the script above). You can download it from https://github.com/google/recaptcha Don't forget to fill the secret key in the above PHP script. Note: You should verify all your fields at server side (validate email, check message is plain text, etc.). Let me know if you find any problems. Edit 1: Updated Javascript validation. I had forgot to add a line to make the hidden field work.

User: Nuno Freitas

Question: Integration Google reCAPTCHA

Back to question