Сегодня я расскажу вам как я пытался сделать и в итоге сделал красивую форму всплывающей обратной связи для сайта на WordPress. Это пригодится для любого сайта на WordPress, который имет обратную связь, а главное, что в этом решении вам пригодится поле согласия с передачей персональных данных, как того требует закон.

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

Начало работы и принцип действий

Задача поступила несколько дней назад, в итоге надо было решать и для начала я решил изучить все материалы по этой теме. Нашёл решение по выводу в фанси боксе, но выглядело оно также бесплатно, каковым это решение и являлось. Надо было вывести всё красивым видом, удобно и понятно. Поэтому я решил изучить премиум решения, на кодеканьон, который является крупнейшей площадкой по продаже скриптов и дополнений для сайтов.

Немного покопавшись, нашёл несколько удобных решений, которые могли решить мою задачу, теперь оставалось выбрать и применить. Не буду писать много о каждом из вариантов, скажу лишь что выбран был вот этот плагин всплывающего окна для WordPress, который стоит всего 14 долларов и позволяет достаточно красиво настроить всплывающую форму обратной связи, плюс применить дополнительные настройки по уникализации вида окна под себя.

Один из плюсов плагина – он выглядит одинаково хорошо на разных шаблонах WordPress. Окей, решение есть, купил и решил установить. Но при установке возникли ошибки, которые собственно и побудили меня к созданию этой статьи, чтобы помочь тем, кто столкнётся с этим в работе.

Ошибка Fatal error: Cannot redeclare tgmpa() (previously declared in

Ошибка очень интересная, идет дважды вызов tgmpa, при этом плагин не устанавливается, что как бы очень неприятно. Такая ошибка кстати может возникнуть и у других плагинов, которые используют tgmpa, поэтому мое решение пригодится не только для плагина всплывающего окна.

Первое, что надо было сделать – отловить где идёт вызов кроме этого плагина. Он бывает в разных местах, для этого используйте debug, просто добавьте в них шаблона следующий код:

 

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 файлов движка 

 

Его надо вставить до:

require_once( ABSPATH . 'wp-settings.php' );

В любом месте wp-config.php находящегося в корне сайта. 

Дальше я обнаружил вызов, который был в теме сайта. Надо было изменить второй вызов, для чего я открыл файл в Notepad +++ и сделал массовую замену tgmpa на tgmpass (можете заменить на своё) и после этого залил файл по новой в папку плагина. После этого плагин установился отлично и в дальнейшем конфликтов не возникало. 

Contact Form 7 делаем согласие с передачей персональных данных

Теперь оставалось настроить сам плагин, что собственно нетрудно и создать нужную форму обратной связи, что сделать очень легко. Сейчас я приведу пример настроенной формы, чтобы вы могли просто создать для себя такую, потратив меньше времени.

В этой контактной форме contact form 7 – образец формы имеющей следующие поля:

  • Имя
  • Телефон
  • Почта
  • Дополнительные данные
  • Файл 1
  • Файл 2

И кроме этих полей в форме создано поле согласия с передачей персональных данных, согласно закона о персональных данных. Вот как выглядит такая готовая форма:

Название формы для посетителя

<h2 class="short"><strong>Напишите нам</strong></h2>

 

Div для стилей, если надо изменить цвета.

<div class="ros">

 

Блоки вывода имени, телефона, почты, дополнительных данных.

<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 согласие с персональными данными.

<div class="col-md-12"><label>[acceptance acceptance-156] Я принимаю <a href="/uslovia" target="_blank">cоглашение сайта</a> об обработке персональных данных.</label></div>

 

Кнопка отправить данные.

<div class="col-md-12">
<div class="form-group">
[submit class:btn class:btn-primary class:btn-lg "Отправить"]
</div>
</div>

 

Закрываем ros див.

</div>

Вы можете сформировать свою, либо просто взять скопировать эту. Собственно на этом весь процесс был закончен. Надеюсь эта статья пригодится для новичков в WordPress, хотя описанные здесь действия несложные, тем не менее будут для вас полезными. 

ОСТАВЬТЕ ОТВЕТ

Отправить комментарий?
Напишите ваше имя