Сегодня я расскажу вам как я пытался сделать и в итоге сделал красивую форму всплывающей обратной связи для сайта на 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, хотя описанные здесь действия несложные, тем не менее будут для вас полезными.
