Настраиваем Contact Form для WordPress. Часть 1

Ромчик
0

Настройка Contact Form для WordPressДоброго времени суток. В данной статье мы настроим Contact Form для WordPress. В одной старой статье я уже писал, как установить Contact Form 7 «WordPress форма обратной связи — плагин Contact Form 7» и с того времени много чего поменялось.

Вторая часть «Настраиваем Contact Form для WordPress. Часть 2»

И так приступим.

Установку и как создать форму я пропускаю, это вы можете прочитать в статье.

Рассматривать Contact Form я буду на примере своего сайта, и буду рассматривать форму заказа услуг.

Переходим Contact Form 7 -> Формы

Настройка плагина Contact Form 7 для WordPress

Открывается окно со списком форм:

Список контактных форм плагина Contact Form

Мы видим заголовок формы, код вставки, кто создал, и дату создания. Я буду настраивать форму заказа услуг.

Наводим мышку на название формы и в появившемся меню жмем «Изменить»

Редактирование контактной формы

И попадаем в настройки контактной формы.

У нас есть несколько вкладок

Вкладки при настройке плагина Contact Form

  • Шаблон формы – содержимое контактной формы
  • Письмо – настройка письма, которое будет приходить при отправке формы
  • Уведомления при отправке формы – настройка уведомлений.
  • Дополнительные настройки – тут мы можем дополнительно настроить некоторое поведение нашей формы.

Теперь рассмотрим каждую вкладку подробнее.

Шаблон формы

В данной вкладке мы можем настроить содержимое 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) – шаг приращения для числовых полей

Пример:


&nbsp;

[range your-range min:1 max:10 step:1 "5"]

&nbsp;

Поле для вставки даты

Для вставки даты используются два тега 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
Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2019 По всем вопросам обращайтесь через форму обратной связиПолитика конфиденциальности

Яндекс.Метрика