logo у меня все покупают г. Москва

WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки.

17 февраля 2019 в 0:51 Блог веб-разработчика

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

[sociallocker]

Пример путем CSS где width нужное значение. Можно указывать в пикселях, процентах и т. д.

[/sociallocker]

Стилизация сообщения об ошибке в 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://iwebs.pro/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

WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #8642398 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #2642598 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #3357202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #9357002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #15356802 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #21356602 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #27356402 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #33356202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #39356002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #45355802 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #51355602 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #57355402 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #63355202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #69355002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #75354802 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #81354602 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #87354402 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #93354202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #99354002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #105353802 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #111353602 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #117353402 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #123353202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #129353002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #135352802 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #141352602 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #147352402 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #153352202 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #159352002 WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки. #165351802

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


Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

Ваш вопрос:

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

Ваш вопрос:

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

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

Как с вами связаться? *

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

Создадим сайт по картинке или вашему макету
Цена: от 2,900 руб. Я бесплатно рассчитаю стоимость реализации сайта в течение 15 минут.
Как это работает? После расчета стоимости я отпиваюсь вам и вы принимаете решение о дальнейшем сотрудничестве.
Задать вопрос
Опишите вопрос своими словами. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

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

Комментарий

There are no products