Solution Timeline

All versions (edits) of solutions to Integration Google reCAPTCHA appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

You can download the code here.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);
    }
}
$secret = "your_secret_key";
$recaptcha = new \ReCaptcha\ReCaptcha($secret);

$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

if( isset($_POST['name']) && $resp->isSuccess()) {
    $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);
   }
}

Make sure you copy all the recaptcha libraries to the recaptcha dir. You should also check if all the other variables are set.

require('recaptcha/autoload.php');

$secret = "your_secret_key";
$recaptcha = new \ReCaptcha\ReCaptcha($secret);

$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

if( isset($_POST['name']) && $resp->isSuccess()) {
    $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);
   }
}

Regarding javascript code, I can not fix that because I would have to have access to more code than you posted.

You can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);
    }
}

I could help you more if you provided the snippet where you render the form.

The general idea is to set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="captchaOk"></div>

Add the disabled property to the submit button:

<button type="submit" class="button btn ladda-button" id="form-submit" data-style="zoom-in" disabled><i class="icon-paper-plane"></i></button>

And remove it when the callback is run:

function captchaOk(){
    $('#form-submit').prop('disabled', false);
}

You need to update the existing HTML where the captcha is rendered to integrate the error message for the captcha.

HTML:

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15"></div>

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 (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:

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15"></div>

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 (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 can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);

        echo json_encode([
            'success' => true
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'error' => 'recaptcha'
        ]);
    }
}

I could help you more if you provided the snippet where you render the form.

You have to set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="captchaOk"></div>

Add the disabled property to the submit button:

<button type="submit" class="button btn ladda-button" id="form-submit" data-style="zoom-in" disabled><i class="icon-paper-plane"></i></button>

And replace/add this JS to your scripts file :

$(function() {
    $('#sky-form').validate({
        /*
        rules
        messages
        */
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                beforeSend: function() {
                    l.start();
                    $('#form-submit').attr('disabled', true);
                },
                success: function(response) {
                    l.stop();
                    if (response.success) {
                        $('#sky-form').addClass('submited');
                    }
                    else if (response.error == 'recaptcha') {
                        $('.g-recaptcha')
                            .addClass('state-error')
                            .after('<em class="invalid">Invalid reCAPTCHA</em>');
                    }
                }
            });
        },
        /*
        errorPlacement
        */
    });
});

function recaptchaSuccess(){
    $('.g-recaptcha').removeClass('state-error').next().remove();
    $('#form-submit').prop('disabled', false);
}

You can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);

        echo json_encode([
            'success' => true
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'error' => 'recaptcha'
        ]);
    }
}

You have to set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="captchaOk"></div>

Add the disabled property to the submit button:

<button type="submit" class="button btn ladda-button" id="form-submit" data-style="zoom-in" disabled><i class="icon-paper-plane"></i></button>

And replace/add this JS to your scripts file :

$(function() {
    $('#sky-form').validate({
        /*
        rules
        messages
        */
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                beforeSend: function() {
                    l.start();
                    $('#form-submit').attr('disabled', true);
                },
                success: function(response) {
                    l.stop();
                    if (response.success) {
                        $('#sky-form').addClass('submited');
                    }
                    else if (response.error == 'recaptcha') {
                        $('.g-recaptcha')
                            .addClass('state-error')
                            .after('<em class="invalid">Invalid reCAPTCHA</em>');
                    }
                }
            });
        },
        /*
        errorPlacement
        */
    });
});

function recaptchaSuccess(){
    $('.g-recaptcha').removeClass('state-error').next().remove();
    $('#form-submit').prop('disabled', false);
}

You can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);

        echo json_encode([
            'success' => true
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'error' => 'recaptcha'
        ]);
    }
}

You have to set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="recaptchaSuccess"></div>

Add the disabled property to the submit button:

<button type="submit" class="button btn ladda-button" id="form-submit" data-style="zoom-in" disabled><i class="icon-paper-plane"></i></button>

And replace/add this JS to your scripts file :

$(function() {
    $('#sky-form').validate({
        /*
        rules
        messages
        */
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                beforeSend: function() {
                    l.start();
                    $('#form-submit').attr('disabled', true);
                },
                success: function(response) {
                    l.stop();
                    if (response.success) {
                        $('#sky-form').addClass('submited');
                    }
                    else if (response.error == 'recaptcha') {
                        $('.g-recaptcha')
                            .addClass('state-error')
                            .after('<em class="invalid">Invalid reCAPTCHA</em>');
                    }
                }
            });
        },
        /*
        errorPlacement
        */
    });
});

function recaptchaSuccess(){
    $('.g-recaptcha').removeClass('state-error').next().remove();
    $('#form-submit').prop('disabled', false);
}

You can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

// Configuration
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $recaptcha = new \ReCaptcha\ReCaptcha($secret);
    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);

        echo json_encode([
            'success' => true
        ]);
    } else {
        echo json_encode([
            'success' => false,
            'error' => 'recaptcha'
        ]);
    }
}

You have to set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="recaptchaSuccess"></div>

Add the disabled property to the submit button:

<button type="submit" class="button btn ladda-button" id="form-submit" data-style="zoom-in" disabled><i class="icon-paper-plane"></i></button>

And replace/add this JS to your scripts file :

$(function() {
    $('#sky-form').validate({
        /*
        rules
        messages
        */
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                beforeSend: function() {
                    l.start();
                    $('#form-submit').attr('disabled', true);
                },
                success: function(response) {
                    l.stop();
                    if (response.success) {
                        $('#sky-form').addClass('submited');
                    }
                    else if (response.error == 'recaptcha') {
                        $('.g-recaptcha')
                            .addClass('state-error')
                            .after('<em class="invalid">Invalid reCAPTCHA</em>');
                    }
                }
            });
        },
        /*
        errorPlacement
        */
    });
});

function recaptchaSuccess(){
    $('.g-recaptcha').removeClass('state-error').next().remove();
    $('#form-submit').prop('disabled', false);
}

You need to update the existing HTML where the captcha is rendered to integrate the error message for the captcha.

HTML:

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15"></div>

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.

Tipped

You can download the code here.

Apart from checking the reCAPTCHA, I check every submitted variable because you should not rely only on JS. That's also the reason for doing the reCAPTCHA check on the server.

<?php

require('recaptcha/autoload.php');

/**
 * Configuration
 */
$secret = 'YOUR_SECRET';

if ( ! empty($_POST['name']) &&
     ! empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) &&
     ! empty($_POST['subject']) &&
     ! empty($_POST['message']) &&
     ! empty($_POST['g-recaptcha-response'])) {

    $recaptcha = new \ReCaptcha\ReCaptcha($secret);
    $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if ($response->isSuccess()) {
        $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);
        }
    }
}

Set the data-callback attribute on this element:

<div class="g-recaptcha" data-sitekey="6LeevP4SAAAAAD7tnww8f3BRR228haSZl4jZBF15" data-callback="recaptchaSuccess"></div>

And replace/add this JS to your scripts file :

$(function() {
    // Validation
    $("#sky-form").validate({
        // Rules for form validation
        rules: {
            /*
             * ...
             */
            'g-recaptcha-response': {
                required: true
            }
        },
        // Messages for form validation
        messages: {
            /*
             * ...
             */
            'g-recaptcha-response': {
                required: 'YOUR_ERROR_MESSAGE'
            }
        },
        // submitHandler
        // errorPlacement
    });
});

function recaptchaSuccess(){
    $('#g-recaptcha-response').valid();
}
Winning solution