Не работает отправка формы, ReCaptcha. Ajax

377

12 ноября 2017, 15:54

Уже который день бьюсь с обработкой ReCaptcha. Может кто мог бы указать на ошибку или подсказать как должно быть, серверную часть делаю впервые на PHP, поэтому строгу не судите. До этого отправку данных из формы на эмейл выполнял другой код, решил переписать с обработкой капчи и теперь вообще не отсылаются данные.

Код PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim($_POST["Name"]);
    $email = trim($_POST["E-mail");
    $phone = trim($_POST["Phone"]);
    if(isset($_POST['g-recaptcha-response'])) {
        $captcha = $_POST['g-recaptcha-response'];
    }

    if(empty($name) OR empty($phone) OR empty($email) OR empty ($captcha)) {
        http_response_code(400);
        exit;
    }
    $recipient = "vladknure@gmail.com";
$subject = "Biotech.org.ua. Пользователь.";
$email_content = "Name: $name\n";
$email_content = "Phone: $phone\n\n";
$email_content = "E-mail: $email\n\n";
$email_headers = "From: $name <$email>";
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LdxczcUAAAAAMeDD8JwV8JkjAGKDhghdyjGK2vK&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
$decoded_response = json_decode($response, true);
if($decoded_response['success'] == true) {
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        http_response_code(200);
        echo " congrats";
    } else {
        http_response_code(500);
        echo "couldnt be sent";
    }
} else {
    http_response_code(400);
    echo "you are spammer";
}
}
?>

Код формы:

<form action="/" class="form" method="post">
                    <!-- Hidden Required Fields -->
                    <input type="hidden" name="project_name" value="Biotech">
                    <input type="hidden" name="admin_email" value="sales@biotech.org.ua">
                    <input type="hidden" name="form_subject" value="Контактные данные пользователя">
                    <!-- END Hidden Required Fields -->
                    <div class="input-group">
                        <input id="name" type="text" name="Name" placeholder="Имя и фамилия" required>
                    </div>
                    <div class="input-group">
                        <input id="email" type="text" name="E-mail" pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$" placeholder="E-mail" required>
                    </div>
                    <div class="input-group">
                        <input type="text" name="Phone" placeholder="Контактный телефон">
                    </div>
                    <div id="formresult"></div>


                    <input type="submit" name="submit" id="submit-button" value="Отправить">
<div class="g-recaptcha" data-sitekey="6LdxczcUAAAAAKsbbef_VQgblw-khfd-S0RCL0Vq" style=""></div>

                </form>

AJAX-запрос:

<script type="text/javascript">
    $('.form').submit(function(event) {
        event.preventDefault();
        var th = $(this);
        var contactForm = $('.form');
        var formresult = $('#formresult');
        var formData = $(contactForm).serialize();
        $.ajax({
            type: 'POST',
            url: "mailer.php",
            data: formData,
            success: function(response) {
                alert("Благодарим за проявленный интерес к нашей продукции.");
                $('.cityAddress').removeClass('active');
                $('.form-block').removeClass('active');
                setTimeout( function() {
                    th.trigger('reset');
                }, 1000)
            },
            error: function(data) {
                alert("error");
                $('.cityAddress').removeClass('active');
                $('.form-block').removeClass('active');
                setTimeout( function() {
                    th.trigger('reset');
                }, 1000)
            }
        });
    });
</script>

Answer 1

Работающий пример, все проверил. Перепроверьте свои ключи, тестировал на своих для локалки.

Ваши ошибки:

неправильно закрываете скобки
$(contactForm) делаете для $('.form'), зачем два раза $($('.form'))?
не обязательно делать кнопку type="submit"
в приведенном примере не подключен скрипт recaptcha/api.js, jquery.js
неясно когда выполняется ваш js до загрузки страницы или после (для этого надо выполнять его в $(function () { _тут_ });)
остальное не помню

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#submit-button').on('click', function (event) {
                event.preventDefault();
                var contactForm = $('.form');
                var formData = contactForm.serialize();
                console.log(formData);
                $.ajax({
                    type: 'POST',
                    url: "recap.php",
                    data: formData
                })
                    .done(function () {
                        console.log("success");
                        $('#output').html(data.responseText);
                    })
                    .fail(function (data) {
                        console.log("error");
                        $('#output').html(data.responseText);
                    })
                    .always(function () {
                        console.log("complete");
                    });
                ;
            });
        });
    </script>
</head>
<body>
<form class="form" method="post">
    <!-- Hidden Required Fields -->
    <input type="hidden" name="project_name" value="Biotech">
    <input type="hidden" name="admin_email" value="sales@biotech.org.ua">
    <input type="hidden" name="form_subject" value="Контактные данные пользователя">
    <!-- END Hidden Required Fields -->
    <div class="input-group">
        <input id="name" type="text" name="Name" placeholder="Имя и фамилия" required>
    </div>
    <div class="input-group">
        <input id="email" type="text" name="E-mail"
               pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$" placeholder="E-mail"
               required>
    </div>
    <div class="input-group">
        <input type="text" name="Phone" placeholder="Контактный телефон">
    </div>
    <div id="formresult"></div>

    <div class="g-recaptcha" data-sitekey="6LdxczcUAAAAAKsbbef_VQgblw-khfd-S0RCL0Vq" style=""></div>
    <input type="button" name="submit" id="submit-button" value="Отправить">

</form>
<div id="output"></div>

</body>
</html>

PHP

<?php
/**
 * Created by PhpStorm.
 * User: user
 * Date: 11.11.2017
 * Time: 14:32
 */
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    var_dump($_REQUEST);
    $name = trim($_POST["Name"]);
    $email = trim($_POST["E-mail"]);
    $phone = trim($_POST["Phone"]);
    $captcha = '';
    if (isset($_POST['g-recaptcha-response'])) {
        $captcha = $_POST['g-recaptcha-response'];
    }

    if (empty($name) OR empty($phone) OR empty($email) OR empty ($captcha)) {
        http_response_code(400);
        echo "имя/телефон/почта/капча не введены";
        exit;
    }
    $recipient = "vladknure@gmail.com";
    $subject = "Biotech.org.ua. Пользователь.";
    $email_content = "Name: $name\n";
    $email_content = "Phone: $phone\n\n";
    $email_content = "E-mail: $email\n\n";
    $email_headers = "From: $name <$email>";
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LdxczcUAAAAAMeDD8JwV8JkjAGKDhghdyjGK2vK&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
    $decoded_response = json_decode($response, true);
    if ($decoded_response['success'] == true) {
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            http_response_code(200);
            echo " congrats";
        } else {
            http_response_code(500);
            echo "couldnt be sent";
        }
    } else {
        http_response_code(400);
        echo "you are spammer";
    }
}