Contact Form 7

Contact Form 7 это плагин создания контактных форм. Он чрезвычайно популярен (по скачиваниям уступает только плагинам Akismet и All in One SEO Pack) среди пользователей, так как удачно сочетает простоту использования и мощнейшие возможности по настройке и конструированию контактных форм. Я попытаюсь максимально подробно рассмотреть все возможности плагина.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1 Распаковываем архив.

2 Копируем папку contact-form-7 в /wp-content/plugins/.

3 Заходим в админку блога на вкладку "Плагины" и активируем плагин.

При своей активации плагин создает отдельное меню в админке блога под названием "Contact Form 7", также при этом создается дефолтная контактная форма, которую вы можете увидеть в "Contact Form 7\Формы":

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

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

Для вывода этой простейшей формы вам понадобится всего пара минут. И именно из-за такой легкости добавления контактной формы многие пользователи и любят этот плагин.

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

Откроется вот такая начальная страница добавления формы:

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

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

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

Выберем, к примеру, номер телефона. Откроется такое окно:

Собственно, тут можно вообще ничего не менять. Размеры, классы и прочее это второстепенные опции и в большинстве случаев вам им редактировать не надо. Однако, опция "Использовать как placeholder" может быть полезна в качестве подсказки посетителям, как именно надо заполнять это поле.

Например, задаем такие значения:

При выводе контактной формы поле будет выглядеть так:

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

Необходимо вставить в левую часть страницы конструктора форм, где расположен сам код контактной формы:

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

Сохраняем код формы и получаем в итоге вот такую контактную форму:

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

1 Текстовое поле.

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

2 E-mail.

Используется только для ввода e-mail адреса.

3 URL.

Используется только для ввода ссылки.

4 Номер телефона.

Используется только для ввода номера телефона (цифры и дефизы).

5 Число (spinbox).

Используется только для ввода числа (можно использовать для указания возраста, количества заказываемых единиц товара и т.д.).

6 Число (slider).

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

7 Дата.

Используется только для ввода даты.

8 Текстовое поле.

В русском переводе данный тэг тоже получил название "Текстовое поле", но в терминологии HTML это textarea, что, по сути, обозначает лишь увеличенное текстовое поле. Используется для ввода текста сообщения.

9 Выпадающее меню.

Используется для выбора пункта (или нескольких пунктов) из выпадающего меню. Можно использовать для чего угодно – от вопроса о цвете заказываемого товара до выбора пола человека.

10 Checkboxes.

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

11 Radio buttons.

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

12 Acceptance.

Используется для согласия с условиями.

13 Вопрос.

Используется для ответа на указанные вопросы (вопрос выбирается случайно из указанных вариантов). В основном, данный тэг используется в качестве защиты от спама. И если на числовой вопрос спам-боты легко могут ответить, то на вопросы типа "на какой планете мы живем?" они ответить не в состоянии.

14 CAPTCHA.

Используется для вывода полноценной капчи. Для использования данного тэга необходима установка плагина Really Simple CAPTCHA. Капча вполне читаемая, а поэтому легко пробивается продвинутыми спам-ботами вроде Хрумера.

15 Отправка файла.

Используется для отправки файла. Можно указать максимальный размер и форматы допустимых файлов.

16 Кнопка отправки.

Используется для отправки данных контактной формы. Это обязательный тэг.

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

Значит, в шаблоне отсылаемого письма надо вставить такой код:

Смысл, думаю, понятен. В коде контактной формы [tel your-tel], а в письме только название этого поля [your-tel]. Плагин формирует цифровые названия тэгов вроде [tel tel-323], но никто не мешает вам использовать свои имена. И по поводу остальных тегов в шаблоне письма – они тоже формируются по такому же принципу – вместо [text your-name] используется [your-name] и т.д.

Тексты, которые выдает контактная форма можно также поправить в конструкторе форм в разделе "Сообщения":

Часто задаваемые вопросы по плагину Contact Form 7:

1 Ошибка вида "[contact-form-7 404 "Not Found"]", как исправить?

Это значит, что либо указанная форма удалена, либо неправильно указан заголовок формы (title в коде вызова критичен для вызова формы).

2 В письме я вижу тэги вроде [TEXT-23] вместо текста, как исправить?

Это значит, что посетитель не заполнил данное поле. В таком случае, тэг не заменяется, а выводится, как есть.

3 Есть ли ограничения при выборе имени для тэга?

Есть. Если цикле WordPress используется имя "name", то вы не можете его использовать в качестве имени для тэга. Лучшим способом избежать проблем будет добавление префиксов для имен, вроде слова "your". С именем тэга [your-name] проблем точно не будет.

4 Можно ли сообщить посетителю по email, что его форма была получена?

Можно. Используйте в конструкторе форм опцию "Адресат 2":

Данную опцию вполне можно использовать в качестве автоответчика.

5 Можно ли отправить заполненную форму по нескольким адресам?

Можно. Используйте в опции "Адресат" поле "Дополнительные заголовки":

Где mail@mail.ru ваш дополнительный email, на который будет отослана копия заполненной посетителем формы (команда "cc" отправляет скрытую копию).

6 Можно ли вывести форму не в записи или странице?

Да. Вставьте код вызова формы в текстовой виджет.

7 Можно ли вывести форму напрямую кодом в файлах шаблона?

Да. Используйте код вида:

<?php echo do_shortcode('[contact-form-7 id="122" title="Форма1"]'); ?>

8 Форма не отсылается, выдается ошибка в красной рамке, как исправить?

Обратиться к вашему хостеру, возможно в PHP запрещен вызов функции mail().

9 При отправке формы выдается ошибка в оранжевой рамке, как исправить?

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

10 Поле для ввода email выглядит иначе, чем другие поля в форме, как исправить?

Плагин использует HTML5 код для ввода email-адреса (<input type="email"> вместо <input type="text">), а подобный код зачастую не оформлен в старых шаблонах. Вам необходимо внести изменения в styles.css вашего шаблона, добавив туда необходимый код для селектора input[type="email"].

11 Как в email вставить прикрепленный пользователем файл?

Использовать для этого специальное поле "Прикрепленные файлы:"

Contact Form 7 действительно заслуживает вашего внимания. В отличие от многих других популярных плагинов он не заставляет вас покупать какую-нибудь Pro версию - все его возможности доступны сразу. Популярность плагина (свыше 19 миллионов скачиваний) вполне заслужена – при всей своей функциональности он чрезвычайно прост в настройке и доступен даже для начинающих пользователей движка WordPress.

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

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

Contact Form 7
Автор плагина: Takayuki Miyoshi
Рассматриваемая версия: 3.9.1 от 31.07.2014
Текущая версия: 5.9.3 от 21.03.2024
Совместимость с версией WordPress: 6.3 и выше
Активных установок плагина: 5 000 000+
Скачать плагин версии 5.9.3 (всего скачено 324 476 109 раз)