Плагин Contact Form 7 — лидер обратносвязывающих технологий

План статьи:

  1. Плагин Contact Form 7 для WordPress.
  2. Как сделать форму обратной связи на WordPress.
  3. Как сделать форму заказа товара или записи на событие на WordPress.

4-2322984

Плагин Contact Form 7 для WordPress

Contact Form 7 я использую довольно давно. Данное дополнение предназначено для создания различных форм на движке WordPress. Например, Вы решили сделать на сайте форму обратной связи или форму записи на семинар. Для этих целей лучше всего подойдет Contact Form 7. Плагин переведен на множество языков и будет удобен в использовании всем без исключения, так как настройка Contact Form 7 довольно проста. На момент написания поста его скачали 9 437 388 раз. Так что популярности ему не занимать :). Радует то, что здесь реализована не только настройка самой формы, но и письма, которое будет приходить Вам на почту. Сам плагин можно скачать здесь.

Теперь давайте посмотрим на Contact Form 7 в действии.

d0a1d0bad180d0b8d0bd1-6535989

d0a1d0bad180d0b8d0bd2-1130275

d0a1d0bad180d0b8d0bd3-3675785

d0a1d0bad180d0b8d0bd4-9676337

Посмотрели? Давайте попробуем что-то сделать ;). Но для начала проголосуйте в опросе ?

loading-2749423 Загрузка …

Для начала давайте как-то подпишем нашу форму. Я напишу «Форма обратной связи».

d0a1d0bad180d0b8d0bd5-2145696

Теперь приступим к настройке формы и параллельно письма, которое придет на e-mail. Contact Form 7 изначально дает нам шаблон, который, в принципе, уже можно использовать для создания формы обратной связи. Чтобы Вам было понятней, я удалю его и сделаю все заново. Итак, давайте решим, какие пункты должны быть заполнены пользователем, а также выберем обязательные из них. У меня пусть будет так:

  1. Имя (обязательно).
  2. Тема письма (обязательно).
  3. E-mail (обязательно).
  4. Сайт.
  5. Сообщение (обязательно).
  6. Прикрепленные файлы.
  7. Кнопка «Отправить».

Теперь реализуем все это.

Для начала создадим форму «Имя». Это обычное текстовое поле. Генерируем новый тег «Текстовое поле»:

d0a1d0bad180d0b8d0bd6-9017422

Далее настроим его:

    1. Укажем, что оно обязательно для заполнения;

d0a1d0bad180d0b8d0bd7-3936294

d0a1d0bad180d0b8d0bd8-5201955

d0a1d0bad180d0b8d0bd9-6844654

    1. Настроим внешний вид письма;

d0a1d0bad180d0b8d0bd10-9846992

  1. Добавим в графу «Отправитель».

d0a1d0bad180d0b8d0bd11-2216947

Вот и все. Первая форма создана. Далее создаем форму «Тема письма» так же, как и «Имя».

d0a1d0bad180d0b8d0bd12-5394566

d0a1d0bad180d0b8d0bd13-9733178

d0a1d0bad180d0b8d0bd14-4885763

Переходим к «E-mail». Генерируем «Поле email». Можно сгенерировать и обычное текстовое поле. Преимущество поля email заключается в том, что если пользователь напишет в нем какую-то абракадабру, то скрипт выдаст ошибку о не правильности заполнения поля. В остальном все делаем также как и в прошлых случаях.

d0a1d0bad180d0b8d0bd15-9876499

d0a1d0bad180d0b8d0bd16-2567597

d0a1d0bad180d0b8d0bd17-3399546

Поле «Сайт» делаем обычным текстовым полем. Указываем, что оно не обязательно для заполнения.

Переходим к полю «Сообщение». Генерируем «Текстовое поле». НО! Не то, что первое, а то, что третье :). Они называются по-разному, а отличия существенные. Говоря простым языком, первое текстовое поле маленькое, второе – большое. Генерируем, а дальше все, как и в прошлый раз.

d0a1d0bad180d0b8d0bd18-8474641

d0a1d0bad180d0b8d0bd19-1868439

Теперь генерируем тег «Отправка файла».

d0a1d0bad180d0b8d0bd20-9085555

В настройках можете задать максимальный размер файла и разрешенные типы файлов (.jpg, .png, .doc и т.д.).

d0a1d0bad180d0b8d0bd21-4694210

Добавляем в форму.

d0a1d0bad180d0b8d0bd22-8144236

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

d0a1d0bad180d0b8d0bd23-5489761

Теперь сделаю кнопочку «Отправить». Сгенерирую тег «Кнопка отправки».

d0a1d0bad180d0b8d0bd24-4246883

Вставляем в форму.

d0a1d0bad180d0b8d0bd25-1518860

Вот и все! Наша форма готова. Так она будет выглядеть на Вашем сайте:

d0a1d0bad180d0b8d0bd26-2858039

А вот такое сообщение пришло мне на E-mail:

d0a1d0bad180d0b8d0bd39-1063924

Как сделать форму заказа товара или записи на событие на WordPress

С помощью плагина Contact Form 7 можно создать не только форму обратной связи, но и, например, форму для заказа товара или записи на семинар. Как это сделать, думаю, Вы понимаете (как и с формой обратной связи). В этой части поста я только хочу более подробно рассмотреть теги, которые можно сгенерировать.

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

Позволяет сделать текстовое поле в одну строчку.

d0a1d0bad180d0b8d0bd27-5080182

Поле email

Создает поле в одну строчку для E-mail адреса. Если пользователь введет не верный e-mail, ему выдаст ошибку.

d0a1d0bad180d0b8d0bd28-3612281

Текстовое поле 2

Создает текстовое поле больших размеров для ввода любого текста.

d0a1d0bad180d0b8d0bd29-4317391

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

Создает выпадающее меню. Пункты следует указывать в поле «Выбор». Каждый с новой строчки (как показано на скрине).

d0a1d0bad180d0b8d0bd30-8409926

Выглядит следующим образом:

d0a1d0bad180d0b8d0bd31-7257539

Checkboxes

Создает «чекбоксы» — флажки, которые позволяют выбрать несколько вариантов из предложенных. Настраиваются также как и выпадающее меню. Выглядит так:

d0a1d0bad180d0b8d0bd32-5924687

Radio buttons

Создает «радиокнопки» — элементы интерфейса, которые позволяют выбрать один вариант из нескольких предложенных. Настраиваются также как и выпадающее меню. Выглядит так:

d0a1d0bad180d0b8d0bd33-9786258

Acceptance

Создает флажок принятия. Если он не установлен, нельзя отправить сообщение. Можно использовать для пункта «С правилами ознакомлен и согласен» и т.д.

Вопрос

Позволяет задать пользователю какой-то вопрос. Если он правильно на него ответит, то сообщение будет успешно отправлено. В противном случае выдаст ошибку. Не забудьте настроить тег в поле «Вопросы и ответы». Указывать следует так: Вопрос | Ответ.

d0a1d0bad180d0b8d0bd34-7633534

Выглядит так:

d0a1d0bad180d0b8d0bd35-3967421

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

Captcha

Создает капчу – картинку с символами. Пользователь ввел правильные символы – сообщение ушло. Не правильные – выдает ошибку. Обратите внимание, что при вставке в форму, используется 2 кода: для изображения и для поля ввода. Выглядит так:

d0a1d0bad180d0b8d0bd36-4499739

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

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

Позволяет отправлять файлы. Во время создания формы обратной связи Вы видели это поле в действии. Выглядит так:

d0a1d0bad180d0b8d0bd37-7261741

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

Создает кнопку, позволяющую отправить сообщение Вам на почту :D. Выглядит так:

d0a1d0bad180d0b8d0bd38-6818360

Также Вы можете изменять сообщения об успешной отправке, ошибках и т.д. в поле «Сообщения», которое находиться под блоком «Адресат».

d0a1d0bad180d0b8d0bd40-4167599

Как сделать собственный стиль формы

Читать продолжение о том как сделать собственные стили формы

На этом я заканчиваю свою статью. Надеюсь, она Вам чем-то помогла. В дальнейшем планирую доработать этот пост и выложить темы для Contact Form 7, чтобы форма обратной связи была не только работоспособной, но и красивой. Оставляйте комментарии :). Если пост вызовет хороший комментарий, постараюсь доработать его в ближайшее время ;).

loading-2749423 Загрузка …

Сергей Романчук.

Вам также может понравиться

About the Author: recordadmin