Array ( [0] => 11198 [1] => 9687 [2] => 6123 [3] => 8835 [4] => 8798 [5] => 8588 [6] => 8448 [7] => 7309 [8] => 6985 [9] => 6700 [10] => 3701 [11] => 3573 [12] => 2023 [13] => 1791 ) в запросе 14 результатов
Категория: 35
Ajax форма без плагина

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

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

API Яндекс.Карт

API Яндекс.Карт

Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт Подключаем API Яндекс.Карт На данный Читать далее »

Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

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

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

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

WP_Query Object
(
    [query] => Array
        (
            [post__in] => Array
                (
                    [0] => 11198
                    [1] => 9687
                    [2] => 6123
                    [3] => 8835
                    [4] => 8798
                    [5] => 8588
                    [6] => 8448
                    [7] => 7309
                    [8] => 6985
                    [9] => 6700
                    [10] => 3701
                    [11] => 3573
                    [12] => 2023
                    [13] => 1791
                )

            [orderby] => title
            [order] => ASC
            [posts_per_page] => 4
        )

    [query_vars] => Array
        (
            [post__in] => Array
                (
                    [0] => 11198
                    [1] => 9687
                    [2] => 6123
                    [3] => 8835
                    [4] => 8798
                    [5] => 8588
                    [6] => 8448
                    [7] => 7309
                    [8] => 6985
                    [9] => 6700
                    [10] => 3701
                    [11] => 3573
                    [12] => 2023
                    [13] => 1791
                )

            [orderby] => title
            [order] => ASC
            [posts_per_page] => 4
            [error] => 
            [m] => 
            [p] => 0
            [post_parent] => 
            [subpost] => 
            [subpost_id] => 
            [attachment] => 
            [attachment_id] => 0
            [name] => 
            [pagename] => 
            [page_id] => 0
            [second] => 
            [minute] => 
            [hour] => 
            [day] => 0
            [monthnum] => 0
            [year] => 0
            [w] => 0
            [category_name] => 
            [tag] => 
            [cat] => 
            [tag_id] => 
            [author] => 
            [author_name] => 
            [feed] => 
            [tb] => 
            [paged] => 0
            [meta_key] => 
            [meta_value] => 
            [preview] => 
            [s] => 
            [sentence] => 
            [title] => 
            [fields] => 
            [menu_order] => 
            [embed] => 
            [category__in] => Array
                (
                )

            [category__not_in] => Array
                (
                )

            [category__and] => Array
                (
                )

            [post__not_in] => Array
                (
                )

            [post_name__in] => Array
                (
                )

            [tag__in] => Array
                (
                )

            [tag__not_in] => Array
                (
                )

            [tag__and] => Array
                (
                )

            [tag_slug__in] => Array
                (
                )

            [tag_slug__and] => Array
                (
                )

            [post_parent__in] => Array
                (
                )

            [post_parent__not_in] => Array
                (
                )

            [author__in] => Array
                (
                )

            [author__not_in] => Array
                (
                )

            [ignore_sticky_posts] => 
            [suppress_filters] => 
            [cache_results] => 1
            [update_post_term_cache] => 1
            [lazy_load_term_meta] => 1
            [update_post_meta_cache] => 1
            [post_type] => 
            [nopaging] => 
            [comments_per_page] => 50
            [no_found_rows] => 
        )

    [tax_query] => WP_Tax_Query Object
        (
            [queries] => Array
                (
                )

            [relation] => AND
            [table_aliases:protected] => Array
                (
                )

            [queried_terms] => Array
                (
                )

            [primary_table] => wp_posts
            [primary_id_column] => ID
        )

    [meta_query] => WP_Meta_Query Object
        (
            [queries] => Array
                (
                )

            [relation] => 
            [meta_table] => 
            [meta_id_column] => 
            [primary_table] => 
            [primary_id_column] => 
            [table_aliases:protected] => Array
                (
                )

            [clauses:protected] => Array
                (
                )

            [has_or_relation:protected] => 
        )

    [date_query] => 
    [request] => SELECT SQL_CALC_FOUND_ROWS  wp_posts.ID FROM wp_posts  WHERE 1=1  AND wp_posts.ID IN (11198,9687,6123,8835,8798,8588,8448,7309,6985,6700,3701,3573,2023,1791) AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish')  ORDER BY wp_posts.post_title ASC LIMIT 0, 4
    [posts] => Array
        (
            [0] => WP_Post Object
                (
                    [ID] => 11198
                    [post_author] => 1
                    [post_date] => 2019-09-20 22:47:42
                    [post_date_gmt] => 2019-09-20 19:47:42
                    [post_content] => 

Создаем формы без использования плагинов (например 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');
	}
});
[quest]Придумать единую функцию подсветки[/quest] [post_title] => Ajax форма без плагина [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => ajax-forma-bez-plagina [to_ping] => [pinged] => [post_modified] => 2019-11-04 14:38:33 [post_modified_gmt] => 2019-11-04 11:38:33 [post_content_filtered] => [post_parent] => 0 [guid] => https://opttour.ru/?p=11198 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 8798 [post_author] => 1 [post_date] => 2017-12-10 21:30:55 [post_date_gmt] => 2017-12-10 18:30:55 [post_content] => Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт

Подключаем API Яндекс.Карт

На данный момент существуют разные версии Api. Будем подключать версию 2.1
wp_enqueue_script( 'yandex-maps', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU' , array( ), '2.0', true );
Создаем контейнер в котором будет создаваться карта
<div id="YMapsID" style="width: 100%; height: 400px;"></div>

Конструируем карту

Привожу типовой вариант карты Яндекс
ymaps.ready(function () {
    var myMap = new ymaps.Map('YMapsID', {
        center: [43.567075, 39.736186],
        zoom: 14,
		controls: ['smallMapDefaultSet']
    });
	
    myMap.geoObjects
        .add(new ymaps.Placemark([43.567075, 39.736186], {
            balloonContent: '', //Всплывающий при наведении текст
            iconCaption: 'Черноморская, 13 Г'
        }, {
            preset: 'islands#redCircleDotIconWithCaption',
            iconCaptionMaxWidth: '200'
   }));
	
	myMap.behaviors.disable('scrollZoom'); //Отключам zoom колесом при наведении
});
Координаты объекта проще всего выяснять, открыв Яндекс карты и введя необходимый адрес. Чуть ниже введенного адреса ебудут сами координаты и кнопка Скопировать. Больше настроек и параметров можно узнать на специальном сайте API Яндекс.Карт

Собственная иконка на карте

Добавляем в скрипт следующий код:
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
     '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
),

myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
     hintContent: 'Таганрогская, 140 Б, офис 16',
     balloonContent: 'НАЗВАНИЕ<br>Таганрогская, 140 Б, офис 1<br>+7 (863) 288-88-88 доб. 118<br>+7 (888) 888-88-89'
}, {

     // Необходимо указать данный тип макета.
     iconLayout: 'default#image',
     iconImageHref: '/wp-content/uploads/2018/07/bazabirs-map.png',
     // Размеры метки.
     iconImageSize: [52, 83],
     // Смещение левого верхнего угла иконки относительно её точки привязки.
     iconImageOffset: [-26, -83]
})
		
myMap.geoObjects
.add(myPlacemark)
[post_title] => API Яндекс.Карт [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => api-yandeks-kart [to_ping] => [pinged] => [post_modified] => 2018-07-07 15:08:41 [post_modified_gmt] => 2018-07-07 12:08:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://opttour.ru/?p=8798 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 2023 [post_author] => 1 [post_date] => 2015-06-24 08:40:00 [post_date_gmt] => 2015-06-24 05:40:00 [post_content] =>

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений.

Плагин Contact Form 7

Код вставки формы

<?php echo do_shortcode( '[contact-form-7 id="143" title="Контактная форма 1"]' ); ?>

Отключить обертку в <p> и добавление <br>

Чтобы это сделать нужно в файле wp-config.php прописать:

define('WPCF7_AUTOP', false );

CAPTCHA

Really Simple CAPTCHA — доп. плагин для добавления captcha
Для вставки необходимо в первое поле генерации формы добавить это:

[captchac captcha-167 class:inp_1][captchar captcha-167 class:inp_1 placeholder "Введите символы"]

Сохранение отправленных форм в админке

Flamingo — доп. плагин для сохранения всех отправленных форм в интерфейсе админки.

Цели Yandex

[warn]В новейших версиях плагина рекомендуется js-обработчики прописывать в функциях. Ниже описано подробнее.[/warn]

Добавление целей для Yandex Metrika для Form7 — в Дополнительных настройках формы прописываем строку

on_sent_ok: "yaCounterXXXXXX.reachGoal('ORDER');"
[info]yaCounterXXXXXX - номер счетчика Yandex (!не ID цели), для нескольких целей будет единым. ORDER - название цели (без пробелов и без цифр, только латинские буквы) в зависимости от назначения формы[/info]

Как протестировать отправку целей Яндекс Метрики описано здесь.

«Оформленная» форма

<p class="close"><i class="fa fa-times"></i></p>
[text* your-name class:textbox placeholder "Ваше имя"]
[date* date-615 class:textbox placeholder "Дата рождения"]
[tel* tel-968 class:textbox placeholder "Телефон"]
[email* your-email class:textbox placeholder "E-mail"]
[textarea* your-message 40x8 placeholder "Сообщение"]
[captchac captcha-167 class:inp_1]
[captchar captcha-167 class:inp_1 placeholder "Введите символы"] 
<!--[submit class:button send_one "Отправить"]--> 
<button class="send-bt"><i class="fa fa-envelope"></i> Отправить</button> 

Стили формы CSS

/* Стили формы обратной связи */

#feedback .wpcf7-form {
  position: relative;
  float:left;   
  background-color: whitesmoke;
  box-sizing:border-box;
  width: 50%;
  margin: 0 25%;
  padding: 15px 5%;  
  text-align: center;
  font-size:16px;
  transition: width 0.5s ease;
  -webkit-transition: width 0.5s ease 0s; 
  border-radius: 10px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); 
}

.wpcf7-form p {margin: 8px 0; float: left; width: 100%;}

.wpcf7-form p.close {width: 20px; height: 20px; top: -15px;}
  
.textbox {
  width:100%;
  border:rgba(0,0,0,.3) 1px solid;
  box-sizing:border-box;
  font-family: "PlayRegular"; 
  padding: 5px 10px;
}

.wpcf7-form-control-wrap {position: inherit !important; width: 100%;}

.wpcf7-captchar {
    width: 60%;
    border: rgba(0,0,0,.3) 1px solid;
    box-sizing: border-box;
    font-family: "PlayRegular";
    padding: 5px 10px;
    float: right;
}

.wpcf7-captchac {float: left; width: 30% !important;}

.wpcf7-form textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,.3);
    box-sizing: border-box;
    padding: 5px 10px;
}

.message:focus, .textbox:focus, .wpcf7-textarea:focus, .wpcf7-captchar:focus {
  outline:none;
   border:rgba(24,149,215,1) 1px solid;
   color:rgba(24,149,215,1);
}

.message{
    background: rgba(255, 255, 255, 0.4); 
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    -moz-border-radius: 3px;
    font-family: "PlayRegular";
    display:block;
    padding:10px;
    margin-bottom:30px;
    overflow:hidden;
}

.wpcf7-form .button {
    height: 40px;
    width: 70%;
    border: rgba(0,0,0,.3) 0px solid;
    box-sizing: border-box;
    padding: 10px;
    background: rgb(28, 107, 195);
    color: #FFF;
    font-family: "PlayRegular";
    transition: background .4s ease;
    -webkit-transition: background 0.5s ease 0s; 
    cursor: pointer;
    margin-top: 20px;
}

.wpcf7-form .button:hover {background: rgb(16, 68, 125);}
   
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {float: left;}

.wpcf7-not-valid-tip {
    background-color: #f00;
    color: #fff !important;
    position: relative;
    font-size: 12px !important;
    clear: both;
    display: block;
}

.wpcf7-not-valid-tip:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 45%;
    border: 5px solid transparent;
    border-bottom-color: red;
    border-top: 0;
}

.wpcf7-response-output {
    margin: 0px 5px 10px 5px !important;
    padding: 5px 10px !important;
    font-size: 14px;
}

img.ajax-loader {display: none;}


/* своя кнопка отправки */

.send-bt {
    border: none;
    background: none;
    width: 70%;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #81D426;
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s, border 0.3s;
    -webkit-transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease; 
}

.send-bt:hover {background-color: #3E8806; color: #fff;}
.send-bt:focus {outline: none;}
[info]Если текст на кнопке отправки слишком велик [submit class:button send_one "Получить консультацию по карте"] и в мобильной версии уходит за экран, можно заменить на <button class="button">Получить консультацию по карте</button>[/info]

Contact Form 7 Dynamic Text Extension

Дополнение добавляющее в плагин Contact Form 7 два дополнительных поля с динамическим содержанием (открытой и скрытое).
Есть возможность подгружать в это поле шорткоды. В примере ниже — user_favorites — шорткод

[dynamichidden dynamichidden-816 CF7_GET key='user_favorites'] — скрытое
[dynamictext dynamictext-654 CF7_GET key='user_favorites'] — открытое

Событие после отправки формы

[warn]В новейших версиях плагина рекомендуется js-обработчики прописывать в функциях. Ниже описано подробнее.[/warn]

В каждой форме в Дополнительных настройках можно выставлять события после отправки формы:

on_sent_ok:"$('#backfon').addClass('fadeOut')" - скрыть затемнение фона
on_sent_ok:"$('.popup').addClass('fadeOutDown')" - скрыть всплывающее окно
on_sent_ok:"$('#order-product').hide()" - спрятать кнопку вызывающую форму
on_sent_ok:"setTimeout(function () { $('#backfon').hide(); $('.popup').hide(); }, 700)" - скрыть фон и окно
on_sent_ok:"setTimeout(function(){$('.thanks').fadeIn('fast')},500)" - показать сообщение после отправки
on_sent_ok:"setTimeout(function(){$('.thanks').fadeOut('slow')},4000)" - спрятать сообщение

Сообщение ставим в подвал

<div class="thanks">Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.</div>

CSS сообщения

.thanks {
    position: fixed;
    left: 50%;
    z-index: 99;
    font-size: 22px;
    background-color: #043871;
    color: #fff;
    width: 200px;
    margin-left: -100px;
    padding: 25px 50px;
    display: none;
}

Редирект на другую страницу после отправки

on_sent_ok: "location.replace('http://www.SITE.com');"
либо
on_sent_ok: «location='http://адрес_страницы/';»

Дублирующиеся письма

Если мы получаем несколько одинаковых писем, то причиной может быть то что посетитель не видит подтверждения отправки формы и жмет несколько раз. Происходить это может из-за того что все уведомления отключены, а пользовательские события после отправки письма не работают из-за ошибки.. Также причиной может быть не очевидное уведомление об отправленном письме, либо задержка уведомления после отправки.

Contact Form 7 Datepicker

Еще один плагин расширяющий функционал Contact Form 7, добавляющий полноценный функционал добавления полей даты и времени с настройками оформления этих полей. Сходу плагин не работал, не появлялись всплывающие календари при выборе поля. Проблема устранилась после добавления стиля
#ui-datepicker-div {z-index: 99 !important;}

!Важной особенностью является то что поле не должно быть доступно для фокусирования. Иначе в мобильных браузерах будет происходить переход на заполнение стандартной текстовой формы. Чтобы запретить фокус на форме — необходимо прописать ему свойство readonly.

Есть такой косяк: когда даем возможность выбирать год (change-year) в выпадающем списке года выводятся в диапазоне -10 +10. Исправить это можно параметром указывающем точный диапазон годов — year-range:1940:2020. А если указать в одном из параметров now, то это будет текущий год.

Обновления обработчика событий

До конца 2017 плагин переходит с системы Дополнительные настройки, в которых прописывались js-события при отправке формы. Теперь создатели плагина рекомендуют эти события прописывать в functions.php следующим образом:

Общий обработчик событий для всех форм Contact Form 7

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>
<?php
}

Локализованный обработчик для конкретной формы (например, для счетчиков Яндекс и Google, либо для индивидуальных уведомлениях при отправке). Добавляем проверку по ID формы.

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '123' == event.detail.contactFormId ) {
ga( 'send', 'event', 'Contact Form', 'submit' );
}
}, false );
</script>
<?php
}

Также эти же скрипты можно реализовать не в виде функций, а вставлять в файл скриптов

//Обработчик событий Contact Form 7

//Общий
document.addEventListener( 'wpcf7mailsent', function( event ) {

  //$('#backfon').addClass('fadeOut');
  //$('.popup').addClass('fadeOutDown');
  //setTimeout(function () { $('#backfon').hide(); $('.popup').hide(); }, 700);
  
setTimeout(function(){$('.thanks').fadeIn('fast')},500);
setTimeout(function(){$('.thanks').fadeOut('slow')},4000);
  
}, false );

//Для конкретной формы с ID 8062
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '8062' == event.detail.contactFormId ) {

alert('Работает!');  
  
}
}, false );

Три закомментированные строки нужны, если форма сделана в виде всплывающего окна.

Обновленный обработчик с целями Яндекс

document.addEventListener( 'wpcf7mailsent', function( event ) {
 
if ( '66' == event.detail.contactFormId ) {
yaCounter44705752.reachGoal('zakazconfer'); return true; 
}

}, false );

Вложение файлов

В функционале Contact Form 7 есть возможность добавления «поля» Файл (Вложение). Выглядит поле примерно так:

[file file-481 limit:100000 filetypes:.doc|.docx|.xls|.xlsx]

limit — максимальный размер файла, причем 10000 — это 10 Kb, 100000 — 1 Mb
filetypes — допустимые расширения файлов для вложения.

Обязательно в настройках Письмо вставить в поле Прикреплённые файлы название полей [file-481]

Маска для телефона

Чтобы для поля с телефоном создать такую маску (+7 (___) ___-__-__), нужно сделать следующее:

  • Установить скрипт jquery.maskedinput.min
  • Прописать для телефонных полей (.wpcf7-tel — универсальный класс для полей с телефоном) простой скрипт:
// Маска для телефона 
$(document).ready(function() {  
	$('.wpcf7-tel').mask('+7 (999) 999-9999'); 
});

Разные адресаты в зависимости от выбора поля

Решение взято с сайта wp-kama.ru

Создаем выпадающий список и прописываем в нем пары наименование|адресат таким образом:

[select* menu-429 "Мэйл|raddis75@mail.ru" "Яндекс|raddis75@yandex.ru" "Гугл|raddis75@gmail.com"]

Пользователи будут видеть только наименования, а в настройках Письмо в поле адресат вставляем это поле, в него будет подставляться значения в виде почты.

Можно также прописать несколько ящиков в одном значении:

[select* menu-430 "Мэйл|raddis75@mail.ru,raddis75@yandex.ru,raddis75@gmail.com" "Яндекс|raddis75@yandex.ru" "Гугл|raddis75@gmail.com"]

Если из этого же поля нужно получить первое значение до слэша, например в шаблоне тела письма, то у названия поля нужно добавлять приставку _raw_

[menu-477] будет выводиться raddis75@mail.ru
[_raw_menu-477] будет выводиться Мэйл
[post_title] => Contact Form 7 [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => contact-form-7 [to_ping] => [pinged] => [post_modified] => 2019-09-29 11:08:09 [post_modified_gmt] => 2019-09-29 08:08:09 [post_content_filtered] => [post_parent] => 0 [guid] => http://opttour.ru/?p=2023 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 6700 [post_author] => 1 [post_date] => 2017-01-19 03:05:15 [post_date_gmt] => 2017-01-19 00:05:15 [post_content] => Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать.

Поле select

$('#sort').change(function(){ //функция работает при изменении select

var sortValues = $("#sort option:selected").val(); //получаем значение выбранного пункта select
//alert( sortValues );

if($("#sort").val()=="") { 
если значение поля пустое (обычно исходное состояние)		
} else {
если значение поля заполнено		
}

});

Поле checkbox

$('.metka').change(function(){ //функция работает при изменении checkbox

//собираем выбранные значения тэгов(меток) в массив, значения через запятую
var arrList = $('.metka:checkbox:checked').map(function(){
    return $(this).attr('value');
}).get();

var arrListstroke = arrList.join(' '); // преобразовываем массив в строку с разделителем ' '

if(arrList == 0) { 		
если чекбокс не включен	
} else {
если чекбокс(ы) включен(ы)					
}

});

Поле radio

Нам например нужно что-то скрыть в зависимости от выбранного пункта. В случае если необходимый нам пункт единственный:
jQuery(document).ready(function() {
	
	$('.spec').hide(); 
	
	$('input:radio[name="education"]').on('change', function () {
		if (this.checked && this.value == 'Да') { $('.spec').show(); } 
		else { $('.spec').hide(); }
	});
	
});
Если необходимых пунктов несколько:
jQuery(document).ready(function() {
	$('.spec').hide(); 
	
	$('input:radio[name="education"]').on('change', function () {
				if (this.value == 'среднее профессиональное' || this.value == 'незаконченное высшее' || this.value == 'полное высшее') {
				$('.spec').show();
				} else {
				$('.spec').hide();
				}		
	});
});
Продолжение следует.. Далее input. [post_title] => Взаимодействие форм и scripts [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => vzaimodeystvie-form-i-scripts [to_ping] => [pinged] => [post_modified] => 2018-07-13 21:21:48 [post_modified_gmt] => 2018-07-13 18:21:48 [post_content_filtered] => [post_parent] => 0 [guid] => https://opttour.ru/?p=6700 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 0 [filter] => raw ) ) [post_count] => 4 [current_post] => -1 [in_the_loop] => [post] => WP_Post Object ( [ID] => 11198 [post_author] => 1 [post_date] => 2019-09-20 22:47:42 [post_date_gmt] => 2019-09-20 19:47:42 [post_content] =>

Создаем формы без использования плагинов (например 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');
	}
});
[quest]Придумать единую функцию подсветки[/quest] [post_title] => Ajax форма без плагина [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => ajax-forma-bez-plagina [to_ping] => [pinged] => [post_modified] => 2019-11-04 14:38:33 [post_modified_gmt] => 2019-11-04 11:38:33 [post_content_filtered] => [post_parent] => 0 [guid] => https://opttour.ru/?p=11198 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 0 [filter] => raw ) [comment_count] => 0 [current_comment] => -1 [found_posts] => 14 [max_num_pages] => 4 [max_num_comment_pages] => 0 [is_single] => [is_preview] => [is_page] => [is_archive] => [is_date] => [is_year] => [is_month] => [is_day] => [is_time] => [is_author] => [is_category] => [is_tag] => [is_tax] => [is_search] => [is_feed] => [is_comment_feed] => [is_trackback] => [is_home] => 1 [is_privacy_policy] => [is_404] => [is_embed] => [is_paged] => [is_admin] => [is_attachment] => [is_singular] => [is_robots] => [is_posts_page] => [is_post_type_archive] => [query_vars_hash:WP_Query:private] => a9a6c84473441143c7919c852820ed98 [query_vars_changed:WP_Query:private] => [thumbnails_cached] => [stopwords:WP_Query:private] => [compat_fields:WP_Query:private] => Array ( [0] => query_vars_hash [1] => query_vars_changed ) [compat_methods:WP_Query:private] => Array ( [0] => init_query_flags [1] => parse_tax_query ) )
Эффекты с border
Рекомендации для васЭффекты с borderOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.