Форма обратной связи joomla

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

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

---

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

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

Я ориентировался в первую очередь на работу с темами на основе 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>

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

Здесь присутствуют два обязательных поля (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">

---

На этом все.

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

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

www.hika.su

Вступление

Компонент «Контакты» мало освещаем в документации. Мало того, создается впечатление, что он нужен для вывода на сайт контактных данных владельца, администраторов, авторов сайта и т.д. На самом деле у компонента «Контакты» много задач. Как по мне, основное назначение компонента «Контакты», это создании формы обратной связи с клиентом, пользователем, покупателем. Сразу отмечу, что создать их можно несколько.

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

Этапы создания формы обратной связи Joomla

Контакты Joomla это компонент системы. Общие (глобальные) настройки контактов делаем на вкладке: Общие настройки>>>Контакты. Управление контактами находится на вкладке Компоненты>>>Контакты.

Чтобы создать и разместить форму обратной связи на сайте Joomla пройдем следующие этапы:

• Создадим категорию контактов;
• Создадим контакт;
• Создадим пункт меню типа «Контакт»;
• Посмотрим результат;
• Исправим, что не нравится.

Создать категорию контактов

Напомню, компонент контакты может иметь древовидную структуру материалов, по типу родительская категория – дочерняя подкатегория. При этом, при создании сами контакты могут помещаться, только в конкретную категорию, но потом могут копироваться или перемещаться в другие категории контактов. Делается это на кнопке «Пакетная обработка» в списке контактов.

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

На вкладке Контакты (верхнее меню)>>>Категории, жмем кнопку «Создать»;

В открывшейся вкладке создаем категорию с произвольным именем. Выберем имя категории по логике задачи. Для примера создам категорию для контактов «Отзыв», алиас «otzyv». Можно назвать её «Связаться», «Контакт» и т.п.

Я не понимаю, зачем контакты и формы контактов индексировать, поэтому на вкладке Публикация>> Мета-тег Robots, закрываю категорию от поисковиков, ставя параметры noindex, nofollow. Вы можете это не делать.

Создать контакт

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

Вкладка «Создать контакт»

Заполняем свои контактные данные. Все, которые хотим сообщить пользователям (клиентам). Например: адрес, телефон, факс, город и т.д. Эти контактные данные можно скрывать настройками в пункте меню.

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

Вкладка «Дополнительная информация»

Здесь пишем текст, который будет отображаться над или под (зависит от шаблона) формой контакты-обратная связь. Например, пишу «Здесь вы можете оставить отзыв о работе нашего сайта».

Вкладка «Настройка отображения»

Здесь нам нужно либо оставить глобальные настройки, которые стоят на вкладке Общие настройки>>Контакты, либо что-то изменить именно для этого контакта.

Важная настройка, для внешнего вида показываемого контакта, это параметр «Контактная информация». Он стоит на значении «По умолчанию». Раскроем его, установив значение «Показать». Для примера я заполню этот параметр так.

Вкладка «Настройка отображения контактов»

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

Обращу внимание, что на вкладке «Создать контакт» мы не привязали контакт к конкретному пользователю (администратору). 

Вкладка «Параметры публикации»

Я закрываю от индексации форму обратной связи и ставлю в параметре «Мета-тег Robots» параметр «noindex, nofollow».

Всё. Контакт с формой обратной связи создан, остается поместить его в меню сайта, чтобы показать на фронтэнд сайта.

Добавляем контакт в меню сайта

Для этого, идем в любое созданное меню и добавляем новый пункт меню.

• Выбираем тип пункта меню Контакт–Контакт.
• Из контактов выбираем созданный ранее контакт «Отзыв».
• Остальные поля заполняем по желанию, обязательно заполняем только заголовок.
• Рекомендую открывать отзывы в новой вкладке.
• Интересно: Используя параметр «Стиль шаблона» и установив заранее одностраничный или отличный от основного, шаблон, можно изменить форму обратной связи.
• На вкладке «Метаданные» закрываю контакт от поисковиков и ставлю «noindex, nofollow».
• Сохраняюсь и смотрю результат.

Результат и исправления

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

Как видим маловато информации о сайте и администраторе в элоке Контакты. Хотя мы их заполняли.

Возвращаемся в пункт меню «Отзыв». На вкладке «Параметры отображения контактов», ранее я оставил по умолчанию. Так как по умолчанию все параметры были скрыты, то в форме они не показались. Исправляю и ставлю в строке «Контактная информация» параметр  показать. Далее выставляю, что хочу показать в контактной информации. Сохраняюсь.

Чищу кэш и смотрю новую форму контактов.

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

Возвращаюсь в сам контакт. Данное описание контакта это «Дополнительная информация». Её показ включаем на вкладке «Настройки отображения»—«Дополнительная информация»—Показать. Аналогично включаем показ дополнительной информации в пункте меню.

Заодно, поменяю формат отображения формы обратной связи. По умолчанию стоит обычная форма, есть возможность сделать выпадающий список. Полезно если много полей. Для этого в пункте меню «Отзыв», на вкладке «Параметры отображения контактов», в параметре «Формат отображения», ставлю «Сворачивающиеся списки».

      

Смотрим результат. Форма связи с виде сворачивающихся списков.

Капча на форме обратной связи

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

Саму капчу нужно настроить в менеджере плагинов, плагин «CAPTCHA — reCAPTCHA». reCAPTCHA версия 2.0 на сайте Joomla статья как это сделать.

Проверьте включение капчи общих настройках «Контакты» вкладка «Форма». Там же, если открываете формы для поисковиков, на вкладке «Интеграция» включите новый параметр URL Routing, очищающий URL от цифровых меток (Experimental-Да). Об этом урок 26

Итоги

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

Полная форма обратной связи состоит из трех блоков:

• Контакт (кому будет отослан текст). Определяющая настройка в пункте меню;
• Форма обратной связи (кто и что хочет написать). Определяющая настройка формы в Общие настройки>>Контакты;
• Дополнительная информация (просто информация о связи). Включается в форму в настройке пункта меню, пишется информация при создании контакта в редакторе.

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

Примечание: Для этого сайта в форме обратной связи я убрал всё лишнее, и упростил её до простейшей.

Кстати, вот в каком виде приходит письмо от пользователя.

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

©Joomla-abc.ru

joomla-abc.ru

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

Форма обратной связи является тем связующим элементом сайта, благодаря которому пользователи и владелец веб-проекта могут поддерживать между собой связь. Именно в форме обратной связи указывается особенно важная информация (мобильный номер, e-mail), позволяющая пользователю отправить владельцу свои предложения и пожелания либо заказать товар.

Форма обратной связи Joomla представляет собой пустые поля, необходимые для ввода посетителем конкретных данных (его имя, адрес электронной почты, тема письма), после заполнения необходимо активировать отправку, нажав специальную кнопку «Отправить».

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

Какую информацию желательно оставить владельцу сайта?

— Мобильный номер (коммерческие веб-проекты, интернет-магазины).

— Адрес (коммерческие веб-проекты, интернет-магазины).

— График работы, способ доставки и возможные способы оплаты (коммерческие веб-проекты, интернет-магазины).

— E-mail, Skype и т.п. (блоги, сайты-визитки, одностраничники, коммерческие веб-проекты, интернет-магазины).

Joomla контакты

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

Далее нажимаем зеленую кнопку «Создать».

После этих действий перед вами откроется аналогичная приведенной внизу страница, только с незаполненными полями. «Редактировать контакт» — одна из трех вкладок, в которой нужно выполнить кое-какие настройки.

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

— Алиас – поле заполняющееся автоматически, т.е оставляем пустым.

— Связанный пользователь – это имя, которое будет отображаться при комментировании. Можно указать свой псевдоним или оставить имя присвоенное системой по умолчанию «Super Users».

— Изображение – предусматривается возможность выбора изображения, которое будет привязано к сему контакту.

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

— E-mail – отвечает за отображение электронного адреса контактного лица.

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

В правой области экрана (сайдбар) необходимо выбрать Состояние/Опубликовано, Категория/Uncategorised, Избранные/Нет.

«Дополнительная информация» — вкладка с текстовым редактором, в котором рекомендуется прописать краткое приветствие.

Можете использовать мое приветствие в качестве шаблона, подглядев его перейдя по ссылке.

 «Настройка отображения контента» — отвечает за отображение формы обратной связи.

— Показывать форму обратной связи – «Показать».

— Отправлять копию отправителю письма – в зависимости от вашего выбора позволяет скрыть или показать отправителю копию его же письма.

Создание пункта меню Joomla для вывода контактов и формы обратной связи

На следующем этапе следует отправиться во вкладку Меню/Main Menu/Создать пункт меню.

На открывшейся странице меню присваиваем заголовок. Так и пишем «Контакты».

— Тип пункта меню – нажимаем синюю кнопку «Выбрать», после чего на открывшейся странице выбираем Контакты/Контакт.

— Выбор контакта – здесь-то нам и нужно привязать до этого созданный контакт к пункту меню. Нажимаем «Выбрать» и кликаем по соответственному контакту.

— Ссылка – это поле заполнится автоматически после выбора контакта.

После внесения нужных корректировок нажимаем кнопку «Сохранить». В итоге у вас на сайте появится новая кнопка меню «Контакты», кликнув по которой пользователь может обнаружить форму обратной связи и легко связаться с вами.

На этом можно было бы и закончить, если бы не одно, но! Куча никому не нужных писем, которыми ваш почтовый адрес завалят спам боты.

stimylrosta.com.ua

Сущность и значение формы обратной связи для Joomla

Форма обратной связи представляет собой удобный инструмент для отправки сообщений администрации сайта.

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

Система управления контентом (CMS) Joomla 3 позволяет создать форму обратной связи, которая имеет следующие преимущества:

• Простую настройку;
• Красивый и удобный интерфейс;
• Возможность оперативной отправки сообщений;
• Наличие контактной формы на всех страницах сайта;
• Возможность обойтись без перезагрузки страницы;
• Защиту от спама.

Когда пользователь отправляет администрации письмо через данный компонент оно автоматически приходит на электронный ящик владельцев сайта.

По сути, весь процесс работы формы обратной связи можно представить в виде двух этапов:

1. Заполнение посетителем нужных полей;
2. Отправка сообщения.

Важно отметить, что подобная форма может состоять из произвольного количества полей различного назначения. При этом такие поля, как «E-mail», «Имя», «Тема» и «Сообщение» являются обязательными.

Процесс создания формы обратной связи в Joomla 3: пошаговая инструкция

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

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

Целесообразно детально рассмотреть каждый из этапов создания формы обратной связи на Joomla 3.

Шаг 1.

В админ-панели Joomla 3 следует открыть меню «Компоненты» и перейти на вкладку «Контакты»:

Шаг 2.

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

В частности, поля «Имя», «Категория» и «Связанный пользователь» являются обязательными для заполнения. Кроме того, можно указать следующие контактные данные: «Должность», «Почтовый ящик», «Город», «Сайт», «Телефон» и т.д.

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

Шаг 3.

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

Шаг 4.

На вкладке «Параметры публикации» представляется возможным указать дату начала и конца публикации, а также прописать мета-описания и мета-тег «разрешить/запретить» индексацию страницы:

Шаг 5.

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

Здесь же следует установить формат отображения формы обратной связи Joomla 3.

Следует подчеркнуть, что всего доступно три варианта отображения:

• «Сворачивающиеся списки» — на странице будут два или три пункта: контакт, форма обратной связи и дополнительная информация, расположенные вертикально;
• «Вкладки» — будут отображаться те же вкладки, только горизонтально;
• «Обычный» — на странице будут видны все указанные контактные данные.

Шаг 6.

На последней вкладке «Настройки отображения контактов» можно настроить блокируемые темы и почтовые ящики, а также активировать пункт «Отправить копию письма на почту отправителя»:

Шаг 7.

После того как указаны все необходимые данные, нужно сохранить контакт:

Шаг 8.

После сохранения необходимо сформировать пункт меню для созданного контакта. Для этого нужно перейти в раздел «Меню» и выбрать в нем «Главное меню», затем вкладку «Создать пункт меню»:

Шаг 9.

В появившемся окне нужно привязать отдельный пункт меню к главному или вертикальному меню, которое обычно располагается в левом или в правом блоке админ-панели Joomla 3:

Шаг 10.

В качестве типа пункта меню необходимо выбрать раздел «Контакты»:

Шаг 11.

После установки типа пункта меню, появится поле «Выбор контакта». В нем нужно выбрать созданный на предыдущих этапах контакт (в данном случае – Администратор).

Важно подчеркнуть, что вкладки «Параметры отображения контактов» и «Параметры почты», копируют настройки вкладок «Настройки отображения» и «Настройки отображения контактов» соответственно:

Шаг 12.

На вкладке «Параметры отображения ссылки» прописывается поле «Заголовок, как ссылка», которое является пользовательским описанием данного пункта меню. Впоследствии данное описание будет отображаться при наведении курсора на пункт меню.

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

Шаг 13.

После завершения описанных выше операций можно настроить параметры отображения страницы, а именно теги title и h1 данной страницы.

Эту вкладку также можно пропустить, в этом случае заголовок будет отображать название страницы, в данном случае – «Обратная связь»:

Шаг 14.

На вкладке «Метаданные» указываются мета теги Description и Keywords веб-страницы. По сути, эта вкладка повторяет настройки раздела «Параметры публикации», который открывается в окне создания контактов.

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

Таким образом, меню (в данном случае главное меню) пополнится еще одним пунктом – «Обратная связь», как показано на рисунке ниже:

Если все предыдущие шаги были выполнены верно, то на странице обратной связи появятся две или три вкладки (в зависимости от наличия данных заполненных на 3-ем шаге):

Таким образом, форма обратной связи для Joomla 3 создана. Её отображение может иметь вид сворачивающихся списков, что устанавливается по умолчанию, либо вид вкладок.

Кроме того, в образовавшемся компоненте все элементы могут быть открыты или частично скрыты, при выборе формата отображения «Обычный»:

Удачи Вам!