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

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

Довольно эффектно на сайте смотрятся всплывающие формы обратной связи, которые появляются как бы в отдельном окне. Как видно на картинке ниже контактная форма возникает при нажатии на кнопку «Сделать заказ».

form

На коммерческих сайтах сейчас чаще всего делаю форму обратного звонка, в которой обычно 2 поля: Имя и телефон. Сделать подобную всплывающую форму довольно просто. Для этого вам понадобится установить на сайт 2 плагина:

  1. Уже упомянутый Contact Form 7.
  2. И плагин Easy FancyBox.

Второй плагин как раз обеспечивает представление элементов как бы в отдельном окне (фактически это, конечно, не полноценное окно, какие, например, бывают в системе Windows, это просто такое визуальное представление).

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

На том месте, где должна быть кнопка с вызовом формы вставляем следующий код:

Шорткод формы, который вам приготовил Contact Form, вы должны вставить в этом коде между двумя квадратными скобками вместо того кода, что там сейчас есть.

Нужно иметь ввиду, что если вы просто добавите указанный код на страницу в редакторе WordPress, то он, скорее всего, не будет работать, поскольку содержит код php, а этот код будет работать, только если у вас стоит соответствующий плагин.

Я обычно добавляю вторую часть кода, которая содержит скрытую форму:

в файл footer.php в конец перед закрывающим тегом body, и все отлично работает.

Вместо кода с формой можно таким же образом отобразить любые элементы. Для этого нужно поместить их вместо кода.

Полезный совет

Если вам нужно сделать модальную (всегда остающуюся вверху) форму, уберите в настройках плагина Easy FancyBox пометку «Close FancyBox when overlay is clicked» (закрывать окно, когда кликают мышкой за его пределами).

Оцените статью
Делаем сайт своими руками
Комментарии: 4
  1. ds09

    при такой связке CF7 + Easy FancyBox отправляющий увидит результат работы формы CF7? — сообщение о том, что запрос отправлен или не отправлен.

    Ответить
    1. Ложников Андрей (автор)

      Да, увидит. Как и в стандартном случае.

      Ответить
  2. Олег

    Спасибо за статью. Такой вопрос — как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
    Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.

    Ответить
    1. Ложников Андрей (автор)

      Олег, с плагином Contact Form 7 Dynamic Text Extension дела не имел. Поэтому не могу ответить.

      Ответить
Добавить комментарии