Сегодня я расскажу вам как я пытался сделать и в итоге сделал красивую форму всплывающей обратной связи для сайта на WordPress. Это пригодится для любого сайта на WordPress, который имет обратную связь, а главное, что в этом решении вам пригодится поле согласия с передачей персональных данных, как того требует закон.
Содержание
В основном всплывающая форма удобна для ваших клиентов и посетителей на сайте, так как позволяет быстро реализовать решение о отправке сообщения, без обращения к другой странице сайта.
Начало работы и принцип действий
Задача поступила несколько дней назад, в итоге надо было решать и для начала я решил изучить все материалы по этой теме. Нашёл решение по выводу в фанси боксе, но выглядело оно также бесплатно, каковым это решение и являлось. Надо было вывести всё красивым видом, удобно и понятно. Поэтому я решил изучить премиум решения, на кодеканьон, который является крупнейшей площадкой по продаже скриптов и дополнений для сайтов.
Немного покопавшись, нашёл несколько удобных решений, которые могли решить мою задачу, теперь оставалось выбрать и применить. Не буду писать много о каждом из вариантов, скажу лишь что выбран был вот этот плагин всплывающего окна для WordPress, который стоит всего 14 долларов и позволяет достаточно красиво настроить всплывающую форму обратной связи, плюс применить дополнительные настройки по уникализации вида окна под себя.
Один из плюсов плагина — он выглядит одинаково хорошо на разных шаблонах WordPress. Окей, решение есть, купил и решил установить. Но при установке возникли ошибки, которые собственно и побудили меня к созданию этой статьи, чтобы помочь тем, кто столкнётся с этим в работе.
Ошибка Fatal error: Cannot redeclare tgmpa() (previously declared in
Ошибка очень интересная, идет дважды вызов tgmpa, при этом плагин не устанавливается, что как бы очень неприятно. Такая ошибка кстати может возникнуть и у других плагинов, которые используют tgmpa, поэтому мое решение пригодится не только для плагина всплывающего окна.
Первое, что надо было сделать — отловить где идёт вызов кроме этого плагина. Он бывает в разных местах, для этого используйте debug, просто добавьте в них шаблона следующий код:
|
1 2 3 4 |
define( 'WP_DEBUG', true ); // включение дебаг режима define( 'WP_DEBUG_LOG', true ); // true - логирование ошибок в файл /wp-content/debug.log define( 'WP_DEBUG_DISPLAY', false ); // false или true - отключает и включает показ ошибок на экране define( 'SCRIPT_DEBUG', true ); // используем полные версии JS и CSS файлов движка |
Его надо вставить до:
|
1 |
require_once( ABSPATH . 'wp-settings.php' ); |
В любом месте wp-config.php находящегося в корне сайта.
Дальше я обнаружил вызов, который был в теме сайта. Надо было изменить второй вызов, для чего я открыл файл в Notepad +++ и сделал массовую замену tgmpa на tgmpass (можете заменить на своё) и после этого залил файл по новой в папку плагина. После этого плагин установился отлично и в дальнейшем конфликтов не возникало.
Contact Form 7 делаем согласие с передачей персональных данных
Теперь оставалось настроить сам плагин, что собственно нетрудно и создать нужную форму обратной связи, что сделать очень легко. Сейчас я приведу пример настроенной формы, чтобы вы могли просто создать для себя такую, потратив меньше времени.
В этой контактной форме contact form 7 — образец формы имеющей следующие поля:
- Имя
- Телефон
- Почта
- Дополнительные данные
- Файл 1
- Файл 2
И кроме этих полей в форме создано поле согласия с передачей персональных данных, согласно закона о персональных данных. Вот как выглядит такая готовая форма:
Название формы для посетителя
|
1 |
<h2 class="short"><strong>Напишите нам</strong></h2> |
Div для стилей, если надо изменить цвета.
|
1 |
<div class="ros"> |
Блоки вывода имени, телефона, почты, дополнительных данных.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="col-md-4"> <div class="form-group"> <label for="contact-name">Имя *</label> [text text-name id:name class:form-control] </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="contact-name">Телефон *</label> [tel* tel-tele id:tel class:form-control] </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="contact-name">Ваш email </label> [text text-mai id:mailo class:form-control] </div> </div> <div class="col-md-12"> <div class="form-group"> <label for="contact-name">Дополнительная информация </label> [textarea textarea-dopinfo id:pole class:form-control] </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="contact-name">Файл (фото или документ) </label> [file file-222 limit:10485760 filetypes:gif|png|jpg|jpeg|doc|pdf id:file class:form-control] </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="contact-name">Файл2 (фото или документ) </label> [file file-111 limit:10485760 filetypes:gif|png|jpg|jpeg|doc|pdf id:file class:form-control] </div> </div> |
Ставим в форму contact form 7 согласие с персональными данными.
|
1 |
<div class="col-md-12"><label>[acceptance acceptance-156] Я принимаю <a href="/uslovia" target="_blank">cоглашение сайта</a> об обработке персональных данных.</label></div> |
Кнопка отправить данные.
|
1 2 3 4 5 |
<div class="col-md-12"> <div class="form-group"> [submit class:btn class:btn-primary class:btn-lg "Отправить"] </div> </div> |
Закрываем ros див.
|
1 |
</div> |
Вы можете сформировать свою, либо просто взять скопировать эту. Собственно на этом весь процесс был закончен. Надеюсь эта статья пригодится для новичков в WordPress, хотя описанные здесь действия несложные, тем не менее будут для вас полезными.
«Обратная связь – это важная часть любого сайта. Но как реализовать ее на WordPress? Всплывающая форма обратной связи может быть идеальным решением. Какие плагины для этого существуют?»
Какие преимущества имеет всплывающая форма обратной связи для WordPress?
Дополнение:
В ходе поиска премиум решения для всплывающей формы обратной связи на сайте WordPress, я также нашел возможность добавить функцию отображения полей согласия с передачей персональных данных, в соответствии с требованиями закона. Это особенно важно для пользователей, которые хотят отправить сообщение, чтобы они имели возможность ознакомиться и согласиться с политикой конфиденциальности. С помощью выбранного премиум решения с возможностью настройки, я смог убедиться, что весь процесс отправки сообщения соблюдает требования по защите данных и обеспечивает прозрачность для пользователей. Таким образом, форма обратной связи стала не только функциональной, но и соответствовала текущим законодательным требованиям.
о всех решениях, которые я рассматривал, ведь это займет слишком много места. Однако, после тщательного анализа я выбрал плагин «Popup Maker», который предоставляет множество настроек и возможностей для создания всплывающей формы обратной связи. Он также позволяет добавить поле согласия с передачей персональных данных, что важно с точки зрения соответствия законодательству о защите данных.
После установки плагина, я начал настраивать внешний вид формы и ее функционал. Возможность выбора из множества стилей и шаблонов помогла мне создать красивую и привлекательную форму, которая хорошо сочетается с остальным дизайном сайта.
Кроме того, плагин «Popup Maker» предлагает опции для настройки поведения формы, например, задержку перед отображением, частоту появления и условия ее появления. Это позволяет настроить форму таким образом, чтобы она не мешала пользователям и появлялась только в определенных случаях, например, при покидании страницы или после определенного времени на сайте.
В итоге, благодаря плагину «Popup Maker», я создал красивую всплывающую форму обратной связи на сайте на WordPress. Она не только помогает пользователям быстро отправить сообщение, но и соответствует требованиям законодательства о защите данных. Это полезное решение для любого сайта на WordPress, который нуждается в функционале обратной связи.
Какие премиум решения на кодеканьон вы рассматривали для создания всплывающей формы обратной связи?