Contact Form 7

HIT

24.06.2015

8756

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

Плагин Contact Form 7

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

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

Форма обратной связи

[text* your-name placeholder "Ваше имя"]

[email* your-email placeholder "Ваш E-Mail"]

[text your-subject placeholder "Тема"]

[textarea your-message placeholder "Ваш вопрос"]

[submit "Отправить"]

CAPTCHA

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

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

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

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

Цели Yandex

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

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

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

Добавление целей для Yandex Metrika для обычной ссылки (можно устанавливать на любой объект):

<a href="/price.zip" onclick="yaCounterXXXXXX.reachGoal('ORDER'); return true;">Прайс</a>

Если у ссылки уже есть параметр onclick, то лучше повесить счетчик на js. Пример:

$('a.notranslate').click(function() {
yaCounter66285164.reachGoal('clickeng'); return true;
});

Добавление целей для формы

<form onsubmit="yaCounter33638554.reachGoal('zakaz'); return true;" >

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

Протестировать цели на работоспособность можно таким образом:

  1. добавляем к url странице с целью запрос/?_ym_debug=1
  2. открываем инструменты разработчика, вкладку Console
  3. там будет содержаться созданная цель и при успешной активации цели будет выводиться строка Reach goal

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

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

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

/* плавное изменение прозрачности  placeholder-а при фокусе */

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder, textarea::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder, textarea:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder        {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

Если текст на кнопке отправки слишком велик
[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://адрес_страницы/';»

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

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

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

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Расширенный заголовок

Расширенный заголовок

Для добавления в атрибуты записи Расширенного заголовка существует плагин Secondary Title Простое добавление после стандартного заголовка <?php the_title(); ?><br> <?php echo get_secondary_title($post_id, $prefix, $suffix); ?> Если мы хотим чтоб расширенный заголовок (если он Читать далее »

Плагин: Миниатюра таксономии

Плагин: Миниатюра таксономии

Обычно для добавления изображения (миниатюры) таксономии импользую плагин Advanced Custom Fields. Плагин хороший, но довольно тяжеловат, т.к. является мощным многозадачным плагином. Есть более легковесная альтернатива — плагин taxonomy term image Читать далее »

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

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

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

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

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

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