Настраиваем Contact Form для WordPress. Часть 1
Доброго времени суток. В данной статье мы настроим Contact Form для WordPress. В одной старой статье я уже писал, как установить Contact Form 7 «WordPress форма обратной связи — плагин Contact Form 7» и с того времени много чего поменялось.
Вторая часть «Настраиваем Contact Form для WordPress. Часть 2»
И так приступим.
Установку и как создать форму я пропускаю, это вы можете прочитать в статье.
Рассматривать Contact Form я буду на примере своего сайта, и буду рассматривать форму заказа услуг.
Переходим Contact Form 7 -> Формы
Открывается окно со списком форм:
Мы видим заголовок формы, код вставки, кто создал, и дату создания. Я буду настраивать форму заказа услуг.
Наводим мышку на название формы и в появившемся меню жмем «Изменить»
И попадаем в настройки контактной формы.
У нас есть несколько вкладок
- Шаблон формы – содержимое контактной формы
- Письмо – настройка письма, которое будет приходить при отправке формы
- Уведомления при отправке формы – настройка уведомлений.
- Дополнительные настройки – тут мы можем дополнительно настроить некоторое поведение нашей формы.
Теперь рассмотрим каждую вкладку подробнее.
Шаблон формы
В данной вкладке мы можем настроить содержимое contact form. Для вставки элементов формы используются различные теги
[<тег> <имя элемента> <параметры> <значения>]
Текстовое поле в Contact Form
Текстовое поле. Для текстового поля служат два тега text и text*
Данные теги вставляют
<input type="text">
С одним отличием, что text* является обязательным для заполнения
Данные теги могут принимать несколько параметров:
- id:(id) – id input элемента
- class:(class) – class input элемента
- minlength:(num) – минимальная длина input элемента
- maxlength:(num) – максимальная длина input элемента
- size:(num) – задает ширину элемента input
- akismet:author – если добавим данный параметр, то akismet будет проверять форму на спам.
Но помните, что у вас должен быть настроен akismet. Рекомендуется установить все варианты для akismet (akismet:author_email в поле email, akismet:author_url в поле url) для более точного определения спама
- placeholder – placeholder для элемента input
- default:user_login – устанавливает значение по умолчанию логин пользователя
- default:user_first_name – устанавливает значение по умолчанию имя пользователя
- default:user_last_name – устанавливает значение по умолчанию фамилию пользователя
- default:user_nickname – устанавливает значение по умолчанию ник пользователя
- default:user_display_name – устанавливает значение по умолчанию отображаемое имя пользователя
Пример из моей формы:
<label> Ваше имя (обязательно) [text* your-name class:form-control] </label>
Поле E-mail
Служит для вставки только email. Для вставки текстового поля есть два тега email и email* (это обязательное поле для заполнения)
Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- minlength:(num) – минимальная длина input элемента
- maxlength:(num) – максимальная длина input элемента
- size:(num) – задает ширину элемента input
- akismet:author_email – если добавим данный параметр, то akismet будет проверять форму на спам.
- placeholder – placeholder для элемента input
- default:user_email – устанавливает значение по умолчанию email пользователя
Пример из формы:
<label> Ваш e-mail (обязательно) [email* your-email class:form-control] </label>
URL-поле
Служит для вставки только URL. Два тега url и url* (поле обязательно для ввода). Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- minlength:(num) – минимальная длина input элемента
- maxlength:(num) – максимальная длина input элемента
- size:(num) – задает ширину элемента input
- akismet:author_url – если добавим данный параметр, то akismet будет проверять форму на спам.
- placeholder – placeholder для элемента input
- default:user_url – устанавливает значение по умолчанию url пользователя
Пример:
<label> Введите адрес Вашего сайта [url url class:form-control] </label>
Поле для ввода телефонного номера
Служит для вставки только телефонного номера. Служат два тега tel и tel* ( поле для обязательного ввода). Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- minlength:(num) – минимальная длина input элемента
- maxlength:(num) – максимальная длина input элемента
- size:(num) – задает ширину элемента input
- placeholder – placeholder для элемента input
Пример:
<label> Введите номер телефона [tel tel class:form-control] </label>
Поле Textarea
Для вставки textarea используются два тега textarea и textarea*(обязательное для заполнения поле)
Может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- minlength:(num) – минимальная длина input элемента
- maxlength:(num) – максимальная длина input элемента
- (cols)x(rows) – количество строк и столбцов
- placeholder – placeholder для элемента input
Пример из формы:
<label> Сообщение [textarea your-message class:form-control] </label>
Числовое поле
Служит для ввода чисел. Для вставки используются два тега number и number* (для обязательного заполнения). Может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- placeholder – placeholder для элемента input
- min:(num) – нижнее значение для ввода числа
- max:(num) – верхнее значение для ввода числа
- step:(num) – шаг приращения для числовых полей
Пример:
[number* your-number min: max:10 step:1 class:number "4"]
Поле диапазона
Служит для ввода чисел. Для вставки используются два тега range и range* (для обязательного заполнения). Может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- placeholder – placeholder для элемента input
- min:(num) – нижнее значение для ввода числа
- max:(num) – верхнее значение для ввода числа
- step:(num) – шаг приращения для числовых полей
Пример:
[range your-range min:1 max:10 step:1 "5"]
Поле для вставки даты
Для вставки даты используются два тега date и date*(для обязательного ввода). Может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- placeholder – placeholder для элемента input
- min:(num) – нижнее значение для ввода даты
- max:(num) – верхнее значение для ввода даты
- step:(num) – шаг приращения
Пример:
[date* date min:2017-01-01 max:2017-01-31 step:2 "2017-01-01"]
Поле checkbox
Для вставки поля checkbox используются теги checkbox и checkbox* (обязательное поле). Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- default:(num) – устанавливает значение по умолчанию
- label_first – меняет местами описание и checkbox
- use_label_element – оборачивает элементы в тег label
- exclusive – галочку можно установить на одном элементе. Но проверка с помощью JavaScript
- free_text – добавлять свободный текстовое поле ввода для последнего элемента
- data:(name) – данные списка
Поле radio
Для вставки поля radio используется тег radio. Который может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- default:(num) – устанавливает значение по умолчанию
- label_first – меняет местами описание и radio buttons
- use_label_element – оборачивает элементы в тег label
- free_text – добавлять свободный текстовое поле ввода для последнего элемента
- data:(name) – данные списка
Выпадающий список
Для вставки выпадающего списка используются теги select и select* (обязательное поле).
Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- default:(num) – устанавливает значение по умолчанию
- multiple – можно выбрать несколько элементов
- include_blank – вставляет пустой элемент вначале этого выпадающего списка
- first_as_label – использовать первое значение в качестве метки
- data:(name) – данные списка
Пример из формы:
<label> Выберите услугу [select your-subject class:form-control "Доработка сайта" "Создание блога" "Создание сайта-визитки" "Создания лендинга" "Создание интернет-магазина" "Создание форума" "Настройка" "Оптимизация" "Другое"]</label>
Поле добавления файла
Для вставки поля добавления файла используются теги file и file* (обязательное поле). Принимает следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
- filetypes:(filetypes) – указываем типы файлов
- limit:(num) – указываем максимальный размер файла
Пример:
[file file filetypes:txt|doc limit:5mb]
Submit
Для вставки submit используется тег submit. Может принимать следующие параметры:
- id:(id) – id input элемента
- class:(class) – class input элемента
Пример из формы:
[submit "Отправить"]
На этом я закончу рассмотрение первой части.
Вторая часть «Настраиваем Contact Form для WordPress. Часть 2»
Заключение
В данной статье мы рассмотрели, как настроить вид Contact From для WordPress: поля, которые мы можем добавить в форму и параметры, которые мы можем передать этим полям. А во второй части мы остановимся на настройках вида письма и разберем специальные теги, которые можно использовать в письме.
Чтобы не пропустить выхода новых статей подписываемя: VK, twitter, facebook. И канал на youtube