В этой статье рассмотрим процесс интеграции Contact Form 7 в всплывающее окно. Хочу отметить, что эта реализация базируется на использовании плагина Popup Maker, который прекрасно сочетается с первым инструментом и не влияет на его внешний вид. Давайте перейдем к подробной инструкции с пошаговым объяснением.
Перед началом убедитесь, что на вашем сайте установлен и активирован плагин Contact Form 7, а также плагин Popup Maker. Если их еще нет, вы можете установить их через панель администрирования WordPress в разделе «Плагины».
Шаг 1: Создайте форму с помощью Contact Form 7. Перейдите в раздел «Contact» на панели управления, нажмите «Добавить новую» и настройте свою форму. Не забудьте сохранить изменения.
Шаг 2: Далее создайте всплывающее окно в Popup Maker. Перейдите в раздел «Popup Maker» и нажмите «Добавить новое». В редакторе окна добавьте заголовок и содержимое, а затем вставьте шорткод вашей формы Contact Form 7. Шорткод можно найти в разделе «Contact» после создания формы.
Шаг 3: Настройте триггеры для всплывающего окна. Это позволит вам выбрать, при каких условиях будет открываться окно (например, при нажатии на кнопку или через определенное время после загрузки страницы).
Шаг 4: Проверьте оформление всплывающего окна. Popup Maker позволяет настраивать стили, так что вы можете изменить цвет, размер и анимацию всплывающего окна, чтобы оно гармонично вписывалось в дизайн вашего сайта.
Шаг 5: После завершения настройки, сохраните всплывающее окно и протестируйте его функциональность на сайте. Убедитесь, что форма корректно отправляется и обрабатывается.
Использование контактных форм во всплывающих окнах помогает улучшить пользовательский опыт и увеличить количество обращений от посетителей. Следуя этим шагам, вы сможете легко интегрировать Contact Form 7 в ваше всплывающее окно, обеспечивая при этом его высокую функциональность и привлекательный внешний вид.
Создание новой формы contact form 7
Начнем с создания новой формы в Contact Form 7, включая три поля: имя, телефон и электронная почта. Этот стандартный набор идеально подходит для сбора контактной информации. Завершив создание формы, необходимо либо скопировать, либо записать шорткод, с которым мы будем дальше работать.
Чтобы добавить поля в форму, используйте стандартные теги, такие как [text* ваш_имя] для поля имени, [tel* ваш_телефон] для номера телефона и [email* ваш_email] для электронной почты. Обязательно добавьте атрибут * к полям с обязательным заполнением, чтобы обеспечить корректное заполнение формы пользователем.
После создания формы не забудьте настроить уведомления и сообщения об успешной отправке. Это позволит вашим посетителям понять, что их информация была успешно отправлена. Например, в разделе «Почта» вы можете указать адрес электронной почты, на который будет приходить информация, и настроить текст сообщения.
Не забудьте также протестировать форму перед публикацией, чтобы убедиться, что все работает корректно. Можно сделать это, заполнив форму сами и проверив, получаете ли вы уведомления.
Как сделать интеграцию в PopupMaker
Теперь приступим к установке Popup Maker, что можно сделать через административный панельный поиск или загрузив его отсюда. После установки в меню WordPress появится новый пункт, через который мы создадим новое модальное окно.
- Выбираем путь для добавления нового всплывающего окна.
- Название, которое не отображается на сайте.
- Заголовок для попапа, если он не нужен, это поле оставляем пустым.
- Шорткод из Contact Form 7.
Спускаемся вниз, чтобы определить условия, при которых будет появляться попап.
- Раздел с триггерами.
- Нажимаем на кнопку «Добавить».
- Выбираем один из триггеров: по клику на элемент (открыть) или автоматическое открытие через заданный промежуток времени.
- Добавляем триггер.
Если выберем “открыть”, появятся дополнительные опции. Здесь нужно задать уникальный класс, например,.otkryt-modelnoe, с которым будем работать далее.
В Contact Form 7 предусмотрена поддержка cookie, что позволяет добавлять настройки для отображения или скрытия формы. Полезно поэкспериментировать с автооткрытием, но это будет темой других статей.
Теперь добавим созданный класс к любому элементу на странице, например, к ссылке на главной. Создаем новую запись, вставляем ссылку и прикрепляем класс. Как видно на изображении, сначала в визуальном редакторе создаем ссылку, а затем переключаемся на текстовый режим и добавляем комбинацию:
class="otkryt-modelnoe"
Не забываем обновить или сохранить запись и проверить работу на странице блога. При нажатии на “текст ссылки” должен появиться всплывающий элемент, в котором будет находиться наша форма из Contact Form 7, с настройками оформления от fancybox.
Для выполнения данной операции также подойдут плагины FancyBox и Easy Modal, однако их использование может быть более сложным и потребует написания кода.
Не забудьте протестировать всплывающее окно на различных устройствах и браузерах, чтобы обеспечить его корректное отображение. Также имеет смысл добавить анимацию или эффекты появления, чтобы сделать окно более привлекательным для пользователей. Обратите внимание на плавность открытия и закрытия попапа, это улучшит пользовательский опыт.
Для повышения конверсии рекомендуем использовать аналитические инструменты, такие как Google Analytics, чтобы отслеживать взаимодействия с попапом и корректировать его настройки на основе собранных данных. Например, вы можете тестировать разные триггеры или дизайн, чтобы определить, что лучше всего работает для вашей аудитории.
Также, учитывайте, что всплывающие окна могут раздражать пользователей. Не злоупотребляйте их использованием и старайтесь делать их максимально ненавязчивыми.
Всплывающее окно после заполнения и отправки
Теперь рассмотрим случай, когда всплывающее окно должно появляться после заполнения и отправки формы, т.е. после нажатия кнопки “отправить”. Для этого нам потребуется плагин Popup for Contact Form 7, который доступен здесь. Устанавливаем и активируем его, после чего в меню появится новый раздел.
- Раздел «Общие настройки».
- Основные настройки, где выставляем галочки для проектов, к которым добавляем всплывающее уведомление, а также настраиваем размеры окна (длину и ширину), включая автоматическое закрытие, например, через 5000 миллисекунд.
- Сохраняем изменения.
В окне Popup Text вводим contenid, также можно воспользоваться стандартным редактором WordPress. В разделе «Дизайн всплывающего окна» настраиваем внешний вид, цвет шрифта и фона. После всех изменений проверьте, как работает окно.
Инструмент имеет минимальные функции, для более полной настройки внешнего вида нужно иметь базовые знания CSS. Упомяну, что существует возможность без использования плагинов с помощью скриптов и хуков Contact Form 7, но не рекомендую этот подход из-за его сложности и потенциальных ошибок в работе.
Таким несложным способом мы создали модальное всплывающее окно, которое может выполнять функционал, например, обратной связи или запросов на звонок.
Теперь вывести всплывающее окно на сайте стало проще благодаря плагину My Popup WPShop.
P.S. Для тех, кто предпочитает видео, прилагаю обзор:
Помимо стандартных функций, используемых в данном плагине, можно экспериментировать с различными триггерами, чтобы всплывающее окно появлялось не только по окончании отправки формы, но и в других случаях, таких как попытка покинуть страницу или неактивность пользователя в течение определенного времени.
Также рекомендуется протестировать окно на разных устройствах и браузерах, чтобы убедиться, что пользовательский опыт будет одинаковым для всех. Это позволит избежать потенциальных проблем, связанных с отображением и функциональностью на мобильных устройствах.
Если у вас возникнут трудности с настройкой, на официальном сайте плагина есть раздел FAQ и документация, где подробно рассматриваются возможные проблемы и методы их решения.