- Все поля (теги) формы
- Как сделать обязательным одно из полей: почта или телефон
- 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 - варианты ответов
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 меток в форму
Дефолтное значение из нескольких источников
Также, можно передать несколько мест, откуда хотелось бы получить значение:
Мы указали два источника значения по умолчанию (порядок определяет приоритет): сначала плагин пробует взять значение из адресной строки, если его нет, то из произвольного поля записи. Если значение есть в адресной строке, то значение произвольного поля игнорируется.
ACF + CF7 без дополнительных плагинов
Пусть вы для Записей создали группу полей, в которой есть текстовое поле с ключом my-text-field . Чтобы вывести сохранённое значение в этом поле, используйте шорткод:
или, если надо поле сделать скрытым:
Получение значений по умолчанию для зарегистрированного пользователя
Когда вы создаете форму для авторизованных пользователей, то нет смысла заставлять их вписывать значения, которые уже есть в их данных, например имя или 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] .
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
- Шаблон формы
- Письмо
- Дополнительные настройки
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
- удалить и создать с помощью конструктора новый.
- изучить синтаксис и исправить шорткод поля вручную.
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
- Текстовые поля: text , email , tel , url , textarea
- Числовые поля: number , range
- Поля с датой: date
- Чекбоксы, радио, списки: checkbox , radio , select
- Поле с загрузкой файла: file
- CAPTCHA: captchac и captchar
- Опросы: quiz
- Поле "Принять": acceptance
- Кнопка "Отправить": submit
- Произвольный тип поля
Шаблон письма
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:
- Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
От: <> Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
От: Дмитрий
Не обязательные поля в теле письма
Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
Плагин Contact Form 7 поможет организовать обратную связь на вашем сайте.
Скачать плагин Contact Form 7 можно на официальном сайте WordPress
Скачать плагин Really Simple CAPTCHA можно на официальном сайте WordPress
Как установить и подключить этот плагин мы рассмотрели в уроке « «, сейчас разберемся с дополнительными функциями плагина Contact Form 7. Форма корректно работает на мониторах, планшетах, телефонах и ноутбуках. Кстати если у вас сломался ноут, то есть сервис где делают ремонт ноутбуков HP .
После того как вы скачали и активировали плагин зайдите в настройки плагина перейдя в новый раздел панели управления «Контакты».
Наведите мышкой на название формы и выберите «Редактировать»
Откроется окно изменения параметров формы
Так как на сайте может использоваться не одна, а несколько форм (форма отправки сообщения, форма заказа звонка, форма с анкетными данными), то чтобы не возникало путаницы какая форма за что отвечает, нужно изменить имя формы. Для этого кликните по названию формы 1 .
В блоке №2 отображается то, что будет выводится на странице в форме. Сначала идет текст, название поля, после код этого поля. Вы можете изменить текст на тот который вам нужен.
Для добавления новых полей в форму нажмите на выпадающий список №3 — «Сгенерировать тэг» и из выпадающего списка выберите необходимый элемент.
- Текстовое поле
- Номер телефона
- Число (spinbox)
- Число (slider)
- Текстовое поле
- Выпадающее меню
- Checkboxes
- Radio buttons
- Acceptance
- Вопрос
- CAPTCHA
- Отправка файла
- Кнопка отправки
Подсказки и поля формы по умолчанию располагаются так: вверху подсказка, внизу элемент. Если хотите расположить описание и элемент в одну строку — уберите после текста тэг
. Весь блок с описанием и элементов должен быть в одну строку и находиться внутри тэга
Текстовое поле
Из выпадающего списка выберем элемент «Текстовое поле»
Если любая функция которую добавляете обязательна — поставьте галочку 1 и не забудьте от этом написать в описании.
Можно в поле ввода добавить дополнительную информацию, чтобы сделать более понятным заполнение формы. Отметьте галочкой пункт 2 «Использовать как заполнитель (placeholder)?» и рядом в поле впишите подсказку. При заполнении этого поля в форме текст подсказки исчезнет. Дальше следуйте подсказкам плагина. В результате получится такое вот поле в готовой форме:
Обязательно вставьте код в шаблон письма, иначе данные из этого поля не передадутся на почту! Это касается не только текстовых полей но и любых других элементов.
Используется для передачи в форму адреса почтового ящика отправителя
URL
Позволяет добавить в форму адрес сайта.
Номер телефона
В это поле возможно вписать только цифры
Число (spinbox)
Поле, в котором можно установить количество чего-либо, например товара. Количество устанавливается стрелками вверх/вниз.
Дата
Вставляет в форму календарь с возможностью выбора даты. Например используется для резервации номеров в отеле. Дата заезда, дата отбытия.
Текстовое поле
Да, не удивляйтесь 🙂 Еще одно текстовое поле. На этот раз, это поле имеет большие размеры и позволяет писать в него много текста. Например отзывы, комментарии.
Выпадающее меню
Когда много вариантов чего-либо и необходимо выбрать какой то пункт из большого списка, например список городов, улиц, товаров.
Список необходимо разместить в поле Выбор, каждый пункт с новой строки.
Checkboxes
Флажком, или на жаргоне разработчиков чекбоксом, называется элемент, который создает поле для проставления галочки. Это поле имеет два состояния - отмечена галочка или нет. Возможен множественный выбор. Располагаются только в ряд, если отметить галочкой «Сделать чек-боксы взаимоисключающими?» то будет возможен выбор только одного параметра.
Radio buttons
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Отметив галочкой пункт » Разместить сначала метку, а потом чек-бокс?» меняется расположение метки и поля выбора, по умолчанию сначала выбор, потом метка.
Acceptance
Подтверждение чего-либо. Допустим соглашение принятия условий описанных выше.
Вопрос
Это первая линия обороны от спама, самая элементарная. В настройка пишите какой то вопрос, можно цифрами, можно буквами или и так и так, и указываете правильный ответ. Если ответ при заполнении формы будет правильным, то форма отправится. Зеленым отмечено какая часть этой формулы будет отображаться на сайте перед полем ввода ответа, красным — ответ. Правильный ответ в формуле пишется после знака | (вертикальной черты)
Добавляет в форму защиту от спама.
Для работы этой функции необходим еще один плагин . Скачивайте, устанавливаете, активируйте плагин.
Настройки можно не менять, копируете и вставляете 2 строчки перед кнопкой отправить.
Отправка файла
К форме отправки сообщения можно прикрепить файл. В настройках можно указать максимальный размер в байтах, и разрешенные форматы для загрузки, например.jpg .tiff .doc
Кнопка отправки
Отправка формы. В настройках в разделе «Ярлык» — можно дать название кнопки (Отправить, ответить, послать 🙂)
Настройка внешнего вида Contact Form 7
Так как плагины имеют свойства обновляться, изменения внешнего вида формы будем производить в файле стилей темы сайта style.css
За отображение формы, ее полей и прочих элементов отвечает код:
Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 20px; border: 1px solid #C7C7C7; box-shadow: inset 2px 2px 8px #F9F9F9; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { background: #FDFDFD; outline: none; }
Что есть тут что.
.wpcf7 input, .wpcf7 textarea — стиль поля ввода (текстового поля)
- padding - задает отступ от содержимого до границы элемента. Здесь — отступ от вводимого в поле текста до границы поля. Устанавливается значение в пикселях Xpx, где X количество пикселей. Пример: padding: 5px 3px 6px 8px;
- color - цвет текста.
- font-family - шрифт полей ввода.
- font-size - размер шрифта
- line-height - высота строки
- border - рамка вокруг поля ввода
- box-shadow - тень блока. inset указывает на то, что тень внутренняя. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое - #F9F9F9 - цвет тени.
Настройка кнопки Contact Form 7
.buttons_form { padding: 0px; height: 30px; width: 150px !important; border: none !important; cursor: pointer; color: #fff; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); }Стиль уведомлений Contact Form 7
Он отвечает за сообщения об ошибках или успешной отправке
Wpcf7 .wpcf7-validation-errors{ border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }
А теперь для удобства весь код целиком с комментариями:
Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ /* Данная часть кода отвечает за стиль полей ввода, текстовые области */ padding:5px; /* Устанавливает отступ от полей элемента до его содержимого, можно поставить любое знаниче, например 10px */ color:#1D1D1D; /* Цвет текста в полях ввода */ font-family:Arial, Helvetica, sans-serif; /* Шрифт текста в полях ввода */ font-size:16px; /* Размер текста в полях ввода */ line-height: 20px; /* Высота стоки в полях ввода */ border: 1px solid #C7C7C7; /* Рамка вокруг полей. Первое значение - ширина в пикселах, второе - стиль рамки, третье - ее цвет */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Тень от полей ввода. 2px - сдвиг по оси x, 2px - сдвиг по оси y, 8px - радиус размытия тени, #F9F9F9 - цвет тени */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { /* Данная часть отвечает за стиль полей ввода при наведении на них указателя мыши */ background: #FDFDFD; /* Фон поля ввода при наведении указателя мыши на него */ outline: none; /* Внешняя граница поля ввода текста */ } .wpcf7 input.wpcf7-submit{/* Данная часть кода отвечает за стиль кнопки Отправить в форме */ -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; border: none; /* Рамка вокруг кнопки */ position: relative; color: #fff; /* Цвет текста */ text-transform: uppercase; /* Преобразование текста (uppercase значит, что текст на кнопке будет отображаться заглавными буквами) */ /* Скругление углов кнопки. Значения следующих трех свойств должны быть одинаковы, так как это одно и то же, только для разных браузеров */ -webkit-border-radius: 6px; /* Скругление углов для Chrome */ -moz-border-radius: 6px; /* Скругление углов для Mozilla FireFox */ border-radius: 6px; /* Скругление углов для всех остальных браузеров, в том числе мобильных */ font-size: 14px; /* Размер текста кнопки */ font-weight: bold; /* Стиль текста (bold значит жирный) */ padding-top: 11px; /* Отступ сверху от края элемента до его содержимого */ padding-bottom: 10px; /* Отступ снизу от края элемента до его содержимого */ padding-left: 35px; /* Отступ слева от края элемента до его содержимого */ padding-right: 35px; /* Отступ справа от края элемента до его содержимого */ /* Gradient background - Градиентный фон кнопки */ background-color: #000000; /* Цвет фона кнопки, если градиент не поддерживается браузером */ /*В следующих свойствах цвета должны быть указаны одинаково, так как это одно и то же, только для разных браузеров. Разберем первое свойство. Часть from(#676767), to(#3B3B3B) значит, что надо отобразить градиент, где от цвета #676767) идет переход к цвету #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom, from(#676767), to(#3B3B3B)); background: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Тень кнопки. Цвет тени указан в RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } /* On hover - Стиль кнопки при наведении указателя мыши. Все почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:hover{ cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#246416), to(#349622)); background: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#246416", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; } /* On click - стиль кнопки при нажатии на нее се почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:active{ top: 1px; color: #d8c6e2; /* Цвет текста кнопки при нажатии на нее */ background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416)); background: -moz-linear-gradient(top, #FF0000, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* CF7 Messages - Стиль сообщений об успешной отправке, ошибках и т.д. */ .wpcf7 .wpcf7-validation-errors{ /* Стиль сообщений при ошибках валидации */ border:none; /* Рамка блока сообщения */ background-color:#246416; /* Фон */ color:#fff; /* Цвет текста */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ /* Стиль сообщений об успешной отправке */ border:none; /* Рамка блока сообщения */ background-color:#7ad33f; /* Фон */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); } .wpcf7-form .fleft{ float: left; } .wpcf7-form .mright20{ margin-right: 20px; } .wpcf7-form .mright40{ margin-right: 40px; } .wpcf7-form .clear{ clear: both; }
Подробная инструкция по установке, настройке и использованию плагина формы обратной связи для сайта 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
Плагин 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.
Каждому владельцу сайта хочется иметь контактную форму для отправки сообщений от пользователей и получения их на свою почту. Это, так называемая форма обратной связи. Тоесть, посетитель может отправить свое письмо веб-мастеру прямо с сайта, не открывая свой почтовый ящик. Лучший плагин для реализации этой функции Contact Form 7 не отправляет письма. В моей статье описана правильная настройка плагина Contact Form 7 , чтобы все работало корректно.
Принцип действия плагина Contact Form 7
Данная форма располагается на любой странице вашего сайта (нужно лишь скопировать строчку и вставить ее в нужное место). Посетитель сайта заполняет обязательные поля (к примеру, свое имя, e-mail, сообщение), и плагин через один почтовый ящик (назовем его «отправитель» ) посылает письмо на другой ящик («получатель» ).
Тоесть, вы должны зарегистрировать 2 почтовых ящика – отправитель и получатель . Отправитель лучше создать в Яндекс почте, а получатель – это официальный ящик вашего сайта.
С некоторых пор плагин Contact Form 7 перестал работать — не отправлял письма, а просто крутил загрузку. Я нашел выход — установил другой бесплатный плагин WPForms Lite. Очень прост в настройках, не требует установки дополнительных плагинов для настройки отправки сообщений, но я заметил, что он работает не с каждой электронкой. На одну мне не приходили письма, а на другую отправляются.
Настройка плагина Contact Form 7. Инструкция
1) Регистрируем ящик отправитель на Яндекс почте (любой, без разницы какой, его название не важно для работы плагина и не будет видно посетителям). Он будет служить перевалочным пунктом для писем.
2) Настраиваем контактную форму плагина Contact Form 7. Нажмите «Изменить» и далее «Шаблон формы» . Вот пример, как она должна выглядеть с обязательными полями: имя пользователя, его почта, сообщение и кнопка «отправить»:
Ваше имя (обязательно)
Ваш e-mail (обязательно)
Сообщение
3) Вкладка «Письмо» отвечает за внешний вид писем, которые вы получаете.
Кому – адрес ящика получатель
От кого – <адрес ящика отправитель>
Тема –
Тело письма –
Итак, вы получаете письмо, где будут указаны все заполненные поля формы обратной связи. На этом настройка плагина Contact Form 7 завершена .
Внимание! Чтобы плагин Contact Form 7 отправлял письма, необходимо установить еще один плагин WP-Mail-SMTP. Именно он будет связывать два почтовых адреса отправитель и получатель и выполнять системные функции по отправке писем.
Настройка плагина WP-Mail-SMTP. Инструкция
From Email – адрес ящика отправитель
From Name – к примеру, название вашей организации или ваше имя
Mailer – функция отправки писем. Выберите «Send all WordPress emails via SMTP»
SMTP Host – для Яндекс почты smtp.yandex.ru
SMTP Port – для Яндекс почты 465
Encryption – Use SSL encryption
Authentication – Yes: Use SMTP authentication
Username – логин на вашей почте отправитель
Password – пароль на вашей почте отправитель
Настройка завершена. Сохраните изменения.
Как разместить форму обратной связи Contact Form 7 на странице
В настройках контактной формы обратите внимание на строчку наверху:
Ее нужно скопировать и вставить на любой странице. Все готово.
Не создает никаких трудностей, особенно по моей инструкции. Все работает исправно и письма отправляются. Также предлагаю ознакомиться со статьей о лучших для WordPress. Там вы найдете много чего интересного.