Советы, хаки, секреты. Плагины формы обратной связи для WordPress Письмо редактору contact form id b 1147

Если форма расположена просто на странице, тогда там все понятно – там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress .

Код добавляем в блок Дополнительные настройки вашей формы.

После успешной отправки сообщения

Выводим алерт ‘Спасибо за Вашу заявку!’ – примитивно и некрасиво.

On_sent_ok: "alert("Спасибо за Вашу заявку!");"

Делаем редирект на страницу благодарности

On_sent_ok: "location="http://site.tu/thankyou/";"

Просто закрываем поп-ап – не самый лучший вариант, пользователь может не понять, все ли прошло успешно

On_sent_ok: $.fancybox.close();

Выводим поп-ап окно “Спасибо за заказ” после успешной отправки сообщения

Выводим поп-ап окно “Спасибо за заказ”, при этом само окно находится в блоке с id="popup_msg" , внешний вид и стили нужно будет оформлять под свой дизайн, чтобы все было красиво + сделать кнопку ‘Закрыть’ окно благодарности.

Этот код добавляем в блок Дополнительные настройки вашей формы CF7:

On_sent_ok: "$.fancybox ({ href: "#popup_msg" });"

Само окно имеет такой вид:

Спасибо! Закрыть окно

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

И для кнопки “Закрыть окно” добавляем такой код в файл скриптов:

$(".popup-close-btn").on("click", function() { $.fancybox.close(); });

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Открываем pdf сразу на этой же странице

On_sent_ok: "location = "http://site.ua/wp-content/uploads/2016/08/catalog.pdf";"

Открываем pdf на новой странице

On_sent_ok: "window.open("http://site.ua/wp-content/uploads/2016/08/catalog.pdf", "_blank");"

Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

Теперь для редиректа на другую страницу после успешной отправки формы нужно использовать событие wpcf7mailsent

document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);

Например, такой вариант для открытия модального окна с id="sentMessage" :

Document.addEventListener("wpcf7mailsent", function(event) { $("#sentMessage").modal(); }, false);

Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

Document.addEventListener("wpcf7mailsent", function(event) { var id = event.detail.contactFormId; if (id == 4 || id == 44 || id == 45) { $.magnificPopup.open({ items: { src: "#popup_msg" }, type: "inline" }, 0); } }, false);

id – это номер формы
$.magnificPopup.open – в данном примере используется Magnific Popup

Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)

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

Данный скрипт выведет на экран окно id="popup_msg" после успешной отправки одной из форм (id == 17754 или id == 17758 или id == 17757):

Document.addEventListener("wpcf7mailsent", function(event) { var id = event.detail.contactFormId; if (id == 17754 || id == 17758 || id == 17757) { $.fancybox({href: "#popup_msg"}); } }, false);

Простой разбор кода

id == 17754 || id == 17758 || id == 17757 – окно будет показываться только для этих форм (или-или).

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

Спасибо! Наш менеджер свяжется с вами в ближайшее время. Закрыть окно

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

JQuery(document).ready(function($) { // code ... });

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

Гугл подсказал, что теоретически справиться с задачей сможет плагин Contact Form 7 , представляющий собой конструктор форм обратной связи с отправкой писем на указанный адрес, но вот беда - среди элементов страницы формы не предусмотрено тегов для отправки заголовка страницы или хотя бы ее URL. Но выход нашелся...

1. Создаем форму обратной связи с такими полями, какие нам нужны. Для верстки формы используем обычный HTML+CSS, спецтеги заключаются в квадратные скобки. Все это делается во вкладке "Шаблон формы" на странице настройки плагина Contact Form 7.

Форма заказа при этом выглядит таким образом (при заданном стиле класса order):

Теперь нам нужно обеспечить передачу TITLE и URL страницы в письме. См п.2.

2. Переходим в раздел "Письмо" и формируем шаблон письма. Чтобы передать служебную информацию, можно использовать следующие служебные теги:

[_remote_ip] IP-адрес отправителя.
[_user_agent] User Agent отправителя.
[_url] URL-адрес контактной формы.
[_date] Дата отправления.
[_time] Время отправления.
[_post_id] ID поста (записи) контактной формы.
[_post_name] Имя поста (в схеме протокола HTTP).
[_post_title] Заголовок записи с контактной формой.
[_post_url] Ссылка на страницу отправки.
[_post_author] Имя автора публикации.
[_post_author_email] Адрес почты автора публикации.

Если вставить в шаблон письма теги [_post_tltle] и [_post_url], в нем будут указаны название страницы и ее адрес. Если название страницы совпадает с названием товара, то проблема передачи наименования товара адмнистратору сайта будет решена!

Вот пример шаблона письма, в котором передается название и URL страницы, с которой оформлялся заказ:

Пользователь оформляет заказ, указывая количество товара и свои контактные данные. После того, как нажата кнопка "Оформить заказ", к вам на почту приходит подобное сообщение:

Понимаю, что это, конечно, не так изящно, как в "крутом" интернет-магазине, но у вас есть возможность связаться с клиентом и обсудить подробности заявки. Моему клиенту, собственно, именно это и требовалось.

Маленькая хитрость

Чтобы вставить код формы в произвольное место шаблона, в PHP-код можно добавить следующую строку:

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

Contact Form 7

Все поля (теги) формы
Как сделать обязательным одно из полей: почта или телефон
Conditional Fields for Contact Form 7 аддон
Contact form 7 Custom validation аддон

В предыдущей статье мы ознакомились с плагином Contact Form 7 и его настройками. А здесь, будут подробно рассмотрены все поддерживаемые типы полей (теги шаблона формы) и параметры каждого из них, а также стили (css классы) элементов формы. Это неофициальная документация ко всем тегам шаблона формы Contact Form 7.

Тип поля определяет вид элемента HTML формы: текстовый, «радио», «селект». Тип поля указывается в названии тега шаблона формы.

Пример тега текстового поля и HTML код который он выведет:

Также каждый тег (поле) имеет свои опции (атрибуты тега). Опции тега указываются после названия и имени поля. Для примера, добавим атрибут class для предыдущего поля text:

Синтаксис тега шаблона (поля) формы:

Атрибуты тегов (полей)

В разных тегах формы можно использовать одинаковые атрибуты (опции). Потому, чтобы не повторять описание каждого атрибута для каждого поля формы, вынесем их описание в отдельный раздел.

Атрибуты, которые можно применить только к конкретному тегу формы, будут указаны отдельно для каждого тега.

* Знак * сразу после типа поля делает поле обязательным для заполнения.
Пример: id(строка) Название идентификатора. css атрибут id, используется для оформления поля.
Пример: id:foo class(строка) Название класса. css атрибут class, используется для оформления поля.
Пример: class:bar
Можно указать несколько классов: minlength и maxlength(число)

Это HTML5 атрибуты, которые ограничивают ввод символов в поле, как по нижнему порогу (минимальному), так и по верхнему (максимальному). Пользователь не сможет ввести в поле меньше знаков (minlength) или больше знаков (maxlength), чем определено этими значениями.

Для minlength , если введённый текст будет меньше этого значения, то пользователь получит предупреждение "Поле слишком короткое". И наоборот для maxlength .

Примеры:
minlength:10 -
maxlength:90 -
оба сразу -

В результате получим текстовое поле, которое будет выдавать предупреждение и письмо не будет отправлено, если в него будет введено менее 10 или более 140 символов.

Данные параметры поддерживают следующие типы полей: text , textarea , email , url , tel , quiz .

Существует старая запись этих параметров:

Параметр maxlength в явном виде приоритетнее, поэтому если дописать maxlength:150 , то 140 будет переписано на 150.

Size(число) Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Может быть переопределено в CSS стилях с помощью атрибута width.
Пример: size:50 -
По умолчанию: 40 default(строка/число)

Значение поля по умолчанию.

Пример: default:значение.

Если пользователь, заполняющий форму, авторизован, то по умолчанию можно подставлять значение взятое из данных его профиля. Например, если указать атрибут default:user_email - , то в поле автоматически подставиться значение - «email текущего пользователя», который просматривает форму...

Остальные специальные поля атрибута default:

default:post_meta - получит значение метаполя ключ которого будет равен имени поля. Например: выведет поле формы в значении которого будет выставлено значение метаполя записи mymeta_key

default:get - выставит значение GET параметра c ключом равным имени поля: - http://example.com/?mykey=значение

default:post - выставит значение POST параметра c ключом равным имени поля: - в POST передаем данные mykey=значение.

default:shortcode_attr - выставит значение атрибута шорткода с ключом равным имени поля. Например тег шаблона формы такой: , тогда в шоркоде самой формы при вызове в контенте записи указываем атрибут mykey: . Подробнее читайте ниже.

Еще, нужно добавить название атрибута шорткода WordPress в белый список (потому что wordpress вырезает все неизвестные атрибуты шорткода...). Делается это через фильтр:

Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); function my_shortcode_atts_wpcf7($out, $pairs, $atts){ if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; }

Для checkbox, radio и select:

default:номер - default:2 - выберет второй элемент списка...
default:номер_номер - default:2_3 - выберет второй и третий элемент списка (для мульти-селектов и чекбоксов)...

Подробнее про default и его варианты, читайте в конце статьи.

Placeholder или watermark(строка)

Текст который будет показан в атрибуте placeholder.

Эту опцию нужно использовать в конце всех опций тега шаблона: , а не

Можно использовать watermark вместо placeholder - это синоним (алиас) атрибута.

Akismet(строка)

Спам защита. Требует установленного и активированного плагина Akismet .

akismet:author -
akismet:author_email -
akismet:author_url -

Как это работает? При отправки данных, значения указанных полей будут обработаны на сервере akismet и если они не пройдут проверку, то письмо не будет отправлено, а пользователь увидит ошибку:

Сообщение исчезнет при фокусе на любом из полей.

Теги шаблона формы (поля)

Ниже описаны все теги плагина, которые можно использовать в шаблоне формы. Такие теги превратятся в input , textarea и select элементы HTML.

К текстовым полям относятся типы: text , email , url , tel , textarea , а также тег count тесно связан именно с текстовыми полями.

К числовым полям относятся два типа: number и range . Это HTML5 поля, потому старые браузеры их не поддерживают, взамен отображая текстовое поле (text).

text

Поле для текста в одну строку.

Поддерживаемые опции (атрибуты):

class
minlength и maxlength
size
placeholder
default - можно использовать: user_login, user_first_name, user_last_name, user_nickname, user_display_name
akismet:author

Поле предназначено для ввода email.

Поддерживаются атрибуты:

class
minlength и maxlength
size
placeholder
akismet:author_email
default:user_email или default:любая@почта.ру

url

Поле для ввода интернет адреса (URL).

Поддерживаются атрибуты:

class
minlength и maxlength
size
placeholder
akismet:author_url
default:user_url или default:значение

tel

Поле для ввода номера телефона.

Поддерживаются атрибуты:

class
minlength и maxlength
size
placeholder

textarea

Поле для ввода многострочного текста.

Поддерживаются атрибуты:

class
minlength и maxlength
placeholder
(cols)x(rows) - где cols - ширина поля в символах, а rows - высота поля в строках текста. Имеет 3 формата: (cols)x(rows) , (cols)x и x(rows) .

Для textarea значение поля можно указать двумя способами:

Текст по умолчанию...

Если в textarea будут html теги, то после отправки формы вы, возможно, получите 500 ошибку сервера!

count (счётчик символов)

Тег count позволяет установить счетчик, когда нужно показать пользователю, сколько введено символов или сколько символов осталось до максимального значения (если параметр maxlength).

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

Тег счётчика можно использовать в любом месте шаблона формы.

Например, у нас есть текстовое поле для сообщения:

Тогда делаем так:

Поле ограничено - минимум 10 и максимум 140 символами. В данном случае счётчик будет показывать сколько всего введено символов.

Иногда удобнее показать сколько символов осталось ввести, ведь пользователь не знает об ограничении по максимуму. Для этого в теге нужно указать опцию down - .

number

Поле для ввода числа. При фокусе в поле значения можно изменять вращением колесика мыши.

Поддерживает атрибуты:

class
placeholder
min
max

range

Ползунок для выбора чисел в указанном диапазоне.

Поддерживает атрибуты:

class
placeholder - отображаются только в браузерах, не поддерживающих данный тип поля и отображающих взамен текстовое поле.
min - Устанавливает нижнее значение для ввода числа: min:20
max - Устанавливает верхнее значение для ввода числа: min:100
step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел: min:5

checkbox и radio

Радиокнопки - это переключатели, позволяющие выбрать только один вариант из нескольких.
Чекбоксы - это флажки, позволяющие выбрать сразу несколько вариантов.

Поддерживаемые атрибуты:

default - Значение поля по умолчанию, к примеру default:2 означает, что при отображении поля второй вариант ответа будет уже выбран. Для чекбоксов можно указать несколько значений подобным образом default:1_2_3

first_as_label - По умолчанию сначала идёт чекбокс (радио-кнопка), а затем его (её) надпись. Передав данный параметр, вы поменяете их местами.

use_label_element - Оборачивает чекбокс или радио-кнопки в label, что позволяет делать выбор элемента кликнув по его названию.

exclusive - Указав этот параметр, у чекбокса можно будет выбрать только 1 элемент. Данный функционал работает на основе JavaScript. Радио-кнопки не поддерживают опцию в силу своей специфики.

free_text - Позволяет добавить к последнему элементу текстовое поле. Оно становится доступным к заполнению при выборе последнего элемента и пользователь может дополнить свой ответ.
data - Получает значение из листа со странами мира, к примеру data:countries .

China India San Marino

select

Позволяет выбрать варианты ответа из выпадающего списка. Может использоваться в двух вариантах:

Атрибуты:

class
default - default:2 или default:2_3_4
multiple - Позволит выбрать несколько вариантов ответа
include_blank - Добавит первым вариантом ответа строку "- - -"
first_as_label
data
items - варианты ответов

Пункт 1 Пункт 2 Пункт 3

date

Поле для выбора календарной даты. Это HTML5 тип, не поддерживается старыми браузерами.

Атрибуты:

class
placeholder
min - Нижнее значение возможной даты, например min:2016-01-01 . Поддерживается относительный формат даты, например today+10days , today-2weeks и так далее.
max - Верхнее значение возможной даты, например min:2017-01-01 . Поддерживается относительный формат даты, как и у min .
step - Шаг изменения даты в днях, например step:3 . Если нижнее значение 2016-01-01 и шаг 3, то при следующем шаге отобразиться дата 2016-01-04 и так далее.

При вставке тега в шаблон письма, на почту придет дата в формате YYYY-MM-DD (2016-12-25) - это не наглядно. Поэтому можно указать более наглядный шаблон, для этого используйте конструкцию [_format_{field name} "{date format}"]

[_format_your-date "D, d M y"]

reCAPTCHA (защита от спама)

Contact Form 7, начиная с версии 4.3, в связке с сервисом reCAPTCHA позволяет бороться со спамом. Чтобы пользоваться reCAPTCHA нужно иметь аккаунт в Google, где можно получить ключи для использования API сервиса.

Чтобы получить эти ключи, нужно:

Зайти в админку reCAPTCHA .

Зарегистрировать сайт.

Получить ключ сайта и секретный ключ (это два разных ключа: ключ сайта может быть один, а секретных ключей много).

Атрибуты:

class
theme - Цветовая схема виджета. Может быть dark или light (по умолчанию).
size - Размер виджета. Может быть compact (компактный) или normal (по умолчанию).

Теперь в шаблоне формы используйте тег .

Quiz (вопрос-ответ)

В данном поле пользователю задают вопрос и он должен на него ответить, иначе письмо не будет отправлено. Поле появилось, когда от спама боролись с помощью буквенных каптч (ещё не было reCAPTCHA). Использование буквенных каптч накладывало ограничения, как на сервер (требовались графические библиотеки), так и на человека (ошибки визуального восприятия). Данный способ решал эти недостатки.

Атрибуты:

class
size - Размер поля и его длина. Одно из значений может быть опущено.

На какой планете Вы живёте?

Из примера видно, что вопрос и ответ разделяется знаком | . Вопрос и ответ можно писать абсолютно любой, например математический:

Можно указать несколько пар вопрос-ответ, вопрос будет выбран случайно каждый раз при показе формы:

Для этого поля можно указать параметры minlength и maxlength:

При создание тега quiz с несколькими вопросами при помощи генератора пишите каждую пару вопрос-ответ с новой строки.

hidden

Скрытое поле - не видно пользователю. Может хранить в себе ценную информацию. Информация может быть добавлена с помощью Javascript или создана с помощью опции default .

Атрибуты:

class
default - Сюда можно передать параметр, который будет преобразован по определенному правилу. Подробнее читайте в описании атрибута (опции в начале статьи).

submit

Кнопка отправки данных формы (сабмита). При нажатии на эту кнопку происходит отправка всех данных формы на сервер.

Атрибуты:

class

Можно указать текст кнопки:

Пример использования всех поддерживаемых параметров:

ajax-loader

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

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

В этом случае мы потеряем тег , потому что он добавляется через JS, после элемента с классом wpcf7-submit - обычно такой класс имеет стандартная кнопка сабмита.

Чтобы обойти это ограничение, можно просто добавить этот класс к нашему HTML коду кнопки:

Все. Теперь тег будет добавляться и работать как надо.

Или можно добавить тег прямо в шаблон формы.

acceptance (я принимаю ваши условия)

Вы можете разрешить пользователям отправлять данные, только если они принимают определенные условия.

Атрибуты:

class
invert - Параметр, делающий чекбокс сразу с флажком, но чтобы отправить форму пользователю надо его убрать.
default - Делает по умолчанию чекбокс сразу с флажком, если указать on , пример default:on , по умолчанию же default:off .
optional - поле становится не обязательным.

Разрешаю использовать моё имя в комментариях.

Поле является чекбоксом, который обрабатывается с помощью такого JavaScript:

This.find(".wpcf7-acceptance").click(function() { $(this).closest("form").wpcf7ToggleSubmit(); });

Изначально у кнопки отправки формы присутствует атрибут disabled="disabled" . Т.е. если чекбокс не активный, то кнопка отправки формы тоже неактивна, а значит и отправить её нельзя. При установки флажка в чекбоксе, скрипт убирает этот атрибут и кнопка становится активной.

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

Acceptance_as_validation: on

Так, если пользователь не поставит флажок, получит уведомление:

file (загрузка файлов)

С помощью этого поля можно разрешить пользователям прикреплять к письму свои файлы.

Добавление такого функционала состоит из двух этапов:

1 этап - добавление полей для загрузки файлов в форму

Атрибуты:

filetypes - Тип файла, который разрешен для загрузки, например pdf, jpg и другие (полный список ниже), указываемые через разделитель | (прямая черта), если требуется указать несколько типов.
limit - Ограничение загружаемого файла по размеру, например: limit:1048576 , limit:1024kb , limit:1mb . Вы можете использовать kb (килобайты) или mb (мегабайты).

Допустимые типы файлов: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv .

Макс размер файла по умолчанию: 1 MB (1048576 байт).

2 этап - добавление тега в шаблон письма

На 1 этапе было создано поле, у которого есть имя - your-file . Теперь используем тег с этим именем в шаблоне письма, но не в привычном поле "Тело письма", а в поле "Прикреплённые файлы".

В поле "Прикреплённые файлы" вставляете только тег с именем поля из шаблона формы.

- правильно
- неправильно

Если несколько полей для загрузки файлов, то в поле "Прикреплённые файлы" перечисляете их друг за другом без каких-либо разделителей: .

Локальные вложения

Contact Form 7, начиная с версии 3.5, поддерживает передачу локальных файлов в письмо. Для этого наряду со вставкой тегов в поле прикрепления файлов нужно передать путь к вашему файлу:

/home/you/dir/dir/dir/fantasticpicture.jpg uploads/2013/08/08/boringguide.pdf

Если указан не абсолютный путь, то будет рассматриваться относительный от папки wp-content .

Управление загрузкой файлов

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

Какие ошибки PHP произошли;

Тип файла и размер файла.

Если проверка прошла успешно, то плагин:

Перемещает загруженный файл во временную папку.

Прикрепляет файл к письму и отправляет его.

Удаляет файл из временной папки.

По умолчанию папка с временными файлами находится тут: wp-content/uploads/wpcf7_uploads . Может отличаться, если изменен путь к папке uploads .

Папка wpcf7_uploads создается автоматически. Но бывают случае, когда это невозможно - родительская папка uploads не имеет прав на запись. Тогда вам нужно:

Изменить права папки uploads.

Создать папку wpcf7_uploads в ручном режиме через ftp и т.д.

Также, можно вообще изменить путь к временной папке плагина. Для этого откройте файл wp-config.php в корне сайта и добавьте константу WPCF7_UPLOADS_TMP_DIR , в которой укажите полный путь до папки с временными файлами:

Define("WPCF7_UPLOADS_TMP_DIR", "/your/file/path");

Указывая индивидуальный путь к папке с временными файлами, убедитесь, что она существует и имеет права на запись (755). В противном случае загрузка файлов не будет работать, а значит они не будут прикреплены к письму.

response

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

Чтобы изменить это положение вставьте тег в то место шаблона формы, где должны быть уведомления:

Ваше имя (обязательно) Ваше сообщение

Если не ввести имя, то форма отправлена не будет и нас известят об ошибке:

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

Помните, что этому правилу подчиняются все уведомления, поддерживаемые плагином (успешная отправка, спам и т.д.).

Спец. значения атрибута default Получение значений по умолчанию по ситуации

Почти всем полям можно через атрибут default передать значение по умолчанию. Но что делать, когда надо передать динамические параметры? К примеру, с помощью GET запроса через URL.

Динамическое получение параметров работает на основе следующих опций тега:

Default:get HTTP GET переменные. Ключ параметра должен совпадать с именем поля формы. default:post HTTP POST переменные. Ключ параметра должен совпадать с именем поля формы. default:post_meta Значение произвольного поля записи в которой находится форма. Имя произвольного поля должно совпадать с именем тега. default:user_(поле пользователя) Речь идет о: default:user_email или default:user_nickname . Полный список таких значений приведен в след. пункте.

Пример тега текстового поля на основе GET запроса:

Пусть у нас есть страница contact , обратимся к ней с передачей GET параметра:

Http://example.com/contact/?your-name=Дмитрий

В результате значение нашего поля будет автоматом "Дмитрий".

Ещё пример: передача UTM меток в форму

Дефолтное значение из нескольких источников

Также, можно передать несколько мест, откуда хотелось бы получить значение:

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

Получение значений по умолчанию для зарегистрированного пользователя

Когда вы создаете форму для авторизованных пользователей, то нет смысла заставлять их вписывать значения, которые уже есть в их данных, например имя или email. В Contact Form 7 предусмотрен этот момент и можно получить данные из профиля пользователя.

Для этого нужно использовать специальные значения атрибута default для авторизованного пользователя. Рассмотрим все возможные варианты:

default:user_login - Логин пользователя
default:user_email - Электронная почта
default:user_url - Адрес сайта
default:user_first_name - Имя
default:user_last_name - Фамилия
default:user_nickname - Ник
default:user_display_name - Отображаемое на сайте имя
default:user_description - Описание (биография).
default:user_* - где вместо * можно указать любое значение из данных пользователя (см. get_userdata()). Если оригинальные данные пользователя (ключ) начинаются не с user_ , то их нужно начать с user_ . Допустим, у юзера есть метаполе vk и нам нужно указать тут значение этого метаполя. Тогда пишем так: default:user_vk

Ваше имя: Ваш E-mail:

Ещё один пример

Один из зарегистрированных пользователей на сайте решил воспользоваться формой. Логично сразу подставить его имя в поле «Имя», ведь оно известно. Используем атрибут default:

Теперь, когда авторизованный пользователь зайдет на страницу с формой - его отображаемое имя (display_name) будет поставлено в поле your-name автоматом. А если на эту же страницу зайдет неавторизованный пользователь, то он увидит плейсхолдер "Введите ваше имя".

Получение значений по умолчанию через атрибуты основного шоркода CF7

Иногда может быть нужно использовать значение из атрибута шорткода в качестве дефолтного параметра для поля.

В этом случае, нужно использовать опцию тега default:shortcode_attr , которая «говорит» плагину получить в качестве дефолтного значение одноименное (с именем поля) значение атрибута шотркода.

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

Однако это еще не все! Как мы знаем для любого шорткода в WordPress ему указывается белый список атрибутов, которые в нём можно использовать. В этом случае, про наш новый атрибут шорткода contact-form-7 WP ничего не знает, поэтому его нужно добавить в белый список. Делается это через хук плагина:

Add_filter("shortcode_atts_wpcf7", "custom_shortcode_atts_wpcf7", 10, 3); function custom_shortcode_atts_wpcf7($out, $pairs, $atts) { if(isset($atts["myemail"])) $out["myemail"] = $atts["myemail"]; return $out; }

Данный код вставляется в functions.php.

Теперь при заходе на страницу с формой в поле email будет подставлено значение [email protected] .

" class="glossaryLink " target="_blank" >CMS… Но нет… до сих пор приходится ставить несколько плагинов чтобы заиметь данный функционал на своем сайте. Итак, начнем!

Нужный нам плагин Easy FancyBox.

Заходим в Настройки -> Медиафайлы.

Сверху видим блок стандартных настроек медиафайлов, а ниже настройки плагина Easy FancyBox. По умолчанию активен попап при нажатии на изображение.

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

Ставим галку на пункт«Inline content»

Код с всплывающей контактной формой, установленный в коде файла шаблона (например в footer.php):

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке

Синонимы:

Интернет-сайт, Web-сайт

" class="glossaryLink cmtt_Общие понятия" target="_blank" >сайта:

Код кнопки, открывающей попап:

Заказать звонок

Возникла странная проблема с относительными ссылками в хэдере. К ссылке на активацию формы упорно приписывался адрес главной страницы…

Победил это добавив пробел перед решеткой.

Для придания форме нужного фида необходимо обернуть поля в дивы, указать им классы. Это лучше делать непосредственно в редакторе форм CF7. Стили можно прописать в custom.css

Закрытие popup окна с формой обратной связи после успешной отправки

Добавляем такой код

On_sent_ok: $.fancybox.close();

в блок Дополнительные настройки вашей формы. У меня еще стоит отправка цели Яндекс.Метрики.

FormGet — это простой плагин для Вордпресс, работающий по принципу drag and drop, позволяющий создавать различные контактные формы для вашего сайта. Вам просто нужно нажать на поля, которые вы хотите добавить на форму и ваша форма обратной связи будет готова в течении нескольких секунд.

Формы, которые можно сделать с помощью этого плагина

Контактная форма, форма поддержки, формы бронирования, консультационные услуги, форма обратной связи, список рассылки, анкеты, бланк заявления о приеме на работу, мастер регистрационных форм, конструктор форм заказа и так далее — всё это можно сделать в этом замечательном плагине.

FormGet Contact Form очень эффективный инструмент, который позволит вам создавать и вставлять контактную форму на вашем сайте в несколько простых шагов. Выберите поля формы, настройте параметры и легко встраивайте контактную форму на ваш сайт, просто разместив код в виджете или используйте специальный шорткод. Вам не нужны никакие знания программирования чтобы сделать нужную форму — это дополнительный плюс в выборе подобных расширений.

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

Список полей, поддерживаемых плагином:

Имя, адрес, контактный телефон, сообщение, оплата (интеграция с PayPal), дата (поддержка формата dd-mm-yy или dd/mm/yy или yy-mm-dd), текстовая строка, многострочный текст, множественный выбор, вложения, Checkbox, Select (выбор из предлагаемого списка), радио-кнопки, загрузка файлов и Captcha.

Установка обычная — через админку сайта на Вордпресс.

Настройка и создание контактной формы

После установки и активации, вы увидите специальную форму-приветствие: