Все секреты плагина Contact Form 7
Я опишу несколько ситуаций, в которые попадал во время работы с клиентскими сайтами, а также предоставлю решения возникших проблем с Contact Form 7.
Валидация телефонного номера в Contact Form 7
Как сделать в Contact Form 7 поле для ввода телефона? Это не сложно, мы воспользуемся помощью готового JS скрипта «Masked Input Plugin».
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем текстовое поле
Шаг 2. Скачиваем js скрипт тут http://digitalbush.com/projects/masked-input-plugin/ (подключаем в шаблон своего сайта как обычный js файл).
Шаг 3. В файле functions.php своей темы добавляем следующий код:
Теперь у нас появилось поле с вводом телефона по маске +7 (___) ___-__-__ Поле требует ввода только цифр, при не полном заполнении попросит его заполнить. Такими нехитрыми шагами мы реализовали валидацию телефонного номера в поле формы Contact Form 7.
Передача Get-запросов в форму Contact Form 7
Как передать данные в форму Contact Form 7 Get-запросом? Шагов всего три:
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем поле:
Шаг 2. В functions.php своей темы добавляем следующий код:
Шаг 3. Чтобы передать данные в форму которая находится по адресу /contact.htm, мы должны сформировать ссылку таким образом:
Отправка SMS из Contact Form 7
Как отправить SMS из Contact Form 7? Шагов всего два:
Шаг 2. Для того чтобы подготовить SMS, нам надо перехватить передаваемые данные из Contact Form 7. Сделать это можно в файле functions.php Вашей темы:
Вызов Contact Form 7 лишь на отдельной странице
Как правило, формы обратной связи для посетителей размещаются на отдельно взятой странице сайта, типа «О нас«, «Контакты«, «Обратная связь» и т.д. Но если мы откроем исходный код нашего сайта на любой странице, то заметим там вызов файлов плагина Contact Form 7, например:
Получается, что файлы плагина грузятся в браузер пользователя даже тогда, когда вообще не нужны! Как вызвать Contact Form 7 лишь на отдельной (целевой) странице сайта? Нас выручит код, который размещаем в functions.php текущей темы:
Код разрешит активацию плагина Contact Form 7 только на странице наш_сайт.ру/contact
Переадресация после отправки формы Contact Form 7
По умолчанию, после заполнения и отправки данных с формы Contact Form 7, пользователь остается на той же странице, получая по Ajax сообщение о статусе отправки сообщения. В некоторых случаях и для некоторых целей иногда полезно переадресовать пользователя на отдельную страницу. Сделать это можно используя встроенные возможности. В конструкторе контактной формы перейдите на вкладку «Дополнительные настройки» и добавьте строчку кода:
случае успешной отправки письма с контактной формы, пользователь будет переадресован на http://ваш_сайт.ру/spasibo/
Вывод Contact Form 7 в шаблоне сайта
Контактную форму CF7 можно вставить в любую запись или страницу сайта используя шорткод из раздела «Код вставки«. Он выглядит примерно следующим образом:
А если нужно контактную форму CF7 вставить в нижнюю сайта, непосредственно в файл footer.php вашей текущей темы WordPress? В таком случае, код придется немного модифицировать:
Дополнительный функционал для CF7
Некоторые задачи с CF7 невозможно решить путем встраивания несложного кода в functions.php, поэтому можно обратиться за помощью к сторонним плагинам, которые расширяют и дополняют функционал CF7. Их можно найти на любой вкус и цвет, для самых разнообразных задач (можно искать в каталоге плагинов WordPress по ключу CF7 ). Возможно, Вам пригодятся:
На этом все! Кому помог, благодарственные комментарии приветствуются!
Contact Form 7
Один из самых популярных плагинов для создания контактных форм на сайте. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню «Contact Form 7», через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу «Связаться со мной» и вставим туда шорткод формы.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем «Вставить тег».
Тег [text* your-name] в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
Полный список полей смотрите в отдельной статье.
Шаблон письма
Заголовки письма:
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
Существуют ещё специальные теги для шаблона письма, позволяющие сделать ваше письмо более содержательным.
Не обязательные поля в теле письма
Опция «Использовать HTML-формат письма». Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
Создание своих тегов формы (шорткодов)
Описываемые ниже действия создадут произвольные теги, которые потом можно будет использовать в шаблоне формы Contact Form 7. Это расширит возможности плагина и выведет их на новый уровень. Однако для этого вам надо иметь некоторые навыки программирования и четко понимать как создаются шорткоды в WordPress, так как создание шорткода для Contact Form 7 проводится по аналогии.
Создать свой шорткод в Contact Form 7 можно несколькими путями, каждый из них имеет плюсы и минусы. Рассмотрим каждый в отдельности.
Добавление тега формы (шорткода) в Contact Form 7 (вариант 1)
Для этого, добавим следующий код в functions.php :
Теперь используем созданный только что тег формы [hello_world] в шаблоне формы. При просмотре он будет преобразован в:
Как видно, наш текст обернулся в
тег. Чтобы запретить такую обертку, используйте константу WPCF7_AUTOP.
Добавление тега формы (шорткода) в Contact Form 7 (вариант 2)
По умолчанию, шорткоды WordPress не работают в Contact Form 7, но это легко поправить с помощью фильтра:
Добавив такой хук, мы можем создать обычный шорткод WordPress с помощью add_shortcode() и он будет работать в форме CF7:
Данный код был подсмотрен в плагине Contact Form 7 Shortcode Enabler.
Включаем работу тега формы (шорткода) в шаблоне письма
Сделать это можно через фильтр wpcf7_mail_components :
Теперь [hello_world] в шаблоне письма будет заменен на текст «Привет! Я шорткод для Contact Form 7!».
Предыдущие варианты удобны, когда нужно вывести статическую информацию, с которой пользователь не будет взаимодействовать, например какой-то текст или баннер. Даже если шорткод будет предполагать вывод какого-то поля, то в письме придет не значение этого поля, а html код этого поля.
А теперь давайте посмотрим, как быстро и просто создать тег с динамичным содержанием, например с именем текущего пользователя. Для этого установим плагин Contact Form 7 Dynamic Text Extension расширяющий возможности самого CF7.
Плагин повторяет встроенный функционал Contact Form 7 с атрибутом default, но вдобавок умеет запускать произвольный шорткод.
Contact Form 7 Dynamic Text Extension позволяет использовать два дополнительных тега полей формы:
[dynamictext name-field] По умолчанию обычное текстовое поле input type=»text» [dynamichidden name-field] По умолчанию скрытое текстовое поле input type=»hidden» меню
Пример использования
Допустим мы уже зарегистрировали шорткод [hello_world] и нам нужно использовать его в значении поля формы так (этот код не рабочий):
Dynamic Text Extension расширяет возможности CF7 и позволяет использовать поле с переданным названием шорткода:
В результате этот тег формы превратиться в:
То есть содержимое произвольного тега (шорткода) [hello_world] стало значением текстового поля. Данный тег работает в шаблоне формы, шаблоне письма и других вкладках формы (например уведомлениях).
Ещё один пример
Код для functions.php:
В результате, в письме придёт адрес поста, с которого отправили форму, что довольно полезно для сайтов-витрин товаров или услуг. Данный код работает как в единичном посте, так и в цикле.
Удобные преимущества
А чтобы отредактировать шаблон, нужно редактировать форму, а она может быть не одна. Но когда этот функционал реализован через свой тег, то достаточно изменить код тега и получить результат сразу для всех форм, где этот тег используется.
Например, переделаем код шорткода в более привлекательный:
Имейте ввиду, что такой метод может в некоторых случаях вызвать ошибку, так как все содержимое шорткода помещается в атрибут value.
Исходный код поля из примера:
Для подобных случаев лучше воспользоваться другим способом из этой статьи.
Пример: чекбокс для выбора рубрики
Допустим нам нужно вывести список рубрик в форме (рубрика будет выбираться через чекбокс). Если делать это стандартным тегом [checkbox] пришлось бы перечислять все рубрики блога вручную, а потом еще добавлять их при добавлении новых рубрик. Такая ручная работа нам не подходит, поэтому автоматизируем все это в два этапа.
1) Создадим шорткод [cat_like] для формы:
Этот шорткод будет выводить список всех рубрик сайта в виде чекбоксов.
2) Добавим наш шорткод в шаблон формы:
Шаблон письма
Теперь осталось вставить в шаблон письма тег [category-like] и на его месте в письме будут показаны названия рубрик, которые выбрал пользователь.
Шорткод с помощью плагина Listo
1) Добавляем тип списка
2) Описываем класс для получение рубрик
Как видно, код работает на основе функции WP get_categories, параметры которой смотрите в описании.
3) Теперь используем тег выпадающего списка Listo в шаблоне формы
В нем в параметре data указываем какой тип данных надо получить (ключ из первого кода)
И используем тег [categories-like] в шаблоне письма, чтобы получить в письме выбранную пользователем рубрику.
Добавление нового тега формы (шоткода) с кнопкой в настройках Contact Form 7
Это базовый пример, как создать свой шоткод на основе исходников самого плагина. Будет создан тег поля по подобию выпадающего списка и сможет группировать значения с помощью Html атрибута optgroup. В остальном будет обладать теми же возможностями, что и оригинал. Реализуем следующее меню:
PHP Код
Вставляется в functions.php или оформляется в виде плагина
Процесс добавление тега сгрупированного выпадающего списка:
Шаблон формы:
html код поля select
Этот способ лишен недостатков похожего метода создания сгруппированного выпадающего списка с помощью JavaScript, описанного в статье о хаках к плагину CF7.
Добрый день. Можете подсказать, как получить значение заголовка всплывающего окна popup maker и передать его в CF7 с помощью плагина «Contact Form 7 Dynamic Text Extension». Спасибо
Полное руководство по Contact Form 7
Установка плагина
1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.
Установка плагина Contact Form 7 из админки WordPress
2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.
Вывод на сайте
После активации в админке откройте раздел Contact Form 7.
Список форм
В списке уже есть готовая форма. Вы можете создать их сколько нужно. Для каждой автоматически создается уникальный шорткод. Чтобы показать форму на сайте, его нужно вставить в редакторе контента или в шаблоне темы. Для примера выведем на отдельной странице.
1. Кликните Страницы > Добавить новую.
Создание новой страницы на сайте WordPress
2. Укажите название (например Контакты).
3. Скопируйте шорткод.
Шорткод формы
4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.
Блок Шорткод
В итоге пользователь увидит:
Страница с формой CF7
Как создавать формы
Перейдите Contact Form 7 > Добавить новую.
Создание контактной формы
CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нажмите кнопку нужного элемента.
В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:
Символом «*» отмечены обязательные к заполнению поля.
Если вы пока не определились с полями, оставьте как есть. К ним сможете вернуться позже.
Настройка письма
Когда заполненная пользователем форма обратной связи будет отправлена, администратор сайта получит email-уведомление. В нем указано имя посетителя, контакты и текст сообщения. Вы можете настроить формат этого уведомления. Для этого откройте вкладку Письмо.
В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.
Настройка уведомлений
Следующая закладка отвечает за сообщения, которые будут выводиться при заполнении формы.
Настройка уведомлений при отправке формы
Интеграция reCaptcha
1. В браузере наберите https://www.google.com/recaptcha/admin/create
2. В опции Ярлык введите произвольное название, отметьте reCAPTCHA v3, в настройке Домены укажите имя сайта, примите Условия использования и кликните Отправить.
Добавление reCAPTCHA на сайте Google
3. Скопируйте ключи.
4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.
Настройки интеграции в плагине
5. Добавьте скопированные ключи, сохраните изменения.
Установка целей метрики
В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.
1. В Метрике зайдите Настройка > Цели > Добавить цель.
Настройка цели в Яндекс-Метрике
2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.
Настройка цели в Яндекс-Метрике
3. Добавьте в файл functions.php активной Ворпресс-темы код
ID формы можно посмотреть, если открыть ее на редактирование.
Редактирование формы
Готовые шаблоны
Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.
Плагин Contact Form 7 Style
Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.
Чтобы задать внешний вид форме:
Решение проблем и исправление ошибок
Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.
Не отправляются письма
Тут может быть несколько проблем:
Как исправить?
Чтобы заставить работать почту, есть несколько способов.
1. Стандартные настройки
Откройте вкладку Письмо в своей форме и в опции Кому проверьте, правильно ли указан адрес. Он должен быть рабочим.
2. WP Mail SMTP
Если ваш хостинг ставит жесткие ограничения на отправку писем или запрещает их вообще, тогда нужно стороннее решение. Такое бывает, если использовать почтовые ящики, созданные на хостинге.
Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.
3. Код
Использовать SMTP можно без плагина, с помощью кода в functions.php.
В коде нужно вписать свой email-адрес и пароль.
Условные поля для Contact Form 7 Учебное пособие для работы с Contact Form 7 — Conditional Fields
В этом руководстве мы создадим простую форму поддержки с условными полями при помощи плагина
Спецификации
Мы хотим, чтобы форма соответствовала следующим требованиям:
Начиная
Убедитесь, что контактная форма 7 и условные поля для контактной формы 7 установлены и активированы на вашем сайте WordPress. В админке WordPress выберите «Контакт» > «Добавить», чтобы создать новую форму. Введите код формы ниже:
Это лучшее, что мы можем сделать без условной логики. Как видите, параметр «Другое» отсутствует, и есть несколько полей, которые в некоторых случаях не имеют отношения к пользователю.
Создание групп
После того, как вы щелкните по нему, появится всплывающее окно, в котором вы можете выбрать имя для группы. Вы также можете выбрать любой из этих вариантов:
, внутри встроенных элементов, таких как
, является недопустимым HTML.)
Мы пока оставим эти опции неотмеченными и создадим нашу первую группу под названием Technical-support-selected.
Вложенные группы – обратите внимание, что группы также могут быть вложенными. Таким образом, внутри группы технической поддержки можно добавить группу с полем, в котором пользователь может указать версию своей ОС.
Если вы сохраните форму на этом этапе, все, что находится между тегами группы, будет невидимо во внешнем интерфейсе. Это не очень полезно. Итак, переходим к следующему шагу!
Добавление условной логики
Чтобы группа появилась при соблюдении некоторых условий, нам нужно будет добавить условные правила. Убедитесь, что вы сначала сохранили форму, а затем щелкните вкладку «Условные поля ».
Нажмите кнопку добавления нового условного правила и введите эту информацию:
Это правило гарантирует, что группа тех поддержки станет видимой после того, как пользователь выберет «Техническая поддержка» из раскрывающегося списка. Теперь создадим еще одно правило:
Это нормально, но нам нужно что-то более продвинутое. Если пользователь выбирает «Другое» из раскрывающегося списка, мы не хотим отображать группу [os-selected], но вместо этого мы хотим показать еще 2 поля, где они могут указать свою версию ОС.
Таким образом, нам нужно скрыть [os-selected], если выполняется указанное выше условие, И если [операционная система] не равна «Other». Для этого мы можем нажать кнопку И рядом с первым условием и заполнить поля следующим образом:
Я надеюсь, что основы теперь ясны. Далее доработаем форму и добавим все условия.
Готовая форма
Если вы хотите воспроизвести форму в верхней части этой страницы, просто вставьте этот код формы в форму обратной связи 7.
Сохраните форму, перейдите на вкладку Условные поля и введите эти правила в текстовом представлении :
Нажмите кнопку Условия перезаписи, и вы должны увидеть следующие поля:
Сохраните форму еще раз, скопируйте шорткод Контактной формы 7 на новую страницу (если вы еще этого не сделали) и опубликуйте свою страницу. Это оно! Осталось только одно.
Настройка сообщения электронной почты
С помощью условных полей для контактной формы 7 можно настраивать сообщения электронной почты на основе того, какие условные правила были соблюдены во время отправки формы. С этим можно делать довольно сложные вещи, но давайте оставим это простым для примера.
Мы просто хотим показать текст «Спасибо за отправку вопроса о технической поддержке», если пользователь выбрал техническую поддержку, и «Спасибо за ваш вопрос о продажах», если он выбрал Продажи. Затем мы собираемся перечислить только те поля, которые были видны во время отправки формы в таблице HTML.
Мы можем добиться такого индивидуального сообщения:
Затем мы можем создать таблицу со всеми полями следующим образом:
В качестве небольшого бонуса за прохождение всего этого руководства, вот инструмент, который я создал для преобразования кода контактной формы 7 в код электронной почты. Вы можете использовать его, чтобы помочь вам в составлении сообщений электронной почты.