1. Подключение модуля к странице
Откроем форму обратной связи или заказ звонка в менеджере модулей и найдем настройки всплывающей формы. Переключатель «Каким элементом вызывать форму» поставим в положение «Без элемента».
Откроем вкладку «Привязка к пунктам меню» и выберем нужные страницы, например все.
Вернемся к основной вкладке и укажем любую позицию, используемую (это важно!) в шаблоне. Выбираем состояние «Опубликовано» и сохраняем настройки.
2. Присваивание класса элементу
Теперь нам осталось присвоить класс выбранному элементу. Откроем редактор материалов, далее кликнем на пиктограмму «<>», чтобы открыть исходный код страницы.
На скриншоте приведены примеры добавления класс разным элементам.
Для вызова формы обратной связи элементу присваивается класс: class= «contactus»
Для модуля обратной звонка: class= «joomly-callback».
Если вы подключили к странице несколько разных форм и вам нужно вызывать определенную, то укажите в классе ее айди, как это показано в примерах для кнопки и картинки на скриншоте выше. Для модуля с id 265, класс будет выглядеть следующим образом: class= «contactus-265″.
Узнать id модуля можно в менеджере модулей:
Модуль Wedal Joomla Callback – Всплывающая Форма Обратной Связи
Друзья, рад представить вам свою новую разработку – модуль, реализующий всплывающую и встраиваемую форму обратной связи на сайте.
Модуль распространяется бесплатно. Он прост в установке и настройке. Теперь вы можете получить отличную контактную форму на сайте всего в несколько кликов.
Wedal Joomla Callback воплощает многие идеи, которые были у меня в голове, но не могли быть сформулированы в коде. Читайте описание. Думаю, что вам понравится!
Зачем нужен еще один модуль обратной связи?
Думаю, что первый вопрос, который вы зададите: зачем нужен еще один модуль обратной связи? Ведь помимо стандартной формы обратной связи Joomla есть уже готовые решения.
Дело в том, что в процессе работы над разными клиентскими сайтами мне постоянно требовался простой и легкий модуль обратной связи, который бы работал через AJAX. Главной целью была простота кастомизации под требования заказчика.
Раньше я использовал свои готовые наработки контактных форм, но их постоянное развертывание и настройка отнимало много времени.
Wedal Joomla Callback я делал в первую очередь для себя, для удобства работы. Но решил, что будет здорово поделиться модулем с сообществом.
Особенности Wedal Joomla Callback
В чем особенность данного модуля?
1. Только модуль и ничего кроме модуля
Форма обратной связи реализована с помощью одного модуля. Нет никаких дополнительных компонентов, плагинов и др.
2. Модуль работает полностью на AJAX
Он не загружается вместе со страницей. Загружается только кнопка вызова формы с таким кодом:
Никакого утяжеления страницы скрытыми формами. В коде вызова вообще не фигурирует ссылка на форму или код формы, что не позволит увидеть форму большинству роботов, рассылающих спам.
При клике по кнопке форма подгружается в реальном времени.
После отправки формы страница не перезагружается.
В Joomla это похоже на магию. Кто в теме, тот поймет =)
3. На странице может быть неограниченное количество разных форм с разным оформлением и только один JS и один CSS файл
Вы можете создать несколько копий модуля на одной странице с разными настройками. И да, они будут работать. При этом все формы будет обрабатывать общий JS-файл, который загрузится в единственном экземпляре.
Почему это круто? Теперь вы можете добавить пару контактных форм в шапке сайта, несколько в тексте, и еще одну в подвале с помощью одного единственного модуля, размноженного в админке. Это практически не утяжелит страницу (см. пункт выше). Это не потребует кучи скриптов.
4. Каждая форма, кнопка, письмо могут иметь уникальную структуру и оформление
Wedal Joomla Callback поддерживает альтернативные макеты для:
Да, всего один модуль и неограниченное количество разных форм.
5. Защита от спама и CSRF-атак
Специальной защиты от спама не предусмотрено, но форму смогут увидеть только те роботы, которые умеют выполнять JS-код и додумаются кликнуть по пустой ссылке. Если вы и получите спам, то мало и редко, в основном ручной человеческий. Зато ваши пользователи не будут утруждать себя разгадыванием кода с картинки, чтобы связаться с вами.
Кроме того, в модуле внедрена проверка токена, которая не позволит совершать CSRF-атаки.
6. Простота
Еще одной особенностью я бы назвал простоту модуля. Он не позволяет создавать неограниченный набор уникальных полей, зато в макетах вы сразу видите каждое отдельное поле, и способны быстро влиять на его обработчик. Это позволит легко дополнить модуль необходимым уникальным функционалом и подстроить под задачу.
7. Всплывающая или встраеваемая в страницу форма ( v 1.1.1 )
В обновленной версии модуля 1.1.1 добавлена возможность показывать не только всплывающую форму, но и встраивать форму в страницу сайта. На одной странице может быть несколько всплывающих форм и несколько встроенных. И всё это будет работать!
8. Блок «Политика обработки персональных данных» ( v 1.1.2 )
В версии 1.1.2 добавлена возможность включать в форму обратной связи сообщение или чекбокс, подтверждающие согласие пользователя с политикой обработки персональных данных. Материал для ссылки на политику также можно выбрать в настройках модуля:
9. Маска ввода номера телефона, которую можно задать самостоятельно в настройках ( v 1.2.0 )
В версии 1.2.0 добавлена опционально подключаемая маска для ввода номера телефона в соответствующем поле. В настройках модуля вы можете задать маску самостоятельно.
Если на странице выводится несколько модулей, маски в каждом из них могут отличаться.
Настройки Wedal Joomla Callback
Все настройки Wedal Joomla Callback вы можете видеть на рисунке:
Они очень простые и не требуют дополнительных пояснений. При желании, вы можете вообще ничего не настраивать, а только установить и опубликовать модуль. После этого он уже будет работать.
Как я писал выше, вы можете создать несколько копий модуля в админке и задать для них разные настройки, а вывести на одной странице. Это тоже будет работать.
Несколько модулей на одной странице:
И конечно, вы можете вставить один или несколько модулей обратной связи в любую статью, и это тоже будет работать!
Распространение модуля Wedal Joomla Callback
Модуль всплывающей формы обратной связи Wedal Joomla Callback распространяется по лицензии GPL. Это означает, что вы можете бесплатно скачивать и использовать его на любых сайтах.
В модуле нет скрытых ссылок и прочих «радостей» пиратского софта. Код модуля полностью открыт, и вы можете сами посмотреть его.
Скачать Wedal Joomla Callback
Wedal Joomla Callback имеет свой репозиторий на Github и поддерживает обновления прямо оттуда.
Надеюсь, что данный модуль окажется полезным для вас и ваших проектов.
За отдельную плату у меня вы можете заказать любые доработки, улучшения и изменения данного модуля, обратившись через форму обратной связи.
Полезные кейсы по модулю
Список изменений
Внимание! В версии 1.1.4 исправлена ошибка, связанная с привязкой модуля только к некоторым пунктам меню. В это версии были частично изменены макеты вывода форм. Если вы использовали модуль верси 1.1.3 или ниже с переопределенными в шаблон макетами, пожалуйста, актуализируйте их, сравнив с оригинальными (список изменений можно посмотреть здесь).
Другие статьи серии
Добавить комментарий
Комментарии
Модуль, безусловно, прекрасен, но. согласно требованиям ФЗ-152 «О персональных данных» в форме обратной связи должен присутствовать, как минимум, чекбокс «Я ознакомился/ознакомилась с Политикой конфиденциальности», а как максимум, ещё следует добавить чекбокс «Я согласен/согласна на обработку моих персональных данных» и ссылка на «Пользовательское соглашение».
Да, вы правы. Я постараюсь внести это дополнение в ближайшее время. Обновление придет автоматически для уже установленных модулей через стандартную систему обновлений Joomla.
Вообще, у меня двоякое отношение к этому закону. Почему? Я думаю, эти надписи негативно будут влиять на конверсию форм. Это нам с вами понятно, что ничего особенно не меняется, только добавляется уведомление. А простые люди, уже и так ужасно уставшие от бесконечных звонков и СМС-спама, могут истолковать такую приписку совершенно иначе. Что-то вроде «Отправляя форму, вы даете согласие на то, что мы будем надоедать вам звонками и присылать смс-ки по ночам». Если человек представит толкование надписи примерно в таком виде, то, вероятно, он просто закроет форму и уйдет с сайта.
Юристы говорят, что даже если вы запрашиваете имя и адрес электронной почты, то это уже сбор персональных данных. И даже если они никуда не записываются, а просто приходят на email, то это ничего не меняет.
Я внесу возможность публикации предупреждения о сборе персональных данных отдельной опцией. А пока вы можете просто добавить ссылку в макет формы, предварительно переопределив его в шаблон Joomla.
Разработка форм обратной связи для магазинов на Joomla 3
Преамбула
В современном интернет-магазине должно быть немало форм обратной связи. Интернет-маркетологи стараются предупредить все возможные ситуации и порой создают формы обратной связи чуть ли ни на каждый потенциальный интент пользователя.
Оставив за скобками традиционные «заказать звонок», «подписаться на новости» привожу примеры форм интернет-магазина/каталога, которые мне доводилось встречать на практике при работе с Joomla 3:
…и т.д. и т.п. Чудный мир фантазий интернет-маркетолога (безусловно опирающийся на данные аналитики, мониторинг конкурентов и рынка в целом, профессиональное чутьё и опыт) предлагает самые разные варианты ответа на вопрос: «как достать клиента?»
Задача
Создать N-е количество форм обратной связи для интернет-магазина на базе Joomla. Формы должны быть красивыми и информативными, не вызывать неточного толкования у посетителя в том, что он делает. В форму выводим информацию о товаре и интент пользователя.
В форме должен меняться заголовок («Задать вопрос», «узнать цену» и т.д.), картинка товара, его цена, название и артикул.
К каким проблемам это приводит?
Мы постоянно слышим о том, что что-то можно сделать «легко и быстро», однако забываем о том, что для этого нужны знания и опыт. Везде.
Чаще всего один модуль имеет только одну настройку темы письма (ручками указываем «задать вопрос», «купить оптом»). В итоге получается, что мы на каждый интент пользователя создаем отдельный модуль. Сверяемся со списком форм выше и получаем 9 однотипных модулей только для каталога товаров. Значит мы получаем много мусора в коде страницы и все вытекающие отсюда минусы.
Форма обратной связи для Joomla своими руками
Ну, почти своими. Описываемый ниже подход подойдет для любых форм обратной связи. И отдельный акцент мы делаем на формах, в которых нужно указать информацию о товаре.
Замена модулей обратной связи на плагин-обработчик
Если кратко, то обычно каждое стороннее расширение тянет за собой js-скрипты, css, которые далеко не всегда вписываются в контекст сайта. В итоге всё равно приходится делать свой макет вывода. А если автор стороннего модуля решил сделать решения в духе No code (то есть максимум настроек внешнего вида в админке), то для разработчика работа с таким решением может превратиться в ад.
С Radical Form становится возможным следующий подход в работе:
вы делаете свой HTML формы (вообще любой!),
кнопке «отправить» назначается класс ‘rf-button-send’
код формы размещаете в модуле типа «HTML-код» везде, где это необходимо.
И оно работает. Именно это решение мы разовьём в тексте ниже. Так же рекомендую ознакомиться с документацией по Radical Form для лучшего понимания общей картины.
Несколько форм в одной
Чаще всего формы показываются в модальных (всплывающих) окнах. Я в основном работаю с сайтами в стеке Bootstrap, поэтому примеры HTML будут приведены для него. Однако, в контексте данной статьи не имеет значение CSS-фреймворк.
В data-атрибуты кнопки можно поместить самую разную информацию. В некоторых случаях я помещаю туда нужные для отображения поля формы (name, email, phone, comment), какие из них должны быть обязательными для заполнения и т.д. Например, получение обязательных полей из атрибута data-fields-required кнопки, имена которых указаны через запятую:
Подробно кейс создания множества форм в одной с примерами форм и кода был разобран здесь: Интеграция форм обратной связи и Битрикс 24 на сайте Joomla.
Таким образом мы размещаем в коде сайта только 1 модуль с HTML-кодом формы обратной связи и в любом нужном нам месте кнопки для вызова модального окна с нужными data-атрибутами. А создание новой формы сводится к копированию кода кнопки и указанию нужных data-атрибутов.
Получение информации о товаре для формы обратной связи
Для красивого модального окна нам нужно брать информацию о товаре: картинку, название товара, артикул, цену.
Первый путь, совсем неправильный
Второй путь, тоже неправильный
Приведу в качестве примера магазин на Virtuemart 3. Шаблоны дизайна для этого магазина делаются с помощью переопределений Joomla (хороший мануал по шаблонам Virtuemart 3 и список макетов). То есть файлы, где описана вёрстка, лежат в папке templates/ваш_шаблон/html/com_virtuemart/. В качестве подопытного кролика у нас будет список товаров в категории.
Передача данных из php в javascript в Joomla
Дело в том. что в Joomla есть простой и удобный способ передачи данных из php в javascript.
Данные передаются в виде json-объекта, доступ к которому с фронта получаем через функцию Joomla.getOptions(‘virtuemart_products_details ‘). Это стандартная функция Joomla, никаких дополнительных плагинов для этого устанавливать не нужно.
Для этого мы идём в файл templates/ваш_шаблон/html/com_virtuemart/category/default.php и циклом добавляем нужные нам данные о товарах Virtuemart в отдельный массив.
А затем получаем данные на фронте в js:
Для карточки товара аналогичные операции проводим с файлом templates/ваш_шаблон/html/com_virtuemart/productdetails/default.php
Почему этот путь тоже неправильный?
Плагин создаем в группе Jshoppingproducts, таким образом не будет попытки выполнить наш код при просмотре статьей, страниц с контактами, при переходах в админке и т.д. Он будет работать только там, где надо. Так же наш код, будучи самостоятельным плагином, не пострадает при обновлении Joomla, при обновлении компонента магазина.
Для карточки товара мы находим событие onAfterDisplayProduct, куда приходит объект с данными товара.
Для категории товаров используем событие onBeforeDisplayProductListView, куда приходит $view целиком и список товаров отдельно $productlist.
Результат работы плагина будет таким:
Готовый плагин для добавления данных товара в json-объект для JoomShopping можно скачать здесь. Добавлены параметры в настройку плагина:
Заключение
Цель данной статьи была поделиться своим опытом в работе с различными магазинами на Joomla. Возможно, он кому-то будет полезен. Возможно, кто-то предложит другие, альтернативные пути решения той же задачи. Предложения и улучшения приветствуются в комментариях.
1. Установка формы обратной связи
2. Настройка формы обратной связи
Вкладка модуль разбита на 3 блока. В первом блоке вы сможете задать почту для получения сообщений, заголовок сообщений, цветовое решение, определить отображаемые поля и обязательность их заполнения (в базовом и стандартных вариантах), а также задать способ выравнивания формы. В случае подключения капчи, вам будет предложено заполнить два поля с sitekey и secret key. Оба этих ключа вы можете получить абсолютно бесплатно на подсайте google после регистрации вашего сайта.
Во втором блоке находятся настройки всплывающей формы обратной связи, для случаев когда вам необходимо показывать форму в модальном окне. Здесь вы можете выбрать тип формы (обычная или всплывающая), задать заголовок формы, сообщение об отправке, текст на кнопке вызова. Также указать каким элементов вызывать форму. Вариант «Без элемента» предназначен для случая, когда форма вызывается каким-то вашим элементом (картинкой, ссылкой и тп), он описан в этой статье. «Кнопка» — вызов формы происходит по клику на обычную кнопку, «Прилипающая кнопка» — кнопка будет закреплена в нижней части экрана и будет отображаться всегда, в том числе при скроллинге.
В третьем блоке вы можете задать тексты для кнопок, заголовков, сообщений и тп.
На вкладке «Аналитика» вы можете задать цели для Google Analytics и Яндекс Метрики. Это позволит вам отслеживать отправки формы в вашей системе аналитики.
Вы можете создать свои элементы (поле, список, email, чекбокс, текст и тп), указывать обязательность их заполнения а также связи, на этом вопросе я остановлюсь чуть подробнее.Бывают случаи, когда какое-то поле должно отображаться в зависимости от содержимого другого поля или элемента. Для реализации этих ситуаций в конструкторе предусмотрен столбец под названием «Зависимое поле». В нем через двоеточие указывается порядковый номер «родительского» элемента и его значение, при котором искомый элемент должен отображаться. Если родительским элементом является чекбокс, то в нажатом состояние его значение равно единице, в ненажатом нулю. Для списка указывается номер выбранного варианта. Для текстового поля просто его значение.
Рассмотрим пример со скриншота выше, когда поле «Название модуля» у нас отображается только в том случае, если в списке с типом проблемы был выбран вариант «Технические проблемы». Для этого в инпуте «Зависимое поле» мы ввели порядковый номер «родительского» элемента (в нашем случае списка под номер #3, номер можно посмотреть в первом столбце) и через двоеточие номер варианта (в нашем случае #1 вариант) при котором поле будет отображаться.
На вклдаке SMS вы можете настроить sms-оповещения о полученных сообщениях. Чтобы воспользоваться этой функцией вам будет необходимо зарегистрироваться по адресу joomly.sms.ru и вставить свой номер телефона и API id, который вы найдете в профиле после регистрации в соответствующие поля настроек. Замечу что услуга отправки смс платная, на момент написания статьи пользователю предоставлялось 5 бесплатных смс в день, каждое следующее стоило 80 копеек. Все тарифы определяются поставщиком услуги — sms.ru.
3. Добавление формы обратной связи на страницы сайта
Если вы хотите добавить форму связи на какую-то определенную страницу, например страницу с контактами, откройте в редакторе этот материал и добавьте в нужное место следующую конструкцию: — это код загрузки модуля в Joomla.
Также можно привязать модуль к какой-нибудь позиции шаблона, чтобы он отображался на всех или определенных страницах. Для этого нужно будет вернуться на страницу настроек модуля, задать позицию и статус опубликовано: Плюс на вкладке «Привязка к пунктам меню» выбрать страницы для отображения.
Если вы хотите вызывать форму «Прилипающей кнопкой», задайте ей любую используемую позицию шаблона.
Если вы хотите вызывать форму по клику на пункт меню, прочитайте эту статью.
Если хотите вызывать по клику на свой элемент (картинку, ссылку и тп), прочитайте эту.
О том, как добавить несколько форм на сайт, читайте здесь.
Новости Joomla
Бесплатный шаблон для интернет-магазина на базе JoomShopping 4
Бесплатный шаблон для интернет-магазина на базе JoomShopping 4.18 с использованием CSS-фреймворка Bootstrap 4.6. Адаптивная верстка.
Вышел релиз Joomla 4.1 Alpha 2
Проект Joomla рад сообщить о выпуске Joomla! CMS 4.1 Alpha 2.
Вышли релизы Joomla 4.0.4 и Joomla 3.10.3
Доступны к загрузке Joomla 4.0.4 и Joomla 3.10.3. Это релизы с исправлениями ошибок и улучшениями для серий Joomla 4.0.x и 3.10.x.
Progreccor
Добрый день.
Хорошо бы в вашем мануале добавить несколько примеров разных форм, чтобы можно было просто скопировать, переименовать тексты и использовать.
Ибо, я думаю, не один я такой, кто мучает единственный пример:
И думает «блеаа, как сделать просто для текста?»
Progreccor
Появилась возможность использовать поле «ответить на» для удобного общения с клиентами.
Обновлено описание плагина https://hika.su/rasshireniya/radical-form
Добавлен пример формы с валидацией HTML5 полей и разбор ее работы.
Progreccor
В новой версии плагина 1.3.5 исправлена работа с новой версией Joomla! и другие ошибки.
* Исправлено отображение слишком длинных форм в истории
* Добавлена проверка на минимальную версию PHP
* Исправлена работа формы на версиях Joomla 3.8.7 и выше
* В случае обычного вызова яваскрипта #2 ему не передавался параметр here
* Исправлены ошибки в английском языковом файле
Progreccor
Это багфикс релиз.
Версия плагина 1.3.6
* Обнаружена досадная ошибка в файле английского языка, которая рушила дизайн админки. Пришлось выпустить эту версию.