Всплывающая форма обратной связи для WordPress

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

РЕКОМЕНДУЕМ

10 плагинов для всплывающих форм на сайте WordPress 2019, плюсы и...

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

10 распространенных ошибок WordPress и решения для их исправления

Для инструмента, которому принадлежит 50-процентная доля рынка всей системы управления контентом (CMS), WordPress стал собственным стандартом. Но, как и любой инструмент, вы можете время от...

Полный обзор админ панели WordPress: функционал, пункты меню, настройки

Итак, вы только что установили WordPress и вошли в свой новый WordPress через «site.com/wp-admin». Что теперь? Если вы не знакомы с WordPress, ваше первое знакомство...

WP Rocket правильная и оптимальная настройка на сайте для кеширования

WP Rocket называют лидером среди плагинов кеширования для сайтов сделанных на системе управления сайтом Wordpress. Конечно есть некоторые споры какие плагины кеширования лучше и...
Alecs Retin
Работаю в сфере web с 2009 года. Занимался созданием своих проектов в разных тематиках. В основном делаю сайты на Instantcms и Wordpress. Оказываю услуги разработки сайтов и стартапов, инвестирую в интернет проекты и сервисы. Более 10 лет занимаюсь Web разработкой и создание интернет проектов. Интернет магазины, информационные порталы, городские порталы. Оказываю поддержку в развитии и продвижении сайтов.