Доброго времени суток. В данной статье мы настроим 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: поля, которые мы можем добавить в форму и параметры, которые мы можем передать этим полям. А во второй части мы остановимся на настройках вида письма и разберем специальные теги, которые можно использовать в письме.