+7-499-703-00-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Спасибо за оставленную заявку
Ожидайте звонка
Время чтения: 6 мин. 20 июля 2018 в 18:47 Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Contact Form 7 — плагин контактной формы для WordPress

Contact Form 7 — плагин формы обратной связи, формы заказать звонок, формы для сбора любых данных, форма онлайн заявки и др., для сайтов, работающих на движке WordPress.

На мой взгляд лучшее решение что существует на момент 2018 года. Плагин очень гибок в настройке и имеет широкой спектр применения. Я применяю данную форму на всех сайтах которые я разрабатываю.

Общие сведения об установке

Схему установки плагина описывать не стану. Предположим это мы умеем.

После того как плагин активирован, сбоку в админке, в меню, появляется новый раздел под названием: Contact Form 7. Переходим в него. Здесь осуществляется настройка внутренних полей формы.

2014-11-17_153908

Вид по умолчанию форма Contact Form 7

Вид по умолчанию форма Contact Form 7

Если Вам все поля устраивают или вы побыстрее хотите испытать форму в работе, просто добавьте ШОРТКОД, который сгенерировала форма на страницу в Вордпрес.

Фото 1

Как использовать плагин Contact Form 7 как модуль заказать звонок ?

Здесь существует несколько решений. Давайте рассмотрим их.

1) Если мы хотим чтоб форма захвата выводилась в открытом виде (это значит что поля формы видны стразу), как на фото, то редактируете поля, как показано на фото 1, таким образом, чтоб осталось 2 поля — имя и телефон (ну или любое другое кол-во.)

Форма захвата в открытом виде

Форма захвата в открытом виде

Как изменять размер полей Contact Form 7

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

Размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются путем добавление размеров или с помощью CSS:

Путем добавления размера путем Contact Form 7 или через CSS 

Пример путем Contact Form 7

[textarea your-message 130×20]

  • 130 — задает ширину поля
  • 20 — задает максимальное количество символов в нем.

Путем CSS

Стилизация сообщения об ошибке в Contact Form 7

Если в код контакт формы добавить строку — html_class=»use-floating-validation-tip» то при наведении на поле где есть ошибка, сообщение об ошибке пропадет.

[contact-form-7 404 "Not Found"]

Позиционирование информации об ошибке

2015-05-19_223604

Для такого же результата добавляем код:

Готовые современные стили 2018-2019 года для Contact Form 7

Стиль №1

Contact Form 7

Стиль 2

Screen-Shot-2013-07-24-at-16.34.411

Стиль №3

2015-07-21_112145

Для стилизации кнопки на как на скриншоте, я добавил к кнопке submit  свой стиль mybtn — [submit class:mybtn «Отправить» ]

Для отображение иконок добавить их в папку где лежит шаблон \ img — https://max-webs.com/wp-content/uploads/2012/06/icon-cf7.png

Сообщение об успешной отправке или страница спасибо в Contact Form 7

По стандарту, после отправки сообщение с сайта, с использованием Contact Form 7, мы видим следующие сообщение: Ваше сообщение было отправлено успешно. Спасибо. и форма обнуляется. 

Стилизируем данное действие

П. С. заранее должны подключены FontAwesome

Переадресацию на другую страницу

Так же есть возможность сделать переадресацию на другую страницу, при безошибочно заполненной формы.

В дополнительные действия в настройках Contact Form 7 пишем  код:

Подставляем различные значения в поле

Допустим, мы используем Contact Form 7 как быстрый заказ, где предлагается ввести только имя и телефон. В таком случае, нам придется спрашивать у клиента, какой товар он заказал, или использовать скрытые поля для пометки, с какого URL отправлено письмо, или же мы можем использовать плагин Contact Form 7 Dynamic Text Extension.

Он добавляет возможность вставки новых полей

2015-07-25_232729

После вставки нового поля, при открытии страницы или формы popup, видим уже подставленное значение (в моем случае это произвольные поля WordPress), которое я прописал при публикации товара.

2015-07-25_232946

Как сделать ?

В шаблон формы добавляем:

где — artikyl — моё произвольное поле, а в шаблон письма добавляем

товар — [dynamictext-580]

В итоге после отправки сообщения на почту нам придет письмо следующего содержания:

2015-07-25_233326

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа Профессионал
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа начинающий
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказать услугу
В течении 15 минут я рассчитаю точную стоимость и сроки и отпишусь Вам.

Спасибо за оставленную заявку
Ожидайте звонка

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Начать сотрудничество
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Обсудить условия
Вкратце опишите Вашу ситуацию. При необходимости прикрепите файл. Я свяжусь с вами в течении 15 минут в рабочее время.

Введите контактный E-mail *

Введите контактный телефон *

Прикрепите файл

Сообщение *

Спасибо за оставленную заявку
Ожидайте звонка
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *