План статьи:

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

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

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

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

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

 Загрузка …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле email

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

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

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

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

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

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

Checkboxes

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

Radio buttons

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

Acceptance

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

Вопрос

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

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

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

Captcha

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

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

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

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

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

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

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

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

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

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

 Загрузка …

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