План статьи:

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

Contact Form 7

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

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

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

Contact Form 7 настройка

Contact Form 7 настройка

Contact Form 7 настройка

Contact Form 7 настройка

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

Используешь Contact Form 7?

Просмотреть результаты

Загрузка ... Загрузка ...

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

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

Форма обратной связи на WordPress

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

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

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

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

Форма обратной связи на WordPress

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

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

Форма обратной связи на WordPress

Форма обратной связи на WordPress

    1. Добавим его код в форму;

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

Форма обратной связи на WordPress

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

Форма обратной связи на WordPress

Форма обратной связи на WordPress

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

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

Форма обратной связи на WordPress

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

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

Форма обратной связи на WordPress

 

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

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

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

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

Как сделать форму заказа товара на сайте

Поле email

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

Как сделать форму заказа товара на сайте

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

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

Как сделать форму заказа товара на сайте

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

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

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

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

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

Checkboxes

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

Checkboxes

Radio buttons

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

Radio buttons

Acceptance

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

Вопрос

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

Contact Form 7

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

Contact Form 7

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

Captcha

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

Captcha

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

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

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

Contact Form 7

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

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

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

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

Contact Form 7

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

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

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

Используешь Contact Form 7?

Просмотреть результаты

Загрузка ... Загрузка ...

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