• Главная
  • Расширения
  • Joomla Radical Form – профессиональная ajax форма обратной связи для Joomla. Бесплатно.

Joomla Radical Form – профессиональная ajax форма обратной связи для Joomla. Бесплатно.

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Скачать плагин можно по этой ссылке Скачать плагин Резервная ссылка скачивания

Плагин распространяется по принципу "As Is", "как есть". Поддержка оказывается индивидуально, на основе запросов. Возможна платная и бесплатная поддержка - все зависит от ситуации. Разумные предложения на форуме могут быть реализованы. Все согласуется с автором.


Оглавление

  1. Что умеет плагин?
  2. Зачем нам еще одна форма обратной связи для джумла?
  3. Собственно в чем основные проблемы существующих форм обратной связи?
  4. Что предлагаю я? Радикальное решение проблем с формами обратной связи.
  5. Как вывести форму обратной связи на экран?
  6. Что нужно настроить после установки плагина?
  7. Что обозначают Javascript #1, Javascript #2 и Javascript #3? Зачем они нужны?
  8. Всплывающие окна
  9. Javascript #0. Код, который вызывается перед отправкой формы
  10. Как изменить сообщение, которое появляется после отправки формы?
  11. Как задать индивидуальное сообщение, которое появляется после отправки для каждой формы?
    1. Давайте рассмотрим такой вариант подробнее.
    2. Как это сделать?
  12. Достижение целей в Яндекс Метрике
  13. Тема письма
  14. Индивидуальная тема письма для каждой формы
  15. Выбор адресата формы
  16. Имя поля "Ответить на"
  17. Обязательные поля и валидация HTML5 полей формы
  18. Тексты ошибок для неверно заполненных полей
  19. Поля со множественными значениями (checkbox и select multiple)
  20. Имена полей и перевод на нужный вам язык
  21. Сообщения "Подождите"
  22. Отправка фотографий и других разрешенных вложений
  23. Настройка телеграм
  24. Интеграция с мессенджером Dialog
  25. Переопределение шаблона писем
  26. Интеграция с сервисом Jivosite
  27. Свой кастомный php код

Что умеет плагин?

  1. Это бесплатный плагин, который таким и останется.
  2. Работает в любом месте сайта, нет никаких ограничений. (актуально для различных конструкторов сайтов, интернет магазинов и т.д.)
  3. Это аякс плагин.
  4. Прекрасно работает во всплывающих окнах. Есть возможность их закрывать после отправки формы.
  5. Можно удобно вставлять цели яндекс метрики в интерфейсе плагина.
  6. Количество форм обратной связи на странице не ограничено! (удобно для лендингов)
  7. Можно отправлять фото и другие файлы (контроль вложений есть).
  8. Полей для отправки вложений может быть несколько.
  9. Корректно работает с кешированием Joomla.
  10. Проверяется CSRF токен.
  11. Есть интеграция с мессенджером телеграм.
  12. Есть интеграция с мессенджером Диалог.
  13. Используется встроенная возможность джумлы делать многоязычные формы (для каждого языка свою)
  14. Есть история отправленных форм
  15. Есть функция выбора адресата для каждой формы
  16. Возможно использовать в качестве кнопки "Заказ в один клик" в интернет магазинах и других продающих страницах
  17. Реализована вставка любого поля формы или комбинации полей в тему письма
  18. Предусмотрена валидация HTML5 полей формы
  19. Есть возможность изменения поля Reply To
  20. Корректно работает с полями со множественными значениями (checkbox, select multiple)
  21. Есть возможность переопределения шаблона писем
  22. Есть интеграция с Jivosite
  23. Можно интегрировать свой php код с любой формой

Теперь давайте разберем работу с плагином подробнее.

Я ориентировался в первую очередь на работу с темами на основе UIKit (https://yootheme.com/ и подобными), но плагин легко использовать на любой теме, если с ней знакомы. Примеры я привожу на основе темы yootheme pro от команды yootheme (он основан на их же фреймворке UIKit 3).

Зачем нам еще одна форма обратной связи для джумла?

Вот честное слово - меньше всего мне хотелось писать еще одну форму обратной связи. Их не писал разве что ленивый. А уж для Joomla это своего рода индустрия - писать самые разные супер мощные формы обратной связи, которые постоянно ломают ваш дизайн и заставляют прикладывать невероятные усилия для того, чтобы она нормально вписалась в ваш сайт...

И чтобы все стоило больших денег...

Собственно в чем основные проблемы существующих форм обратной связи?

Им не хватает гибкости. Это такие огромные комбайны, которые призваны решать все мыслимые и немыслимые проблемы, возникающие с формами обратной связи. И мы ставим очередной такой комбайн, а потом начинаем его изучать. Зачем? У нас что - времени больше не на что потратить?

В конце концов оказывается - для того, чтобы решить конкретно свою проблему тебе приходится делать свое переопределение шаблона. Что? Ну то есть мы ставили весь этот огромный комбайн, разбирались с его неоднозначным интерфейсом просто для того, чтобы потом опять писать код? А нельзя как-то проще? Просто написать сразу свой код?

Или если взять простую форму обратной связи. Все они тащат с собой свои стили. Свои способы вывода. Зачем? Чтобы отправить форму обратной связи не надо ничего этого! Я вдруг понял однажды - нам не нужен вывод! В каждом шаблоне за нас уже оформили красиво все поля ввода, зачем тащить свои стили еще? Чтобы опять переопределять? Серьезно?

После продолжительного срока работа с сайтами я пришел к выводу, что чем меньше зависимостей, чем меньше установлено расширений - тем проще тебе жить в дальнейшем! Вы все еще ставите специальное расширение чтобы установить метрику на сайт? Ребята - ее код можно просто вставить в модуль HTML! Большого ума для этого не надо! Нажимаем клавиши Ctrl-C и Ctrl-V! Если вы не поняли о чем речь - можете дальше не читать - этот плагин не для вас!

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

  1. Форма во всплывающем окне. Это чаще всего применяется для таких задач как "заказать звонок" или "купить в один клик".
  2. Вставка в любое место сайта. Это вообще больное место всех форм обратной связи. Особенно в плане широкого распространения так называемых page builder или конструкторов сайтов.

Что предлагаю я? Радикальное решение проблем с формами обратной связи.

Я предлагаю вообще отказаться от этапа вывода формы обратной связи с помощью сторонних расширений. Зачем этот этап вообще нужен? Чтобы вывести CSRF токен? Не волнуйтесь, мой плагин его формирует с помощью ява скрипта (заодно это усложняет дело спамерам). Также формируются некоторые скрытые поля, которые добавляют информацию о посетителе (что тоже важно как тому кто получает оповещения об отправке, так и для контроля спама).

Как вывести форму обратной связи на экран?

С помощью традиционных тегов <form> и <input>.

Вы устанавливаете плагин RadicalForm и затем в любом месте свой страницы вставляете традиционные HTML теги формы обратной связи. Два условия:

  1. Форма должна находиться внутри тега <form> (что естественно и понятно, но все-таки я этот момент уточню).
    Никаких атрибутов action или еще каких-то назначить не надо (это все таки аякс форма).
  2. Для кнопки нужно назначить класс rf-button-send (естественно классов может быть несколько)
  3. Каждый тег input должен иметь атрибут name
    (на самом деле это общее правило для всех форм, но надо уточнить, так как является распространенной ошибкой)

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

<form>
<input class="uk-input required" name="phone" placeholder="Введите свой номер телефона..." type="text">
<button class="uk-button rf-button-send">Заказать звонок</button>
</form>

Примечание: не забудьте назначить атрибут name для тега input! Иначе ничего работать не будет!

Выглядит это так (можно нажимать):

Класс required предназначен для обозначения обязательных полей. Если это поле будет не заполнено - плагин ему назначит css класс, который предназначен для отображения неверно заполненных полей. Этот класс естественно можно менять в настройках плагина.

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

Надеюсь, идея плагина теперь должна быть вам ясна. Для новичков, которым незнакомы теги HTML эта форма скорее всего не подойдет (хотя я планирую выпустить в дальнейшем уже готовые формы обратной связи под разные шаблоны). Вам будет достаточно их просто скопировать. Для тех, у кого возникают проблемы с копированием - лучше не использовать эту форму.

Что нужно настроить после установки плагина?

Обязательно укажите email, куда должна отсылаться почта плагином. Укажите CSS классы для неверно заполненных полей в соответствии с вашим шаблоном. Если используется yootheme - можно оставить как есть. Класс uk-animation-shake помогает визуально выделить незаполненные поля. Настройте код Javascript #2 для того, чтобы определить что должен делать плагин после успешной отправки формы. По умолчанию стоит alert(rfMessage), но это не очень хорошо. Для шаблонов на основе UIKit хорошо подойдет UIkit.modal.alert(rfMessage);

Что обозначают Javascript #1, Javascript #2 и Javascript #3? Зачем они нужны?

В настройках плагина есть поля, обозначенные как Javascript #1, Javascript #2 и Javascript #3. По умолчанию после отправки формы вызывается код скрипта #2. При первоначальной установке плагина в коде Javascript #2 стоит просто alert(rfMessage). Этот код можно поменять на тот, который вам больше подходит. Для тем на основе yootheme pro можно прописать UIkit.modal.alert(rfMessage);

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

Зачем это нужно?

Всплывающие окна

Предположим, вам требуется закрыть то всплывающее окно, которое было открыто для вывода формы. Например, на сайте есть кнопка "Заказать обратный звонок". Ее нажали и было выведено модальное окно с формой обратной связи. Человек ее заполнил и нажал кнопку "заказать".

Нужно чтобы всплывающее окно было закрыто и затем выведено сообщение "Сообщение отослано".

Задаем код для Javascript #1

UIkit.modal(jQuery(here).closest(".uk-modal")).hide();

А в саму кнопку отправки формы добавляем такой параметр: data-rf-call="12" , который обозначает, что после отправки формы обратной связи нужно вызвать Javascript #1, а затем Javascript #2.

Итого, сама кнопка отправки заявки примет вот такой вид:

<button class="uk-button uk-button-primary rf-button-send" data-rf-call="12">Отправить заявку</button>

Так как внутри каждого окошка можно вставить сколько угодно команд Javascript, то по идее 3 окошек со скриптами должно хватать. Но если понадобится - пишите - расширим хоть до 9.

Javascript #0. Код, который вызывается перед отправкой формы

Эту форму обратной связи можно удобно использовать в любом интернет магазине в качестве кнопки "Купить в один клик". Для того чтобы форма могла передать название товара или его артикул, требуется выполнить дополнительный код, который исполняется перед отправкой формы. Его можно разместить в окошке с названием Javascript #0 и вызвать с помощью параметра data-rf-call="02".

Давайте рассмотрим небольшой пример, который заполняет скрытое поле title значением title текущей страницы (чаще всего там указывается название товара). Однако вы можете модифицировать код по своему усмотрению.

Итак, добавляем скрытое поле с именем title в нашу форму:

<input name="title" value="" type="hidden">

Теперь добавим в окошко Javascript #0 такой скрипт:

jQuery(here).closest("form").find("[name=title]").val(document.title);

Этот код заполнит скрытое поле с именем title значение title текущей страницы. Таким образом мы получим в нашей форме название текущего товара (или название текущей страницы).

Еще раз напомню - не забудьте указать параметр data-rf-call="02" в кнопке отправки:

  <button type="submit" class="rf-button-send uk-button" data-rf-call="02" >Send</button>

Аналогичным образом можно получить артикул товара (если он выведен на странице) или другие параметры.

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

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

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

Если нужно индивидуальное сообщение для каждой формы - используйте механизм индивидуальных ява-скриптов. При вызове Javascript #2 можно задать свое сообщение или дополнительную логику, которая будет выводить нужное вам сообщение. Можно для каждой формы выбрать свой ява скрипт с индивидуально заданным текстом. Или же можно генерировать сообщение на основе имени формы или страницы. Можно добавить скрытое поле и выводить сообщение из него. Одним словом - пространство для маневра и возможность задать нужные параметры ничем не ограничены!

Давайте рассмотрим такой вариант подробнее.

Предположим, что мы хотим для одной формы выводить сообщение "Мы вам перезвоним" вместо "Ваше сообщение отправлено".

Как это сделать?

Задаем Javascript #3:

UIkit.modal.alert("Мы вам перезвоним");

Затем для кнопки отправки задайте параметр data-rf-call="3"

В результате кнопка будет выглядеть так:

<button class="uk-button uk-button-primary rf-button-send" data-rf-call="3">Отправить заявку</button>

Ну вот и все. После отправки формы будет вызван яваскрипт #3, который и выведет указанное сообщение.

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

var temp=String(jQuery(here).data("rfText"));
UIkit.modal.alert(temp);

Теперь если в кнопку добавить такой параметр - data-rf-Text, то в нем можно указать индивидуальную тему для каждой формы:

<button class="uk-button uk-button-primary rf-button-send" 
data-rf-text="Мы вам перезвоним" data-rf-call="3">Отправить заявку</button>

Достижение целей в Яндекс Метрике

После вызова скрипта для вывода на экран сообщения об отправке, можно вставить код цели Яндекс Метрики.

Например так:

UIkit.modal.alert(rfMessage);    yaCounter111111.reachGoal('sendrequest');

Вместо 111111 поставьте номер своего счетчика Яндекс метрики.

Тема письма

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

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

Например, вы хотите, чтобы в теме письма присутствовал номер телефона заказчика.

Тогда тема письма должна выглядеть так:

"Заказ на сайте. Телефон: {phone}"

Здесь phone - это атрибут name одного из ваших полей ввода. Например такого:

<input name="phone"  type="text">

Можно вставить столько полей в тему письма сколько вам понадобится. Любая комбинация будет работать. Если поля в переданной форме не будет - то подмена не производится.

Индивидуальная тема письма для каждой формы

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

Код будет выглядеть примерно так:

<input name="rfSubject" value="Заказ часов" type="hidden">

Вместо "Заказ часов" - пропишите свою тему. В индивидуальной теме письма тоже можно подставлять свои поля - замена будет работать. То есть если вы хотите чтобы в вашей теме присутствовало одно из полей формы, то (например phone), то достаточно добавить {phone} в саму тему.

Помимо темы письма можно задавать и адресатов формы обратной связи.

Выбор адресата формы

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

Или скажем связь с отделом доставки и отделом продаж. Одним словом, часто на сайте (а то и на одной странице) может возникнуть ситуация, когда нужно разные формы отправлять по разным адресам.

Для того чтобы выбрать адреса предназначено скрыто поле rfTarget.

Например вот такое поле выберет адресата с идентификатором 3:

<input name="rfTarget" value="3" type="hidden">

Сами адресаты задаются в списке альтернативных адресов Email и chat ID телеграм.

Имя поля "Ответить на"

Это поле, которое позволяет очень сильно упростить общение с клиентом.

Давайте представим ситуацию, когда клиент заполнил форму и указал в ней свой email. Заполненную форму на ваш E-mail пришлет ваш сервер. Если попытаться ответить на это письмо - его получит ваш сервер. Этот факт не всегда сразу понятен администратору сайта, да и не очень удобен в работе. Значительно удобнее, если будет возможность просто ответить на это письмо и в качестве адресата уже будет выбран тот E-mail, который указал клиент, который заполнил форму.

Именно для этого и предназначена данная настройка.

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

Если вы в качестве поля для E-mail выбираете name="email", то можете ничего не менять в настройках - все уже сделано за вас.

Обязательные поля и валидация HTML5 полей формы

Плагин позволяет либо использовать встроенную валидацию полей HTML5, либо предоставляет возможность указывать поля, которые должны быть заполнены в обязательном порядке с помощью CSS класса. Эти поля должны иметь класс CSS required. Если эти поля не будут заполнены и пользователь попытается нажать кнопку "Отправить", то всем незаполненным полям будет назначен тот класс, который прописан в настройках плагина («CSS класс для невалидных полей»).

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

<input class="uk-input" name="skolko" placeholder="Сколько коробок?" pattern="\d+" required="" type="text">

В принципе, можете использовать любые шаблоны HTML5 - плагин проверяет только их валидность на основе того, что сообщает браузер. Слишком сильно увлекаться не стоит - помните о том, что не все новомодные поля корректно поддерживаются браузерами.

Если поле не проходит валидацию, форма отправлена не будет и те поля, которые не прошли валидацию, получат классы CSS, которые указаны в настройках плагина в поле «CSS класс для невалидных полей»

В качестве классов для таких полей может использоваться несколько классов одновременно, разделенных пробелом. Для тем на основе yootheme я советую использовать два класса - uk-form-danger и uk-animation-shake.

Если вы используете другой шаблон (не на основе UIKit), то вот определение класса, которое позволяет визуально выделить незаполненные или неверно заполненные поля.

@keyframes uk-shake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-9px); }
20% { transform: translateX(8px); }
30% { transform: translateX(-7px); }
40% { transform: translateX(6px); }
50% { transform: translateX(-5px); }
60% { transform: translateX(4px); }
70% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
90% { transform: translateX(-1px); }
}


textarea.uk-form-danger,
input.uk-form-danger {
border-color: red;
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both;
animation-name: uk-shake;
}

Тексты ошибок для неверно заполненных полей

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

На самом деле решение уже давно существует и находится в рамках использования классов CSS.

Давайте рассмотрим на конкретном примере - вот форма, которая используется для заказа нескольких ящиков продукции:

<form class="uk-form-stacked">
    <div class="uk-margin">
        <input class="uk-input " name="email" placeholder="Ваш Email..." required
                type="email">
        <div class="tm-error">Заполните правильно E-mail</div>
    </div>
    <div class="uk-margin">
        <input class="uk-input " name="skolko" placeholder="Сколько коробок нужно?"
               pattern="\d+" required="" type="text">
        <div class="tm-error">Укажите число ящиков</div>
    </div>
    <div class="uk-margin">
        <input class="uk-input" name="address" placeholder="Адрес доставки или самовывоз" type="text">
    </div>
    <div class="uk-margin-medium-top">
        <button class="uk-button uk-button-primary rf-button-send uk-width-1-1">Отправить заявку
        </button>
    </div>
    <input name="rfSubject" value="Заказ на сайте" type="hidden">
</form>

Вот как эта форма выглядит в работе:

Заполните правильно E-mail
Укажите число ящиков

Здесь присутствуют два обязательных поля (email и количество ящиков продукции), которые помечены атрибутом required (не путайте с именем CSS поля!).

Первое поле имеет тип E-mail. Все что не будет похоже на правильно заполненный e-mail не пройдет валидацию.

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

Для того чтобы пользователю было понятнее, что не так с его значениями - выводятся пояснения.

Как это было сделано?

После каждого поля мы добавили тег <div> с классом CSS tm-error. Затем мы добавили следующие классы в CSS файл нашего сайта:

.uk-form-danger + .tm-error {
    display: block;
}
.tm-error {
    position: absolute;
    font-size: 12px;
    color: darkred;
    display: none;
}

Эти правила позволяют скрыть сообщения в нормальном состоянии и показать их тогда, когда поле получит класс uk-form-danger, т.е. тогда, когда будет понятно, что поле не прошло валидацию.

Обратите внимание, что в HTML5 вводятся новые псевдоклассы для невалидных полей - :invalid и их можно использовать для оформления ввода. В нашей форме на этой странице использованы следующие классы:

input:invalid, input:invalid:focus {
    color: red;
    box-shadow: none;
}

Эти классы позволяют выделить красным неверно введенные значения. Причем цвет поменяется в тот момент, когда пройдет валидация.

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

Форму вывода сообщений об ошибках можно приукрасить так, как это только придет вам в голову. Мы использовали самый простой и доступный вариант.

Поля со множественными значениями (checkbox и select multiple)

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

Делается это обычно с помощью полей checkbox и особой формы select multiple.

Для корректной работы формы с такими значениями нужно следовать общепринятому стандарту PHP и дать одинаковое значение для всех полей checkbox добавив в конце [].

Например, так:

<form>
    <input type="text" name="name" class="required" placeholder="Имя">
    <input type="text" name="phone" placeholder="Телефон">

    <input type="checkbox" name="tf[]" value="любой">
    <input type="checkbox" name="tf[]" value="стандарт">
    <input type="checkbox" name="tf[]" value="vip1-пятница">
    <input type="checkbox" name="tf[]" value="vip1-пятница без оборудования">
    <input type="checkbox" name="tf[]" value="vip2 суббота">
</form>

Для поля select multiple такая форма выглядит так (выбор осуществляется при нажатой клавише Ctrl):

<form>
    <select name="tour[]" class="uk-select required"  multiple>
                <option value="">пусто</option>
                <option value="Алмазный фонд<">Алмазный фонд</option>
                <option value="Оружейная палата">Оружейная палата </option>
                <option value="Территория Кремля">Территория Кремля </option>
                <option value="Большой Кремлевский Дворец">Большой Кремлевский Дворец</option>
                <option value="Грановитая палата">Грановитая палата</option>
    </select>
</form>

Имена полей и перевод на нужный вам язык

В самом письме имена полей будут теми же самыми, которые были указаны в атрибуте name тега input. Конечно для конечного пользователя сайта это не очень хорошо. В плагине предусмотрена возможность переопределить имена, которые будут фигурировать в самом письме. Для этого достаточно воспользоваться стандартным механизмом Joomla для переопределения языковых констант.

Например, если у вас поле ввода выглядит так:

<input class="uk-input required" name="phone" placeholder="Введите свой номер телефона..." type="text">

То вам достаточно перейти в раздел "Языки -> переопределение констант" и создать новую константу PHONE.

Такой подход очень изящно позволяет решить вопрос с многоязычными формами, а также такой нюанс, когда поле на сайте называется скажем "Ваше имя", а в письме должно приходить "Имя клиента". Еще один маленький нюанс, который очень сложно решить с помощью традиционных форм связи.

Сообщения "Подождите"

На время отправки письма и загрузки файлов плагин переводит кнопки отправки в состояние disabled во избежание повторного нажатия клиентом в процессе отправки. Так же значения кнопок меняются на указанные сообщения в параметрах плагина. Обратите внимание на то, что в это поле можно вносить HTML теги. Это очень удобно, если вы хотите вставить какой-либо спиннер на время ожидания отправки сообщения.

Например для yootheme шаблонов или шаблонов на основе UIKit3 можно использовать такой код: <div uk-spinner></div> . Вы также можете вставлять какие-либо иконки или svg файлы.

Отправка фотографий и других разрешенных вложений

Для того чтобы создать поле для отправки разрешенных вложений можете воспользоваться стандартным полем с классом rf-upload-button :

<input class="rf-upload-button" name="fileupload" type="file">

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

<div class="uk-form-custom" uk-form-custom>
<button class="uk-button uk-button-primary rf-upload-button-text">ПРИЛОЖИТЬ ФОТО</button>
<input class="rf-upload-button" name="fileupload" type="file">
</div>

Прошу обратить внимание на два тега с указанными css классами: rf-upload-button и rf-upload-button-text

Тег с классом rf-upload-button-text предназначен для отображения надписи. Именно он приобретает статус disabled на время загрузки файла и у него будет изменена надпись на "подождите" или любую из указанных в настройках плагина, пока идет загрузка файла на сервер. Тег с классом rf-upload-button-text должен быть на одном уровне вложенности с тегом с классом rf-upload-button. Обычно это укладывается в способы отображения кастомизированного поля для загрузки файлов для различных шаблонов Джумла.

Так как с помощью одной кнопки можно загрузить несколько файлов, то нужно предусмотреть место, куда будет выводиться список загруженных и готовых к отправке файлов. Заведите в удобном для вас месте тег div с классом rf-filenames-list . В этом диве будут появляться имена загруженных файлов или ошибки, которые возникают при загрузке.

<div class="rf-filenames-list"></div>

Обратите внимание - этот тег должен находиться внутри формы! Иначе он не будет очищен!

Типичный сценарий по загрузке файлов выглядит так - посетитель выбирает нужный файл и происходит его загрузка на сервер. Имя загруженного файла появляется в списке. Затем он выбирает следующий файл и опять происходит загрузка на сервер. Имя следующего файла опять появляется в списке. Если достигается ограничение на вложения - будет показана ошибка. Если попытаются подсунуть какой-либо тип файла, который не разрешен - будет отображена ошибка.

Настройка телеграм

На вкладке "Интеграция с другими сервисами" вы можете подключить отправку сообщений нужным вам людям с помощью телеграм бота.

Для этого включите тумблер "включить телеграм" и создайте телеграм бота с помощью бота @BotFather (можно просто перейти по этой ссылке).

Введём команду /newbot

Придумываем обычное и техническое имя с хвостиком bot. Самое важное — не забываем скопировать полученный ключ-токен.

Полученный от него HTTP API токен скопируйте в окошко HTTP API token и нажмите кнопку сохранить !

Если вы не сохраните токен - дальше ничего работать не будет!

Затем пошлите вашему боту любое сообщение.

После того как вы это сделаете - нажмите кнопку "обновить chat_id" и ваш chat_id появится в списке.

Если все сделали правильно - в списке появится chat_id вашего диалога с ботом.

Сохраните эти настройки! Не забудьте!

Если у вас будут использоваться разные адресаты для разных форм - выберите для каждого адресата свой Target ID.

Интеграция с мессенджером Dialog

После блокировки телеграм у тех, кто создает сайты на территории России возникла проблема миграции на надежный мессенджер, который гарантированно не будет заблокирован.

Диалог - это хороший, надежный мессенджер, которому блокировка не грозит. Все разрешения у него уже получены. В тоже время есть клиенты под андроид, айфон, windows, linux и мак.

Скачать можно здесь: скачать

Для интеграции с формой обратной связи вам нужно получить ссылку интеграции.

Для этого установите мессенджер Диалог на свой компьютер, создайте группу (по умолчанию создается приватная) и в параметрах группы нажмите кнопку "Интеграция с сервисами".

Полученную ссылку нужно скопировать в поле настроек плагина "ссылка интеграции".

На этом настройка завершена. Если вам нужно слать оповещения нескольким людям - пригласите их в созданную группу.

Переопределение шаблона писем

Шаблон отправляемых писем тщательно тестировался на всех возможных клиентах и учитывает самые различные требования клиентов. Однако, следуя свободному духу Joomla, была добавлена возможность переопределения шаблона писем.

Для того чтобы это сделать вам нужно создать папку plg_system_radicalform в папке html вашего шаблона. Это стандартный способ переопределения представлений различных расширений Joomla.

Затем вам нужно будет скопировать файл default.php из папки /plugins/system/radicalform/tmpl в папку /templates/yootheme/html/plg_system_radicalform . Здесь yootheme надо поменять на имя папки вашего шаблона.

Этот файл вы можете модифицировать по своему усмотрению. Переменная $subject - это тема письма, $mainbody - основное тело письма и $footer - дополнительная информация о посетителе.

Интеграция с сервисом Jivosite

В принципе, для интеграции с сервисом особо ничего делать не надо – просто включить соответствующий переключатель на вкладке "интеграция с другими сервисами". Подразумевается, что к этому моменту код Jivosite уже установлен на сайте.

Следует обратить внимание на один момент – если вы хотите, чтобы информация о посетителе (такая как email, его имя и телефон) попали в сервис Jivosite - нужно назвать поля формы соответствующим образом.

То есть поле с именем должно иметь имя - name:

<input class="uk-input required" name="name" placeholder="Ваше имя..." type="text">

Поле с телефоном должно иметь имя - phone:

<input class="uk-input required" name="phone" placeholder="Ваш телефон..." type="text">

Поле с email должно иметь имя email:

<input class="uk-input required" name="email" placeholder="Ваш email..." type="text">

Свой кастомный php код

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

Может быть вам нужно будет добавить собственную интеграцию с каким-либо редким и экзотическим сервисом? Или нужно выполнить какие-то дополнительные действия при отправке формы?

Плагин предусматривает интеграцию с собственным php кодом.

Вам нужно создать свой php файл в папке /templates/yootheme/html/plg_system_radicalform . Здесь yootheme надо поменять на имя папки вашего шаблона.

Ваш файл должен начинаться со строк:

<?php
defined('_JEXEC') or die;

Далее идет ваш код, который будет вызван в момент отправки вашей формы.

Вашему коду будут доступны все переменные формы в массиве $source. Например, если вы хотите обратиться к полю форму с именем name, то обращение к нему будет выглядеть так:

if(isset($source['name']))
{
	$contact_name=$source['name'];
}

Желательно проверять наличие ваших переменных в массиве, как указано в коде выше, так как формирование переменных происходит на сайте с помощью javascript файла.

В массиве будут находиться все переменные, в том числе дополнительные, которые содержат информацию о посетителе:
reffer - страница, с которой посетитель пришел на ваш сайт (может быть не установлена)
pagetitle - заголовок страницы с формой
resolution - разрешение экрана вашего посетителя
url - адрес страницы с формой
uniq - число, которое используется для формирования временного адреса хранения загруженных посетителем файлов. Адрес будет таким: '/tmp/rf-uniq'. После того как будет окончена работа плагина эти файлы будут удалены.

После того, как файл будет создан, вам понадобится добавить его имя в интерфейсе плагина:

Если нужно, чтобы ваш код вызывался только на определенных формах, укажите targetID для вашего кода. В этом случае нужно будет создать скрытое поле с именем rfTarget:

<input name="rfTarget" value="3" type="hidden">

Если в форме не создано скрытое поле с именем rfTarget, то будут вызваны все кастомные файлы без заполненного поля targetID. И наоборот, если в форме создано скрытое поле с именем rfTarget — будут вызваны только файлы с указанным target.


На этом все.

Пишите на форуме ваше мнение и пожелания об изменениях плагина.

На форуме русской поддержки Joomla этот плагин обсуждается здесь - https://joomlaforum.ru/index.php/topic,345366.0.html

Авторизоваться