Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка

Лень — двигатель прогресса! Так что, когда задолбался писать на каждом проекте функционал обратного звонка (тыкаешь в кнопку и появляется форма во всплывающем окне) написал себе плагин Art Feedback Button для подобного. Простой и незамысловатый.

Плагин использует библиотеку Micromodal.js для модальных окон и VanillaMasker для телефонных масок. Написан на ванильном js c использованием REST API.

Как работает?

Плагин формирует шорткод [afb], который можно вывести в нужном месте темы. У шорткода есть дополнительные параметры:

  • label — надпись на кнопке
  • class — произвольный ccs класс
  • emails — список адресов через запятую, на который будет отправляться письмо, по умолчанию берется адрес из настроек сайта

Пример полного шорткода

[afb label="Обратный звонок" class="custom-button" emails="[email protected], [email protected], [email protected], [email protected]"]

Пример шорткода для темы Kadence

Тема Kadence использует для кнопок собственные классы, так что добавляя нужные css классы, можно изменять внешний вид кнопки

[afb label="Заказать звонок" class="button-size-small" emails="[email protected], [email protected], [email protected], [email protected]"]

Все остальное плагин делает сам, по нажатию на кнопку появляется форма, при заполнении формы происходит отправка письма по указанным адресам

Работа плагина Art Feedback Button

Часто задаваемые вопросы

Внимание!
Весь код необходимо добавлять в файл functions.php через дочернюю тему или например пустой плагин. Прежде чем, вносить какие либо изменения, сделайте бекап сайта.

В плагине есть основной фильтр полей afb_form_fields, через который можно манипулировать, как полями, так и свойствами полей

Как убрать ненужное поле?

Штатно выводиться 3 поля:

  • Имя (afb-name)
  • Емайл (afb-email)
  • Телефон (afb-phone)

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

add_filter( 'afb_form_fields', function ( $fields ) {

	unset( $fields['afb-email'] );

	return $fields;
} );

Как изменить маску телефона?

Замена маски телефона производиться через тот же фильтр, но только через поле телефона

add_filter( 'afb_form_fields', function ( $fields ) {

	$fields['afb-phone']['custom_attributes']['data-mask'] = '999-999-99';

	return $fields;
} );

Получим, что-то вроде такого

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 2 • Финты WordPress
Как изменить маску телефона в плагине Art Feedback Button

Внимание! В маске использование 9-ки — обязательно, так работает библиотека VanillaMasker. На другие цифры может не среагировать.

Например, изменим маску и плейсходел для Украины

add_filter( 'afb_form_fields', function ( $fields ) {

	$fields['afb-phone']['custom_attributes']['data-mask'] = '+38 (999) 999-99-99';
	$fields['afb-phone']['placeholder'] = '+38 (999) 999-99-99';

	return $fields;
} );

Получим вот такое

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 3 • Финты WordPress
Изменение маски и плейсхолдера под номер Украины

Как изменить шаблон письма, формы или окна?

Если сильно надо что-то поменять в верстке шаблона письма или модального окна, то можно это сделать подменой файлов, по аналогии как в WooCommerce.

В папке темы или дочерней темы создаете папку art-feedback-button и копируете в нее файлы из папки templates плагина. А дальше меняете что требуется и как требуется.

Как повесить цели метрики на отправку формы?

В плагине есть триггеры:

На открытие окна

jQuery( document ).on( 'afb_open', function( detail ) {
   console.log( 'afb_open', detail );
} );

На успешную отправку письма

jQuery( document ).on( 'afb_send_success', function( detail ) {
   console.log( 'afb_send_success', detail );
} );

На закрытие окна

jQuery( document ).on( 'afb_close', function( detail ) {
   console.log( 'afb_close', detail );
} );

Соответственно, отправки цели при отправке письма, будет такая

jQuery( document ).ready( function( $ ) {
	 jQuery( document ).on( 'afb_send_success', function( detail ) {

		 // XXXXXX - номер счетчика, TARGET - идентификатор цели
		 ym( XXXXXX, 'reachGoal', 'TARGET' );
	 } );
 } );

Скачать плагин Art Feedback Button

Плагина нет в репозитории WordPress и скорее всего не будет. Скачать архив плагина можно из релизов на GitHub или по кнопке ниже

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 4 • Финты WordPress

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

Заключение

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

5
2
голоса
Рейтинг статьи

Источник: wpruse.ru

Артем Абрамович

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

%d такие блоггеры, как: