/ Плагины / Contact Form 7

Contact Form 7

HIT

24.06.2015

28919

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 — доп. плагин для сохранения всех отправленных форм в интерфейсе админки.

Если формы подвержены СПАМу, то данный плагин создаст в таблице wp_posts множество записей. Чистить их !все можно запросом в phpMyAdmin:

DELETE FROM `wp_posts` WHERE `post_type` = 'flamingo_inbound';

Цели Yandex

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

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

on_sent_ok: "yaCounterXXXXXX.reachGoal('ORDER');"

yaCounterXXXXXX — номер счетчика Yandex (!не ID цели), для нескольких целей будет единым. ORDER — название цели (без пробелов и без цифр, только латинские буквы) в зависимости от назначения формы

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

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

<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;}

Если текст на кнопке отправки слишком велик
[submit class:button send_one «Получить консультацию по карте»]
и в мобильной версии уходит за экран, можно заменить на
<button class=»button»>Получить консультацию по карте</button>

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'] — открытое

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

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

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

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://адрес_страницы/';»

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

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

Исправить это можно скриптом (при многократном нажатии отправка будет происходить 1 раз):

(function($) {
	$(document).ready(function() {

		fixCF7MultiSubmit();

		function fixCF7MultiSubmit(){
			jQuery('input.wpcf7-submit[type="submit"]').click(function() {
				var disabled = jQuery(this).attr('data-disabled');
				if (disabled && disabled == "disabled") {
					return false;
				} else {
					jQuery(this).attr('data-disabled',"disabled");
					return true;
				}
			});
			jQuery('.wpcf7').bind("wpcf7submit",function(){
				jQuery(this).find('input.wpcf7-submit[type="submit"]').attr('data-disabled',"enabled");
			});
		}
	});
}(jQuery));

А также прописать стиль, чтобы при успешной отправке исчезала кнопка Submit:

.wpcf7-form.sent input[type="submit"] {display: none;}

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] будет выводиться Мэйл

Подключить скрипты и стили CF7 только когда есть форма

function rjs_lwp_contactform_css_js() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'contact-form-7') ) {
        wp_enqueue_script('contact-form-7');
         wp_enqueue_style('contact-form-7');

    }else{
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'rjs_lwp_contactform_css_js');

Если стили CF7 итак изначально отключены, то можно добавлять свои, при инициализации формы

// Подключаем стили Contact Form, только когда есть форма
function rjs_lwp_contactform_css_js() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'contact-form-7') ) {
        wp_enqueue_script('contact-form-7');
		wp_enqueue_style( 'cf7-custom-style', get_template_directory_uri() . '/css/contact-form-7-custom-style.css' , array( ), '1.0' , 'screen' );

    }else{
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'rjs_lwp_contactform_css_js');

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Подключаем КЛАДР

Подключаем КЛАДР

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

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

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

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

Форма подписки без плагина

Форма подписки без плагина

Создаем простую форму подписки без какого-либо плагина. Далее возможны различные варианты применения этого функционала. Создание формы подписки // Функция формы подписки if(!function_exists('kv_email_subscription_fn')) { add_action('kv_email_subscription' , 'kv_email_subscription_fn' ); function kv_email_subscription_fn() { Читать далее »

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

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

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