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

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

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Создаем формы без использования плагинов (например 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 = 'tiberium84@mail.ru';
    $headers = "Content-Type: text/html; charset=utf-8\n";
    $headers .= 'From: no-replay@opttour.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');
	}
});

Придумать единую функцию подсветки

Тэги:

Поделится информацией с друзьями

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

Взаимодействие форм и scripts

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать. Поле select $('#sort').change(function(){ //функция работает при изменении Читать далее »

Типовые поля форм

Типовые поля форм

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности. Input Классный эффект для любых форм на сайте. При нажатии на форму placeholder плавно исчезает. Читать далее »

Заявка на товар

Заявка на товар

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

/

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

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

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