Задать вопрос
karelina-nat
@karelina-nat

Как подключить recapcha v3 к форме на ajax?

У меня есть форма

<form class="form__contact  form-message">
            <input type="hidden" name="title" value="Форма заказа - страница контактов">

                <div class="form__group">
                    <label class="sr-only" for="name">Name</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="name" placeholder="Name" id="name" required  pattern="(^[А-Яа-яЁё\s]+$)|(^[a-zA-Z\s]+$)">
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="phone-email">Phone or email</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="phone-email" placeholder="Phone or email" id="phone-email" required  >
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="message">Message</label>
                    <div class="form__group-fields">
                        <textarea class="field field--textarea" name="message" id="message" cols="30" rows="6" placeholder="Message"></textarea>
                    </div>
                </div>
                <p class="form__privacy-policy">
                    By clicking the button, I agree to the <a href="<?php the_permalink(3);?>">privacy policy</a>
                </p>
                <button class="btn btn--order btn--contact form__submit" type="submit">Submit</button>
            </form>


Ajax запрос
$('.form-message').on('submit', function (e) {

  e.preventDefault();
  var this_form = $(this);
  var form = $(this).serializeArray();

  $.post(
    myajax.url, {
      form: form,
      action: 'order'
    },
    function (data) {
      for (var i = 0; i < $('form').length; i++) {
        $('form')[i].reset();
      }

      $('#modal-tnx').toggleClass('is-active', true);

      setTimeout(() => {
        this_form.closest('.modal').toggleClass('is-active', false);
      }, 1000);

      setTimeout(() => {
        $('#modal-tnx').toggleClass('is-active', false);
      }, 3000);
    }
  )
});


И php обработчик
// Отправка формы 
add_action('wp_ajax_order', 'order'); 
add_action('wp_ajax_nopriv_order', 'order'); 
function order() { 

	global $email_from; 
	global $email_to; 
	$mail = new PHPMailer; 
	$mail->setFrom($email_from, 'Заявка с сайта - формы обратной связи');
	$mail->addAddress($email_to, 'option'); 

	$mail->IsHTML(true); 
	$mail->CharSet = 'UTF-8'; 

	$form = $_POST['form']; 

	$mail->Subject = 'Письмо с сайта'; 
	$echo = "Ваше сообщение отправлено"; 

	$mail->Body = ''; 

	foreach($form as $data){ 
		switch($data['name']){ 

			case 'title': 
			$mail->Body .= 'Тема письма: '.$data['value'].'<br>'; 
			break;
	
			case 'name': 
			$mail->Body .= 'Имя: '.$data['value'].'<br>'; 
			break;

			case 'phone-email': 
			$mail->Body .= 'Номер телефона или email: '.$data['value'].'<br>'; 
			break; 

			case 'message': 
			$mail->Body .= 'Комментарий: '.$data['value'].'<br>'; 
			break; 

		}
	} 


	$mail->Send(); 

	echo $echo; 

	wp_die(); 
};
  • Вопрос задан
  • 1097 просмотров
Подписаться 3 Простой Комментировать
Ответ пользователя Надим К ответам на вопрос (2)
zkrvndm
@zkrvndm
Архитектор решений
В большинстве случаев, для защиты от спама рекапча просто не нужна и избыточна.

Для начала я просто рекомендую использовать специальное скрытое поле, куда забивается сгенерированный на стороне сервера токен, но забивать токен в поле надо только при условии проявления активности пользователем. Например, можно проверять наличие кликов на поля ввода или движения мышки, скролл или еще что-нибудь.

Но если хотите заморочится с установкой именно рекапчи, вот вам инструкции с примерами:
https://yandex.ru/search/?text=php%20recaptcha%20v...
Ответ написан