Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax.
Создание простой формы
<form class="form-container recall-form-validate">
<h2>Заказать звонок</h2>
<input class="form-field form-name" type="text" name="name" placeholder="Ваше имя"><br />
<input class="form-field form-tel" type="text" name="tel" placeholder="Ваш телефон"><br />
<div id="submit-ajax" class="submit-container">
<input class="submit-button" type="submit" value="Отправить"/>
</div>
</form>Добавляем скрипт обработчик (с валидацией полей)
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
}
if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не верно');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});Прописываем функцию формы
function ajax_form(){
$name = $_REQUEST['name'];
$tel = $_REQUEST['tel'];
$response = '';
$thm = 'Заказ звонка';
$thm = "=?utf-8?b?". base64_encode($thm) ."?=";
$msg = "Имя: ".$name."<br/>
Телефон: ".$tel ."<br/>";
$mail_to = 'mail@mail.ru';
$headers = "Content-Type: text/html; charset=utf-8\n";
$headers .= 'From: SITE <no-replay@site.ru>' . "\r\n";
// Отправляем почтовое сообщение
if(mail($mail_to, $thm, $msg, $headers)) {
$response = 'Сообщение отправлено';
} else {
$response = 'Ошибка при отправке';
}
// Сообщение о результате отправки почты
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
echo $response;
wp_die();
}
}
add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );Данное решение взято с сайта inprocess.by
Отправка формы с двумя разными шаблонами
Чтобы отправить форму с двумя разными шаблонами, например администратору и покупателю, нужно сделать следующее:
1. Добавить в скрипт отправки еще одну функцию ajax с другим action
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order_client',
name: name,
tel: tel
}
});2. Создать еще одну функцию отправки письма и привязать её к новому action (ajax_order_client)
add_action('wp_ajax_nopriv_ajax_order_client', 'ajax_form_client' );
add_action('wp_ajax_ajax_order_client', 'ajax_form_client' );Валидация и подсветка полей
Проверки на заполненность различных полей:
// Отправка заявки
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
} else if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не корректно');
return false;
} else if (tel.length < 8) {
alert('Слишком короткий номер');
return false;
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
alert('Введите корректный номер в формате +79998887766 или 89998887766');
return false;
}
if(email === '') {
alert('Укажите свой E-Mail');
return false;
} else if ( !validateEmail(email) ) {
alert('Введите корректный E-Mail');
return false;
}
if (!$("input[name='messenger']:checked").val()) {
alert("Выберите удобрый для вас мессенджер");
return false;
}
if (!$('input:checkbox[name="acceptance"]').is(':checked')) {
alert('Вы должны ознакомиться с политикой конфиденциальности');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel,
email: email,
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});
// Проверка E-mail
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( $email );
}Подсветка полей
// Подсвечивание полей обязательных для заполнения
$(".submit-button").on("click", function (event) {
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
$(".form-field").removeClass('validate novalidate');
if (name === '') {
$(".form-name").addClass('novalidate');
} else {
$(".form-name").addClass('validate');
}
if (tel === '') {
$(".form-tel").addClass('novalidate');
} else if (tel.match(/[^0-9'".]/)) {
$(".form-tel").addClass('novalidate');
} else if (tel.length < 8) {
$(".form-tel").addClass('novalidate');
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
$(".form-tel").addClass('novalidate');
} else {
$(".form-tel").addClass('validate');
}
if(email === '') {
$(".form-email").addClass('novalidate');
} else if ( !validateEmail(email) ) {
$(".form-email").addClass('novalidate');
} else {
$(".form-email").addClass('validate');
}
});Придумать единую функцию подсветки
Ошибка при отправке
В одном из проектов, на выделенном сервере, столкнулся с тем что функция mail (и wp_mail) не отправляли письма. Решил это установкой плагина Easy WP SMTP (300 000), в котором прописал настройки SMTP созданного ящика почты домена.
Был случай, также на выделенном сервере, что не работала отправка функцией mail, но при этом wp_mail отправляется нормально.
Защита полей перед отправкой
Поля перед отправкой необходимо защищать:
$name = sanitize_text_field( $_REQUEST['name'] );
$tel = sanitize_text_field( $_REQUEST['tel'] );
$object = sanitize_text_field( $_REQUEST['object'] );
$quest = sanitize_textarea_field( $_REQUEST['quest'] );
$email = sanitize_email( $_REQUEST['email'] );Дополнительное письмо отправителю
В некоторых специфических формах может потребоваться отправка дополнительного письма адресату с подтверждением получения заявки.
Оптимально это сделать посредством создание отдельной страны с шаблоном ответа и добавлять заголовок и содержимое страницы в виде заголовка и содержимого письма:
// Отправляем почтовое сообщение
if(wp_mail($mail_to, $thm, $msg, $headers)) {
$response = 'Сообщение отправлено.<br>Мы свяжемся с вами в ближайшее время.';
//Письмо отправителю
$page = get_post(1511);
wp_mail($email, $page->post_title, $page->post_content, $headers);
wp_reset_postdata();
} else {
$response = 'Ошибка при отправке';
}
