Contact form 7

Подробная инструкция по установке, настройке и использованию плагина формы обратной связи для сайта WordPress. Плагин Contact Form 7 на данный момент является наилучшим в своей категории.

То что явной альтернативы даже среди платных плагинов нет, можно судить по тому как часто используется плагин Contact Form 7. На момент написания поста только с официального сайта WordPress этот плагин был скачен более 28 800 000 раз, а средний рейтинг 4,5 из 5! Это действительно показатель большого успеха. Кроме того, если посмотреть на ТОП продаж премиум тем WP, то практически в каждой из них вы найдете плагин Contact Form 7 как рекомендуемый или установленный по умолчанию.

Плагин Contact Form 7 “живой”, обновляется автором с каждой новой версией WordPress. Баги и ошибки устраняются оперативно. Явных конфликтов с большинством часто используемых плагинов не выявлено.
Плагин Contact Form 7 полностью бесплатен в т.ч. для коммерческого использования. После установки плагина в панели настроек вы найдете обращение автора с просьбой о “пожертвовании”.

Скачать плагин Contact Form 7 с официального сайта WordPress >

Официальный форум поддержки >

Надо сказать что сам автор не часто отвечает на вопросы в форуме, но на большую часть вопросов отвечают сами посетители.

Установка плагина Contact Form 7

Плагин Contact Form 7 вы можете скачать с официального сайта WordPress (ссылка выше), или непосредственно через вкладку “Плагины” > “Добавить новый” > Строка “Поиск плагинов” > вбиваем “Contact Form 7”. Не забудьте активировать плагин перед началом работы: “Плагины” > “Установленные” > находим плагин Contact Form 7> жмем “Активировать”. В боковой административной панели вашего сайта появится новый пункт “Contact Form 7”.

Настройка плагина Contact Form 7

Что приятно, по умолчанию плагин Contact Form 7 поддерживает мультиязычность. Если ваша версия WordPress на русском языке, то плагин так же полностью будет на русском языке, при этом форму обратной связи вы можете создать на любом языке. Язык формы указывается в процессе создания каждой формы. Отдельного раздела для настроек нет, все настройки индивидуальный для каждой отдельной формы.

Пример добавления формы обратной связи

1. Выбираем в административной панели “Contact Form 7” > “Формы” > кнопка на странице “Добавить новую”.

2. Вам будет предложено выбрать язык формы. По умолчанию “русский”. Жмем кнопку “Добавить новую”
3. Перед вами открылось окно где вы можете создать свою форму со своими настройками.

Возможности обширные, но сразу хочу указать на несколько особенностей. Окно в котор открылось содержит несколько вкладок: “Шаблон формы”, “Письмо”, “Уведомления при отправке формы”, “Дополнительные настройки”. Последняя вкладка вам не потребуется, это скорее кастомизация для продвинутых пользователей и программистов. Подробно разберем остальные.

“Уведомления при отправке формы” — это те сообщения которые будет видеть посетитель вашего сайта при отправки формы. Содержаться варианты сообщений как успешной отправки, так и с ошибками и сбоями. По своему усмотрению вы можете поменять эти системные сообщения.

“Шаблон формы” — в этом разделе вы будете генерировать Теги, которые и отвечают за наличие нужных полей в форме.

“Письмо” — это внешний вид и содержание письма которое вам будет приходить после заполнения формы посетителем.

ВНИМАНИЕ: сейчас мы разберем какие теги бывают и какие поля они создают. Все эти теги вносятся в вкладке “Шаблон формы”, но если “ответные теги” вы не вносите в ручную (!) во вкладке “Письмо”, то заполненные формы будут приходить к вам на почту не полные.

4. Варианты тегов в вкладке “Шаблон формы”.

— text: добавляет текстовое поле (короткое).
— email: поле для e-mail.
— URL: поле для указание адреса сайта или любой ссылки.
— tel: поле контактного телефона
— number: поле в которое можно ввести только числовое значение
— date: поле с форматом даты
— text area: добавляет текстовое поле (длинное).
— drop-down menu: выпадающий список. У поля есть дополнительные настройки. Список который будет выпадать указывается в поле “Options”. Причем один элемент списка в одну строку (не через запятую!). Если стоит галочка у “Allow multiple selections” — пользователь сможет выбрать из вашего списка более одного варианта. Если стоит галочка у “Insert a blank item as the first option” — то будет добавленно вверху по умолчанию пустое поле, которое так же может быть выбрано пользователем.

— checkboxes: Чекбокс (галочки). Поле имеет несколько настроек. Список чекбоксов указывается в поле “Options”. Причем один чекбокс в одну строку (не через запятую!). Если стоит галочка у “Put a label first, a checkbox last” по умолчанию галка будет стоять у первого чекбокса. Если отмечен пункт “Make checkboxes exclusive”, то пользователю можно будет отметить только один из чекбоксов.

— radio buttons: радио кнопки. Радио кнопки позволяют всегда выбрать только один пункт из списка. Ввод списка аналогично чекбоксам в столбик. Из настроек можно включить “Put a label first, a checkbox last”, тогда по умолчанию будет выделена первая радио кнопка из списка.

— acceptance: поле чек бокс, без установки галочки в которое сообщение не будет отправлено. Фактически это возможность взять безоговорочное согласие пользователя с чем-то, в противном случае письмо отправлено не будет. Например “Вы соглашаетесь что переданная вами информация будет обрабатываться нашими операторами”.

— quiz: нововведение в плагине. Это поле позволяет создавать вопрос и ответ на него. Идеально использовать в качестве защиты от спама. Посмотрите на оформление вопроса и ответа в форме генерации тега.

Любое поле можно сделать обязательным (обычно такие поля отмечаются *) для заполнения, для этого надо поставить галочку в поле Field type > Required field. Внимание! Не забудьте текстом обозначить пользователям что поле надо заполнить обязательно!

— CAPTCHA: капча устанавливается только как дополнительный плагин. Но в принципе при наличии тега quiz необходимость в капле значительно меньше.

— file: поле создает тег дающий возможность пользователю прикрепить к сообщению файл. В настройках тега можно указать “File size limit (bytes)” максимальный размер прикрепляемого файла, разрешенные типы файлов (расширения через запятую). Внимание, если вы не указываете максимальный размер прикрепляемого файла, то по умолчанию он определяется возможностями вашего сервера. Точную информацию по ограничениям вы можете узнать у компании предоставляющей вам хостинг. Обычно максимальный размер ограничен 10 Мб.

submint: тег добавляет кнопку “Отправить” (название можно поменять).
Это скрин со всеми генерированными мною тегами, а ниже скрин формы на сайте. Обратите внимание, что “Шаблон формы” поддерживает HTML теги, поэтому пояснения для пользователей я оформляю с помощью HTML тегов.

5. Вкладка “Письмо”.

Теперь перейдем в форму генерации письма которое будет отправляться вам и добавим те теги которые мы использовали в “шаблоне формы”. Обратите внимание на скрин. Поля не внесенные в тело письма вынесены наверх вкладки черным цветом, а те которые присутствуют в теле письма — серые.

Вносим их в тело письма (поле “Message Body”): просто копируйте теги выделенные черным и вставляйте их в форму тела письма. Обратите внимание что номера обозначенные в тегах совпадают с уникальными номерами полей которые вы добавляли в шаблоне формы. Таки образом вы можете идентифицировать какое поле к чему относится и подписать их непосредственно в теле письма, что бы потом не запутаться.
Сохраняем изменения.

6. Установка формы на сайт.

C странице создания формы копируем шор код (обычно он выделен синим или коричневым цветом) и вставляем его в любую страницу или пост.

Плюсы и минусы кратко

Плюсы
+ большое количество типов полей
+ поддержка мультиязычности
+ простота использования
+ бесплатный
+ надежный
+ не конфликтует с другими плагинами
+ плагин Contact Form 7 развивается

Минусы:
— надо не забывать вносить дополнительные теги в генерированное письмо
— оформление формы и письма требует минимальные знания HTML

Вывод: безусловно отличный редактор, если не сказать — лучший! Радует гибкость, надежность и стабильность. Если бы он был платный, его все равно бы покупали, т.к. по качеству близкого к нему нет и рядом. Рекомендую плагин Contact Form 7.

site2max.ru

Делаем форму обратной связи с помощью плагина Contact form 7

Сперва устанавливаем плагин, скачав его с официальной страницы. Затем приступаем к самому процессу создания формы.

После установки плагина в админ-панели WordPress появляется новый пункт, который называется точно также,как и плагин — Contact form 7.

«>

Мы можем сразу добавить новую форму, перейдя в пункт «Добавить новую» или же отредактировать существующую, которая создается при установке плагина.

«>

Имеет она название «Контактная форма 1». Я же предлагаю создать новую форму, чтобы увидеть весь процесс наглядно. Тогда не составит труда редактировать уже существующие формы. Поэтому, мы жмем на пункт «Добавить новую» и попадаем в редактор форм, где сразу же нужно выбрать нужный вам язык.

Если нужен русский язык (по умолчанию), то жмете на первую кнопку добавить.

«>

Если же нужен другой язык, то выбираете его из списка и продолжаете создание формы.

«>

Меня, естественно, интересует вариант по умолчанию. Поэтому я жму на кнопку «Добавить новую» и попадаю на страницу со всеми настройки формы.

Первым делом нас интересует заголовок формы. Я рекомендую назначить уникальное имя для формы. Это нужно для того, чтобы при создании новых форм вы не путались. Чтобы вы четко знали где какая форма и могли отредактировать нужную.

Так как форму я буду размещать на странице, то примерно так ее и назвал — «Форма обратной связи для страницы Контакты».

«>

Далее нас интересует следующий блок настроек — «Шаблон формы». Это тот шаблон, в котором будут выводиться необходимые поля, которые нужно будет заполнить и их названия.

«>

Как видим, имеются все самые необходимые поля:

• поле для ввода имени;
• для ввода e-mail;
• для ввода темы сообщения;
• для ввода самого сообщения;
• кнопка для отправки.

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

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

Чтобы реализовать это поле, сначала нужно в стандартный шаблон добавить еще одно поле. Делаем это следующим образом. Копируем 2 предпоследние строки, то есть код вывода поля сообщения, и дублируем их. Должно получиться, как на скриншоте ниже.

«>

Теперь необходимо изменить название поля. Изменяем фразу «Сообщение» на «Прикрепить файл».

«>

Далее в этом же коде нужно заменить вторую часть «[textarea your-message]» на код, который будет выводить поле для выбора файла с компьютера. Сначала необходимо сгенерировать такой код. Для этого справа шаблона формы имеется специальная функция генерации тега. Жмем на нее и выбираем из всего списка пункт «Отправка файла».

«>

Далее появится блок настроек для поля прикрепления файла. Нам нужно в нем 2 небольших кода.

«>

Первым кодом мы заменяем ранее указанную часть кода в шаблоне формы.

«>

Вторую часть мы вставляем в поле «Прикрепленные файлы», которое находится в блоке «Адресат».

«>

Теперь можно сохранять созданную форму, нажав на кнопку вверху страницы справа от названия формы.

«>

Под названием формы появится код, который будет выводить форму обратной связи на странице. Его и нужно вставить в редактор страницы в текстовом режиме.

«>

Создаем новую страницу. Назову ее «Контакты». В текстовый редактор размещаю этот код.

«>

Теперь можем перейти на страницу. Должны увидеть саму контактную форму со всеми полями. У меня все получилось и форма имеет следующий вид.

«>

Далее я предлагаю проверить форму, чтобы убедиться, что письма доходят.

Для этого мы заполняем все поля и для примера можно прикрепить какой-то графический файл (картинку).

После того, как я заполнил все поля и нажал на кнопку «Отправить» мне без перезагрузки страницы, что очень хорошо, показало сообщение об успешной отправке.

«>

Но действительно ли это так? Переходим в почту и видим, что сообщение действительно пришло.

«>

Перейдя в него, увидим содержание самого обращения с данными об отправителе и прикрепленным файлом.

«>

Сообщение пришло. Также файл прикрепился. Значит, сделали все правильно. Если у вас также, то можете спать спокойно. Но я предлагаю проделать еще одно действие. Нужно проверить работоспособность формы на проверку ошибок при заполнении.

Бывают такие формы обратной связи, которые некорректно проверяют заполнение обязательных полей. Случайно забыл вписать поле e-mail и отправил сообщение. Форма написала, что сообщение успешно отправлено, но на самом деле обращение не будет доставлено владельцу сайта. А мы ждем ответа и ждем.

Как правило, такая ситуация распространена в формах ОС, которые делаются с помощью кодов без плагина. В данном же случае, если мы не заполним какое-то обязательное поле, нам выдаст ошибку и подпишет необходимые поля для заполнения.

«>

Форма прекрасно работает, что и следовало сделать.

Если возникли какие-то неясности то прошу смотреть мой подробный видео-урок. В нем будет более наглядно все описано.

На этом я заканчиваю данный мануал. В следующей статье я покажу, как сделать качественную форму обратной связи без плагина. Она также будет проверять ошибки при заполнении, удачно доставлять письма и иметь красивое компактное оформление.

«>

Такая реализация сейчас у меня на блоге. Можете посмотреть на странице «Написать мне».

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

На этом с вами прощаюсь. Пишите свои комментарии, предложения, идеи и все, что душа пожелает. До скорой.

С уважением, Константин Хмелев!

kostyakhmelev.ru

Простой пример оформления писма на электронную почту администратору сайта путем использования HTML формата письма Contact Form 7 WordPress.

Так выглядет письмо, код которого я опубликавал ниже, в почтовом клиенте.

По умолчанию письма с контактной формы, которую генерирует плагин Contact Form 7 не стилизованны. Но в плагине предусмотрена настройка использования HTML формата. Ниже привожу простой пример оформления, который можно использовать как отправную точку для создания красивого сообщения.

1. Во вкладке «Письмо» генератора контактных форм отмечаем чебокс «Использовать HTML-формат письма».

2. Вставить код письма, приведенный ниже, в «тело письма».

3. Отредактировать под свою контактную форму, подставить свои данные, добавить или убрать лишнее, изменить HTML и CSS код таблицы.

<table cellpadding="0" cellspacing="0" style="width:600px; max-width:600px; margin: 0px auto; border:1px solid #ddd;">   <thead>   <tr>   <td style="text-align:center; padding:16px; color:#fff; font-size:18px;background:#337AB7;" colspan="2">Тема письма</td>   </tr>   </thead>   <tr>   <td style="width:35%; border:1px solid #ddd; padding:12px 20px; font-size:16px;">Имя клиента:</td>   <td style="width:65%; border:1px solid #ddd; padding:12px 20px; text-align:center; font-size:16px;">|text-96|</td>   </tr>   <tr>   <td style="width:35%; border:1px solid #ddd; padding:12px 20px; font-size:16px;">Телефон:</td>   <td style="width:65%; border:1px solid #ddd; padding:12px 20px; text-align:center; font-size:16px;">|tel-219|</td>   </tr>   <tr>   <td style="width:35%; border:1px solid #ddd; padding:12px 20px; font-size:16px;">Е-mail:</td>   <td style="width:65%; border:1px solid #ddd; padding:12px 20px; text-align:center; font-size:16px;">|email-998|</td>   </tr>   <tr>   <td style="width:35%; border:1px solid #ddd; padding:12px 20px; font-size:16px;">Сообщение:</td>   <td style="width:65%; border:1px solid #ddd; padding:12px 20px; text-align:center; font-size:16px;">   |textarea-523|   </td>   </tr>   <tr>   <td colspan="2" style="border:1px solid #ddd; background:#eee; padding:12px 20px; font-size:14px; text-align:center;" >Это сообщение отправлено со страницы контактов сайта <br> <a href="https://mysite.ru">MySite</a></td>   </tr>  </table>

При создании HTML формата письма Contact Form 7 использована табличная верстка, для корректного отображения во всех почтовых клиентах. Стили прописаны inline по тому же.

svsites.ru

Пользовательские события Custom DOM Events для Contact Form 7

к менюВ связи с тем, что разработчики плагина CF7 решили убрать дополнительную настройку «on_sent_ok» и «on_submit», в плагин с версии 4.9 была добавлена возможность создания дерева пользовательских / клиентских событий. Ниже я приведу пример всех событий и покажу как переписать функцию чтоб перейти с on_sent_ok и on_submit на события wpcf7mailsent и wpcf7submit.

Новые события CF7:

wpcf7submit: — событие, которое возникает после отправки формы, не зависимо от результата. Это новый аналог настройки «on_submit», который сработает в любом случаи когда нажали на кнопку отправить форму. Даже если пользователь не заполнил все поля или получил ошибку это событие будет срабатывать. Пример использования:

wpcf7mailsent: — новый аналог «on_sent_ok», срабатывает только когда пользователь получит сообщение о том что его сообщение «успешно отправленно».

wpcf7invalid: — событие, которое сработает если пользователь пытался отправить форму с не заполоненным обязательным полем

wpcf7spam: — срабатывает, когда есть подозрение что это спам и отправка формы не идет

wpcf7mailfailed: — новое событие, которое срабатывает когда сервер не может отправить письмо. (Очень удобно, для тех кто дорожит каждым заказом и хочет в метрике или аналитике отследить всех пользователей что не смогли отправить сообщение из сайта)

 

Как пользоваться новыми событиями Contact Form 7

Пошаговая инструкция для добавления клиентских событий dom в Contact Form 7:

1) Создать файл яваскрипт, например myscript.js у себя на ПК

2) Записать в него нужный код, например вот этот:

Учтите что ваша форма может иметь другой ИД, не 32. ИД можно посмотреть вот так:

3) Сохранить файл.

4) Записать его в вашу тему на сервере, можно в корень темы.

5) Открыть файл темы functions.php и в самое начало добавить код подключения этого файла:

6) Сохранить изменения.

 

Дополнительные настройки для Contact Form 7

к менюс версии плагина 4.9 список дополнительных настроек для contact form 7 — уменьшен

on_sent_ok: — (согласно документации CF7 эта дополнительная настройка будет отключена в 2017 году) событие contact form 7, срабатывает, когда сообщение было успешно отправлено. Подходит для отслеживания информации в яндекс метрике (цели) или в целях google analytics. Для того чтоб воспользоваться этим событием достаточно вставить функцию вызова javascript кода или сам код, например вот так:

on_submit: — (согласно документации CF7 эта дополнительная настройка будет отключена в 2017 году) событие contact form 7, срабатывает когда была нажата кнопка отправить / send / submit. Идеально подходит для целей google analytics и яндекс метрика цели, ведь вы всегда можете узнать почему успешная отправка сообщения не произошла. Использовать это событие можно аналогично предыдущему on_sent_ok:

demo_mode: — дополнительный параметр CF7, который позволяет тестировать работу формы без отправки сообщения по почте. Так сказать тестовый режим формы. Чтобы включить его, достаточно написать в дополнительные настройки вот такой код:

acceptance_as_validation: — дополнительный параметр CF7, он работает с чекбоксом acceptance и делает кнопку отправки сообщения активной для нажатия, даже когда acceptance равняется false. Включается в дополнительных настройках CF7 вот такой опцией:

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

 

Настройка целей google analytics в contact form 7

к меню Сейчас поробую расказать вам как настроить цели в contact form 7 google analytics.

Извините, по состоянию на 26.06.17 этот код не актуальный в связи с тем что гугл обновил код вызова целей. Ожидайте новой информации. Спасибо.

Для начала вы должны зарегистрироваться в google analytics ( www.google.com/analytics), а также зайти в «Администратор», выбрать «Аккаунт» и «Ресурс», создать «Представление» и там настроить цели.

Предположим у нас есть вот такой код для создания цели в google analytics: _gaq.push([‘_trackEvent’, ‘order’, ‘view’]) , теперь мы можем написать обработчик события отправленного сообщения в contact form 7:

если мы хотим отслеживать все успешные отправки формы, или вот такой код:

если нам нужны все клики (с удачной и неудачной отправкой формы) по кнопке «Отправить»

Записывать этот код нужно в дополнительные настройки contact form 7.

 

Настройка contact form 7 цели метрика

к менюНастройка целей в метрике немного попроще чем в гугле. Механизм работы аналогичный, создаем аккаунт в метрике, создаем цель и получаем код.

Не знаете как получить код, воспользуйтесь инструкцией ниже:

В связи с тем что плагин Contact Form 7 прекратит в этом году поддержку on_sent_ok и on_submit мы вынуждены переписать пошаговую инструкцию. Смотрите внимательно какая у вас версия плагина, возможно его нужно обновить чтоб инструкция заработала

Инструкция для версии плагина CF7 4.9 и выше

Предположим что у нас получился вот такой код: yaCounter2015xxxx.reachGoal(‘Form1’); теперь нам нужно открыть в редакторе файл темы footer.php и после кода подключения метрики добавить вот такой код:

 

вместо wpcf7submit можно подставить событие wpcf7mailsent

Как вы поняли id формы мы берем от сюда:

вставляем этот код в редакторе как показано на кликабельном рисунке рисунке:

 

Событие contact form 7 для кнопки submit / отправить

к менюЯ хотел бы более детально остановится на событиях плагина. Событие wpcf7submit позволяет отслеживать нажатие по кнопке отправить или submit. Это довольно удобный функционал в дополнительных настройках, который позволяет делать собственные эффекты при клике по кнопке отправить и многое другое. Для вызова достаточно в скриптах или в футере прописать вот такой слушатель события:

, где goBlackFon — это ваша функция с записанными спец эффектами.

Список событий позволяет менять настройки, например если использовать wpcf7invalid то мы можем изменить стиль сайта, когда пользователь не заполнил все поля.

Событие сообщение отправлено в contact form 7

к менюwpcf7mailsent — срабатывает когда сообщение было отправлено успешно и не работает когда человек не заполнил полностью нужные данные. На базе этого события можно реализовать: гугл и яндекс цели, разного рода эффекты на страница после отправки сообщения, редиректы на другие страницы после отправки почты, добавление или расширение функционала (после того как человек заполнил и успешно отправил контактные данные о себе), вызов аякс приложения для последующей работы с ним и многое другое. Мне приходилось реализовывать генерацию ссылки на скрытый файл после заполнения формы и это удалось только благодаря событию wpcf7mailsent. Предположим нам нужно вызвать свою функцию после отправки сообщения, это делается вот так:

В заключение хочу добавить, что умело используя contact form 7 дополнительные настройки вы сможете справится с большинством задач, которые ставит перед вами задачи.

Например, очень затребованная задача, редирект после отправки формы с сайта, делается вот так:

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

Вывод Contact Form 7 в шаблон

к менюРешил немножко дополнить этот пост информацией о выводе плагина CF7 в произвольное место шаблона, так как многих читателей интересует именно этот вопрос.

Сделать вывод Contact Form 7 в виджет или пост довольно просто, нам нужно банально взять шорткод и вставить в нужное место, а вот с произвольным выводом в шаблон придется повозится.

Для вывода CF7 в шаблон WP я использую вот такой код:

Более детально о Contact Form 7 настройка можно прочитать перейдя по ссылке.

help-wp.ru

Скачайте предложенный js файл к себе на сайт в КАКУЮ ХОТИТЕ директорию. В шаблоне сайте подключите по принципу:

< script type='text/javascript' src='http://ваш_сайт.ru/КАКАЯ_ХОТИТЕ_ДИРЕКТОРИЯ/jquery.maskedinput.js'>