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

Что первое, что приходит на ум, когда вы слышите cлова «WordPress» и «Календарь» ? Скорее всего, вы бы представили стандартный виджет календаря, который должен...

5 полезных советов по созданию эффективных дизайнов логотипов для сайта

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

Введение в веб-разработку Laravel, основы и факты

Несколько дней мы слегка поспорили о том, есть ли у разработчиков Laravel будущее в ИТ-индустрии. Этот аргумент основывался на том факте, что Laravel не...

Как использовать консоль браузера Chrome для поиска и исправления ошибок JavaScript

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