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

Очень удобно и эстетично, когда на сайте есть модальная форма обратной связи. Как сделать всплывающую форму обратной связи в Вордпресс, и не отсылать посетителей на отдельную страницу обратной связи. В принципе, мне лично больше нравятся открытые формы обратной связи (заказать звонок, задать вопрос и т.д.), которые устанавливаются на сайт простым шорткодом в любое удобное место. Однако, это невозможно сделать, кода форма обратной связи реализует большую нагрузку и очень громоздкая. Например: заявка на услуги с выбором вариантов услуг или заявка на бронирование с выбором даты и пр. В этом случае как раз и спасает всплывающая форма обратной связи.

Чтобы реализовать на сайте всплывающую контактную форму нужно установить два плагина: плагин формы обратной связи Contact form 7 и плагин шорткодов Shortcodes Ultimate. Последний плагин имеет обширный функционал и наверняка потребуется для реализации других задач.

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

1. Следующий шаг -  создание содержимого лайтбокса (модальная форма обратной связи). Заходим в раздел «шорткоды»:vsplyvayushhaya-forma-obratnoj-svyazi-1

 

2. Добавляем содержимое лайтбокса (модальная форма обратной связи):2-vsplyvayushhaya-forma-obratnoj-svyazi

 

3. В открывшемся окне заполняем поле ID — вставляем туда любой идентификатор, написанный латиницей, в нашем случае: contact-form:3-vsplyvayushhaya-forma-obratnoj-svyazi

 

4. Далее, наша задача создать непосредственно лайтбокс (модальная форма обратной связи). Для этого вновь вверху нажимаем кнопочку "ВСТАВИТЬ ШОРТКОД" (см. изобр. 1) и там выбираем «Лайтбокс»:5-vsplyvayushhaya-forma-lajtboks

 

5. В открывшейся форме выбираем тип содержимого Html, ниже заполняем источник содержимого id, заданый в предыдущем пункте для содержимого лайтбокса. Не забываем впереди поставить символ решётки: #contact-form:4-vsplyvayushhaya-forma-obratnoj-svyazi

 

6. Следующий шаг - создание кнопки, на которую будут кликать посетители сайта. Кнопка будет открывать всплывающую форму обратной связи. Для этого, снова кликаем наверху нашей страницы "Вставить шорткод" и в открывшейся форме выбираем функцию "Кнопка". Настраиваем её по своему усмотрению в соответствии с общим дизайном сайта. Обращаю ваше внимание на то, что результат настроек можно посмотреть в реальном режиме. И не забывайте "Сохранить шорткод". vsplyvayushhaya-forma-obratnoj-svyazi-8

 

7. Теперь берём сохранённый шорткод "Обратной формы связи", созданный в плагине Contact form 7 :

vsplyvayushhaya-forma-obratnoj-svyazi-4

 

8. И вставляем его в нашу конструкцию вместо слов "Содержимое кнопки":vsplyvayushhaya-forma-obratnoj-svyazi-9

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

1-forma-obratnoj-svyazi

По умолчанию плагин создаёт форму в один столбик, но часто возникает необходимость сделать форму обратной связи в два-три столбика. Как это сделать читайте КАК СДЕЛАТЬ ПОЛЯ CONTACT FORM 7 В 2-3 КОЛОНКИ

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