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

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

История версия (changelog) - https://hika.su/rasshireniya/radical-form/istoriya-versij-changelog

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


Требования

Плагин будет работать на любом шаблоне и ему не требуется библиотека jQuery. Плагин написан на чистом JavaScript.

Оглавление

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

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

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

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

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

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

С помощью традиционных тегов <form> и <input> (можно обойтись и без традиционного тега <form>).

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

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

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

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

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

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

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

Что обозначают 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(document.querySelector("#callback")).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".

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

Итак, добавим в окошко Javascript #0 такой скрипт:

var art = document.querySelector("#hikashop_product_code_main").textContent; here.insertAdjacentHTML('afterend', '<input name="artikul" value="'+art+'" type="hidden">');

Этот код добавит в поля формы еще одно поле с нашим артикулом товара.

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

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

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

Если нужно предотвратить отправку формы, можно использовать возвращение значения false при исполнении Javascript #0.

return false;

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

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

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

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

UIkit.modal.alert( String(here.dataset.rfText));

Теперь если в кнопку добавить такой параметр - 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);    ym(XXXXXXX, 'reachGoal', 'ZAKAZ');

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

Тема письма

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

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

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

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

"Заказ на сайте. Телефон: {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, но в него добавлен паттерн, который указывает, что правильным значением будет только числовое значение. Пользователь не сможет отправить форму с неверно заполненными полями.

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

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

Если какое-то поле не проходит валидацию, скрипт добавляет ему тот класс, который вы указали в настройках RadicalForm – он называется «CSS класс для невалидных полей». В нашем примере я указал там значение uk-form-danger. Именно этот класс будет добавлен к каждому невалидному полю. Основываясь на этом факте мы можем добавить необходимые правила CSS.

После каждого поля мы добавили тег <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>

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

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

На время отправки письма и загрузки файлов плагин переводит кнопки отправки в состояние 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.

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

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

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

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

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

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

$mainbody .= "<p>".JText::_($key) . ": <strong>" . $record . "</strong></p>";

Здесь $key – это ключ (имя вашего поля), а $record – это его значение. Этот код позволит произвести автоматическую замену языковых констант, которые вы переопределили в Joomla (чтобы вместо name выводилось "имя клиента").

Пример кода, который формирует $mainbody:

$mainbody="";
foreach ($source as $key => $record)
{
	if (is_array($record))
	{
			$record = implode(',', $record);
	}
	$mainbody .= "<p>".JText::_($key) . ": <strong>" . $record . "</strong></p>";
	$telegram.= JText::_($key) . ": <b>" . $record ."</b><br />";
}

Ссылка на соответствующий код в github, который формирует тело письмо вот https://github.com/Delo-Design/radicalform/blob/f6f691dc8d4a6ecf616ff34287caebf19f7ad8fd/radicalform.php#L460

Интеграция с сервисом 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'. После того как будет окончена работа плагина эти файлы будут удалены.

В своем скрипте не надо использовать переменные с именем $body!

Эта переменная используется для отправки email!

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

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

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

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

Расширение функциональности за счет создания своих плагинов

Следуя хорошей практике всех расширений для Joomla плагин RadicalForm дает возможность вам вмешаться в его работу и расширить недостающий функционал за счет создания своего плагина типа radicalform и перехвата события onBeforeSendRadicalForm.

Функция класса плагина, которая принимает вызов, выглядит примерно следующим образом:

public function onBeforeSendRadicalForm($clear, &$input, $params)
{
	$input['name']="test name";
}

Она получает следующие параметры:

$clear - это массив данных, полученный от формы и очищенный ото всех вспомогательных данных.

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

$params - это объект, содержащий все параметры плагина и вспомогательные данные, которые известны при отправке формы. Например здесь можно получить адрес папки, куда были загружены фотографии (их можно переместить в нужное вам место):

$params->get('uploaddir');

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

$params->get('rfLatestNumber');

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

Скачать тестовый плагин для RadicalForm

Интеграция с Bitrix24 CRM

Для интеграции с Bitrix24 CRM уже написан плагин Сергея Толкачева WT JoomShopping Bitrix24 PRO. Несмотря на то, что в названии упоминается JoomShopping, плагин умеет работать и с RadicalForm. Скачать и прочесть подробнее можно по ссылке: https://web-tolk.ru/dev/joomla-plugins/wt-joomshopping-bitrix24-pro.html

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

https://gist.github.com/progreccor/fae1b97b4af4fc83a7ed552f9db4bd8b

Интеграция с AmoCRM

Для интеграции с AmoCRM лучше всего использовать плагин Сергея Толкачева WT AmoCRM - RadicalForm. Для работы плагина необходима библиотека WT AmoCRM. Плагин и библиотека работают только с Joomla 4 / Joomla 5. Скачать и прочесть подробнее можно по ссылке: Для интеграции с AmoCRM лучше всего использовать плагин Сергея Толкачева WT AmoCRM - JoomShopping плагин отправки заказов в Amo CRM. Несмотря на то, что в названии указано про JoomShopping – плагин умеет работать и с RadicalForm. Скачать и прочесть подробнее можно по ссылке: https://web-tolk.ru/dev/joomla-plugins/wt-amocrm-radicalform

Если вы хотите использовать свой код для интеграции – можете использовать код интеграции, который расположен на gist от github.

https://gist.github.com/progreccor/59a8368da47b932df3c1a6b00a3ea093

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


На этом все.

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

Вы можете получить оперативный ответ в нашей группе телеграм https://t.me/projoomla

© Hika.su