/ Адаптивность / Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например 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'] );

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Версия сайта для слабовидящих

Версия сайта для слабовидящих

Создадим блок с настройками в котором будут изменятся параметры сайта, такие как цветовая схема и размер шрифта. Для полноценной работы данного решения потребуется подключение jquery.cookie.js. Блок настроек Данный блок я Читать далее »

Ajax форма с вложением файла

Ajax форма с вложением файла

Долго искал и нашел (здесь www.thenerdyblog.com) отличное решение — форма с вложением файла на ajax. Форма Скрипт Файл-обработчик Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку: Читать далее »

/
Сбор ящиков для подписки в БД

Сбор ящиков для подписки в БД

Создадим форму для сбора email для подписки, которая будет сохранять значения в специальную таблицу в БД. Форма Скрипт по передаче данных (ajax) Стили формы Функция по отправке формы Данная функция Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Ajax форма без плагина
Отделить категории от товаров
Рекомендации для васОтделить категории от товаровOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.