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

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

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

СЕГОДНЯ ЧИТАЮТ

Как установить картинкам название поста в качестве Alt текста на сайте WordPress

Когда я провел SEO-аудит на одном из проектов на этом сайте, я был удивлён тем фактом, что на изображениях не хватает альтернативных текстов . Учитывая, что...

Обзор WordPress редактора Gutenberg: все плюсы и минусы, как с ним работать

С выпуском WordPress 5.0 новый  редактор Gutenberg наконец-то появился у всех на панели. Хорошие это или плохие новости - все еще спорный вопрос для многих,...

Как понять причину проблемы на сайте с Instantcms (универсальный метод)

Доброго дня всем любителям системы Instantcms, несколько вопросов буквально совпали по времени и касались они ошибок, которые неизбежно бывают в работе и любого вебмастера...

Как сделать функциональный видео сайт – Instantvideo

Как выбрать систему управления сайтом для создания видео сайта. Как сделать свой сайт с видео быстро и качественно. Казалось бы простые вопросы, но чаще...

Создание логотипа: как создать свой собственный логотип сайта онлайн

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

Как работать с облачной библиотекой темы WordPress Newspaper

Многие любители темы Newspaper наверно заметили, что в последний год появился плагин tagDiv Cloud Library, который создаёт на вашем сайте доступ к онлайн библиотеке шаблонов...

ПОХОЖИЕ МАТЕРИАЛЫ

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...

BuddyPress плагин для создания социальной сети на WordPress (профили, группы)

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

Age Gate плагин WordPress для создания ограничения по возрасту при входу на сайт

Существует много применения для ограничения контента по возрасту, такие как трейлеры фильмов, алкоголь или другие «взрослые» темы. Данный плагин позволяет установить возрастное ограничение на...

Simple Masonry Gallery простой плагин для организации галереи Masonry на сайте

Добавьте эффект Masonry к изображению. Поддерживает блок и шорткод. Добавьте эффект к изображениям, вставляемым в запись WordPress, пользовательские записи и страницы. Добавляет эффект в...

Direct Checkout for WooCommerce плагин для оптимизации оформления товаров Woocommerce

WooCommerce Direct Checkout - это плагин, позволяющий сократить количество шагов в процессе оформления заказа Woocommerce. Вы можете упростить процесс оформления заказа, пропустив страницу корзины...