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

Форму обратной связи можно увидеть почти на каждом сайте. В 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» (закрывать окно, когда кликают мышкой за его пределами).

5 комментариев

  1. ds09 2 года назад
    • admin 2 года назад
  2. Олег 1 год назад
    • admin 1 год назад

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