Не пропусти
Главная » Для вас » Contact Form 7 — конструктор форм для WordPress

Contact Form 7 — конструктор форм для WordPress

Contact Form 7 — конструктор форм для WordPress

Если Вы хотите расширить базовый функционал формы обратной связи WordPress или существует необходимость в нескольких формах – у Вас 2 пути: создать необходимые формы вручную, либо воспользоваться конструктором форм.
В этой статье мы рассмотрим второй вариант на примере популярного плагина-конструктора форм для WordPress Contact Form 7 (CF7).

Возможности Contact Form 7

  • Создание нескольких форм
  • Создание строк и полей текстового ввода
  • Генерация Radio-button
  • Генерация Check-box
  • Создание выпадающих списков
  • Выбор (или запрет выбора) нескольких сheck-box
  • Проверка заполнения обязательных полей
  • Формат сообщения, приходящего на почту
  • Генерация кнопок
  • Настройка стилей отображения формы и ее элементов
  • Поддержка капчи
  • Возможность отправки файлов
  • Установка системных сообщений

Установка плагина Contact Form 7

Об установке плагинов в WordPress мы подробно рассказывали в статье «Установка плагина WordPress через админ панель или FTP»
При установке через административную консоль WordPress зайдите в раздел плагины, введите в поисковой строке Contact Form 7, найдите плагин в результатах поиска и установите.
Для установки через ftp, скачать плагин можно по адресу http://contactform7.com/

После установки и активации плагина, в административной консоли Worpress появится еще один пункт: Контакты (CF7)
Contact Form 7 — конструктор форм для WordPress

Настойка Contact Form 7 и создание формы

В административной консоли WordPress перейдите в раздел Контакты (CF7)
Вы увидите сгенерированную тестовую форму «Контактная форма 1», код вставки формы (нам он понадобится позже) и ссылку «добавить новую» в верхней части страницы, рядом с названием плагина.
Contact Form 7 — конструктор форм для WordPress
Для добавления нескольких форм Вам нужно будет воспользоваться ссылкой “Добавить новую”.
Для редактирования существующей формы – достаточно кликнуть по ее названию.

Отредактируем существующую тестовую форму. Для этого кликнем по ее названию и перейдем в окно редактирования/создания формы.
Contact Form 7 — конструктор форм для WordPress
Создание и настройка формы интуитивно понятны:
Поле названия формы 1. Щелкнув по названию формы Вы можете его изменить
Код вставки формы 2. Этот код нужно будет скопировать для вставки формы в страницу.
Шаблон формы 3. В этом поле вы можете настроить внешний вид формы с использованием html-тегов.
Генератор тегов 4. В этом поле Вы можете создать элемент формы и настроить его.
Contact Form 7 — конструктор форм для WordPress
Contact Form 7 — конструктор форм для WordPress
Сгенерированные теги вставляются в поля 3 и 6

Поле Адресат 5. В этом поле Вы можете настроить параметры доставки сообщения, указав e-mail, формат и другие параметры сообщения.
Внешний вид сообщения настраивается в поле 6.
Для установки альтернативного адреса доставки сообщения и внешнего вида этого сообщения используется поле 7.
В поле 8 Вы можете настроить системные сообщения.

Для поддержки капчи необходимо дополнительно установить плагин Really Simple Captcha

После создания формы Вы копируете код вставки (поле 2) и сохраняете Вашу форму (7)

Вставка формы в страницу

Поместить форму на сайт проще простого. Достаточно скопировать код вставки нужной формы и вставить его в страницу, пост или в текстовый виджет.
Contact Form 7 — конструктор форм для WordPress
Contact Form 7 — конструктор форм для WordPress

Стили элементов формы Вы можете найти по адресу: /wp-content/plugins/contact-form-7/includes/css/styles.css

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

10+ фото продуманных питомцев, которые находят лазейки в установленных хозяевами правилах

Каждый хозяин объясняет своему питомцу, что ему позволительно делать, а что нет. Но… Ведь если я лежу на диване лишь наполовину, технически… я ведь на нем не лежу? и другие лайфхаки от хитрых четверолапых  Ему ...

Рейтинг@Mail.ru