Contact Form 7

HIT

24.06.2015

16862

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 "Отправить"]

Отключить обертку в <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

В новейших версиях плагина рекомендуется 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');
    });

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Форма голосования (опросы)

Форма голосования (опросы)

Создаем форму опроса по интересующему предмету. YOP Poll Еще один отличный плагин по созданию опросов. 20 000 скачиваний, но при этом 393 положительных оценки (у WP-Polls 117 оценок). В бесплатной Читать далее »

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

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

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

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

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

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

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

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

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