Skocz do zawartości

Integracja Google reCAPTCHA 2.0 w formularzu na stronie internetowej


Vafi
 Udostępnij

Rekomendowane odpowiedzi

Witam, mam problem z przerobieniem tego (http://grafmag.pl/artykuly/tworzymy-wlasny-formularz-kontaktowy/) formularza na Google raCAPTCHA PHP z wykorzystaniem JS, który będzie służył do wyświetlenia komunikatu o błędzie lub o poprawnie wysłanej wiadomości.

Zamiast działania zintegrowanie z reCAPTCHA 2.0

Kod HTML

            <form action="form/send.php" method="post" id="contactform">
                <fieldset>
                    <input type="text" name="contact_name" placeholder="Imię i nazwisko" required="required" tabindex="1" />
                    <input type="email" name="contact_email" placeholder="Adres e-mail" required="required" tabindex="2" />
                    <textarea rows="5" columns="10" name="contact_body" placeholder="Treść wiadomości" required="required" tabindex="3"></textarea>
                  	<div class="g-recaptcha" data-sitekey="<!-- SITEKEY !-->"></div>
                    <input type="submit" value="Wyślij" tabindex="5" />
                </fieldset>
            </form>
        </div>

Kod PHP:

<?php
require_once 'class.phpmailer.php';
$_POST = array_map('trim', $_POST);
$error = false;
if (!isset($_POST['contact_name']) || empty($_POST['contact_name'])) {
    $error = true;
}
if (!isset($_POST['contact_email']) || empty($_POST['contact_email']) || !PHPMailer::ValidateAddress($_POST['contact_email'])) {
    $error = true;
}
if (!isset($_POST['contact_body']) || empty($_POST['contact_body'])) {
    $error = true;
}
if (!isset($_POST['g-recaptcha-response']) || empty($_POST['g-recaptcha-response'])) {
    $error = true;
}

if ($error) {
    exit('nok');
}
$mail = new PHPMailer();
$mail->CharSet = 'UTF-8';
$mail->SetFrom($_POST['contact_email'], $_POST['contact_name']);
$mail->AddAddress('adres-testowy@pecetowicz.pl');
$mail->Subject = 'Wiadomość wysłana poprzez formularz kontaktowy';
$mail->Body = $_POST['contact_body'];
if (!$mail->Send()) {
    exit('nok');
}
exit('ok');
?>

JS

$(function() {
    var check_1 = (Math.floor(Math.random() * 9) + 1).toString(),
        check_2 = (Math.floor(Math.random() * 9) + 1).toString(),
        check = check_1 + check_2;

    $('#contactform span.form_check_1').text(check_1);
    $('#contactform span.form_check_2').text(check_2);
    $('#contactform input[name="contact_check_data"]').val(check);

    var sending = false;
    $('#contactform').on('submit', function(e) {
        var $form = $(this), $submit = $('input[type="submit"]', $form);

        e.preventDefault();

        if (sending) {
            return false;
        }

        $('.form-error', $form).remove();

        $('input, textarea', $form).prop('readonly', true);
        $submit.val('Wysyłam…');
        sending = true;

        $.post($form.attr('action'), $form.serialize(), function(data) {
            if (data === 'ok') {
                $form.slideUp('fast', function() {
                    $form.after('<div class="form-success">Wiadomość została wysłana! Skontaktujemy się z Tobą jak tylko to będzie możliwe.</div>');
                });

                return true;
            }

            $form.prepend('<div class="form-error">Wystąpił błąd podczas wysyłania formularza. Upewnij się, że wypełniłeś wszystkie pola i poprawnie rozwiązałeś działanie.</div>');
            $('input, textarea', $form).prop('readonly', false);
            $submit.val('Wyślij wiadomość');
            sending = false;

            return false;
        }, 'text');
    });
});

Z góry wielkie dzięki i pozdrawiam

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×