Joomla форма обратной связи


Содержание материала:

Модуль отправки заявок LEGA FeedBack

Модуль Joomla для:

  • отправки заявок с сайта или лендинга
  • формы обратной связи

Особенности:

  • 6 настраиваемых полей
  • интеграция с Яндекс Метрикой и Google Analytics
  • изменение внешнего вида
  • соглашение с политикой
  • защита от спама

Типы полей:

  • Имя
  • Емейл
  • Телефон, с возможностью включения маски для заполнения номера
  • Произвольное поле
  • Сообщение
  • Вложение

Видео обзор модуля заявок

Инструкция к модулю

Настройки модуля разнесены на 5 вкладок.

Модуль (общие)

ID модуля — указывается ID для модуля. Если вы будете размещать несколько модулей на странице, то у каждого должны быть уникальный ID

Режим работы модуля — можно использовать два режима: форма и кнопка.
Форма — это обычный вывод формы, кнопка — вывод кнопки, при клике по которой открывается всплывающее окно с формой.

Отсылка оповещений — вариант отправки уведомлений: по емейл, по смс или всё вместе.

Получатель писем — емейл адрес получателя(-ей) уведомлений о новых заявках. Если получателей несколько, то их нужно разделять запятыми.

Тема письма — тема сообщения от модуля

Заголовок формы — основной заголовок формы, выводится в теге H3

Подзаголовок — подзаголовок, выводится в теге h4

Текст на кнопке — можно задать свой текст на кнопке «Отправить»

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

Сообщение после отправки — этот текст будет показан пользователю, когда он отправит форму

Редирект — можно настроить перенаправление пользователя после заполнения формы на какую либо страницу.

Временная ловушка — указывается минимальное время заполнения формы в секундах.
Все попытки заполнения формы менее чем за это время будут заблокированы. 4 секунды — оптимально. Быстрее может заполнить только спам бот)

Показывать политику — показывать ли галочку для соглашения с политикой/офертой.

Название документа — само название документа, с которым нужно согласиться: политика, договор и т.д.

Ссылка на политику — ссылка на документ, с которым соглашаются.

Поля формы

В каждом есть:

  • выбор включить/отключить
  • обязательно к заполнению
  • подсказка в поле

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

А для поля загрузка файла можно указать ограничение на загрузку файла.
Загружать можно любые файлы кроме php и js.

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

Переданный файл переименовывается и сохраняется в папке tmp, получить доступ к нему и запустить у злоумышленника не получится.
На всякий случай создайте в папке tmp пустой файл index.html

Внешний вид

Здесь настраивается внешний вид формы и полей.

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

Разное

№ счётчика метрики — если хотите отслеживать отправку заявок в Яндекс.Метрике, то укажите в этом поле номер вашего счётчика.
А в самой Я.Метрике создайте цель с типом «Событие» и укажите идентификатор LEGA_FORM

Отслеживать цели в GA — включает отслеживание отправки формы в Google Analytics, событие выглядит так: send, event, create_lid, submit

Использовать CSS — можно отключить стандартные CSS стили и использовать свои. Также это удобно при ускорении, когда все стили объединяются в одном месте.

Пользовательский CSS — здесь можно добавить свой CSS код для кастомизации модуля.

Отправка смс сообщений производится через сервис SMS.ru, там вы можете отправлять на свой номер до 5 сообщений бесплатно.

API ID — ваш api_id в сервисе sms.ru. Его можно получить после регистрации в сервисе.

Номер телефона в сервисе SMS.ru — это тот телефон, который вы указывали при регистрации в сервисе.

Размер смс сообщений — короткое и полное.

Короткое — подставляется только имя и телефон.
Полное — подставляются все данные из формы.

Рекомендую использовать короткое смс, чтобы не переплачивать.

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

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

simple2Form2: конструктор для создания форм для Joomla

simple2Form позволяет создавать любые формы заказа для сайта Joomla (например, «форма обратной связи», «форма контактов» и др.). Модуль работает благодаря технологии AJAX, что говорит о возможности отправки сообщений без необходимости перезагрузки страницы; он устроен таким образом, что даже если будет отключен JavaScript, то модуль будет продолжать исправно работать.

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

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

  • form – тэг самой формы заказа;
  • element – тэг элемента формы заказа;
  • option – тэг одного из вариантов тэга element.

Элемент «form» может быть как открывающим, так и закрывающим (например,

и

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

У всех элементов, за исключением «form», есть свой набор атрибутов. Конструктор доступен по ссылке: http://allforjoomla.ru/sf2-generator

Contactus: конструктор форм для Joomla 2.5 – 3.5

Contactus является русскоязычной формой обратной связи для сайтов, которые работают на Joomla 2.5-3.5.

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

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

Достоинства конструктора форм заказа для Joomla:

  • форма обратной связи была сделана таким образом, что она выглядит привлекательно на любом устройстве и в любом обозревателе;
  • большинство подобных форм содержат в себе скрытые ссылки, которые, как правило, негативно отражаются на продвижении вашего сайта (конструктор Contactus не имеет скрытых ссылок, поэтому проблем с формой не будет возникать никаких);
  • Контактус просто установить и настроить: от вас потребуется выбрать поля/формы для отображения и цветовое оформление.

Contactus доступен в двух комплектациях – базовая и полная. Собственно, базовая комплектация распространяется бесплатно, но позволяет только производить настройку полей формы, отправлять сообщения на почту, прописывать копирайт; полная версия стоит 290 рублей, но дополнительно предлагает защиту от спама, добавление файлов, выбор цветового оформления, создание нескольких форм заказа на одном сайте, создание всплывающей формы заказа.

Скачать форму бесплатно или приобрести ее можно на оф. сайте разработчика: http://joomly.ru/forma-obratnoj-svyazi

Perfect AJAX popup Contact Form: продвинутая форма обратной связи для Joomla

Можно пробовать создать свои формы, путем установки бесплатных плагинов и модулей, но получить то, что было необходимо, может и не выйти. Если функционала бесплатных вариантов вам недостаточно, то обратите взор на платный модуль Perfect AJAX Popup Contact Form. Приобрести плагин можно по URL: http://www.perfect-web.co/joomla/ajax-contact-form-popup-module (там же можно просмотреть демо).

Если необходимо поставить модуль на один сайт, то он обойдется всего в 9.99 евро + 30 дней на скачивание и техподдержку; если необходимо убрать обновления, то заплатив 29.99 евро вы получите возможность ставить модуль на неограниченное количество сайтов + 1 год технической поддержки и установку обновлений.

Достоинства Perfect AJAX Popup Contact Form:

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

Модуль Ajax формы обратной связи для Joomla 2.5 и Joomla 3

Модуль blogajaxforma позволяет выводить на сайте форму обратной связи, которая может работать в двух режимах — через PHP для тех, у кого вообще ничего не работает и через Ajax без перезагрузки страницы.

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

Особенности модуля:
1. В модуле есть вывод 4-х полей (Ваше имя, Номер телефона, Ваш email, Текст сообщения). Каждое из полей можно переименовывать под ваши задачи, отключать/включать их показ в форме, а также делать обязательными для заполнения.
2. Возможность отправки по технологии Ajax без перезагрузки страницы.
3. Возможность менять стиль формы как угодно.

Установка модуля
1. Скачайте модуль blogajaxforma для Joomla 2.5 — 3 и установите его как обычно через менеджер расширений.
2. Перейдя в раздел «Менеджер модулей» откройте «Ajax форма обратной связи blogprogram.ru». Состояние -> «Опубликовано» и где показывать — «На всех страницах»

Скриншоты

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

Чтобы включить Ajax отправку в настройках «Использовать Ajax» выберите «Да». Теперь если напишет (при проверке формы), что «Сообщение успешно отправлено» значит Ajax работает. Если не работает — выберите «Подключ. JQuery биб-ку» -> «Да». Если снова не заработает, значит у вас конфликт JS скриптов. Вам будет необходимо откатить настройки до обычной отправки писем через php, либо отключать скрипты, плагины, которые блокируют Ajax. ps На моих сайтах все работало, когда я тестировал форму в обоих режимах.

В поле «Стиль формы» вы можете поменять .yourajaxformaer1 на .yourajaxformaer1 чтобы форма была на всю ширину.

ps

Для joomla 2.5 также может подойти еще один модуль обратной связи.

Форма обратной связи для Joomla своими руками

Сегодня речь пойдёт не столько о создании стандартной формы обратной связи установленной в самой Joomla, сколько о разработке целого модуля и его возможностях, которые он может предложить вашему сайту. Стандартную форму можно привязать к пункту меню (к примеру, «КОНТАКТЫ») и тем самым выделить для неё целую страницу. Однако при использовании стандартных средств не всегда можно получить желаемое. У нас всех свои собственные проекты в сети, каждый из них отличается друг от друга и количество полей для заполнения, которые предлагает движок, могут нас не устраивать. Я уже молчу о том, что визуальный стиль нужно подгонять к фирменным цветам, да и сама форма желательно должна быть компактной. А что если нам не нужны некоторые поля и мы хотим их заменить на что-то другое? Вывод тут один, необходимо создать собственную форму для обратной связи своими руками. Этот модуль будет интересен абсолютно всем, особенно онлайн магазинам, в качестве: обычной формы для связи, подписки, рассылки, подтверждения заказа при покупке товара и т.д. В общем, возможностей много и для начала определимся: я использую Joomla 3.x, стандартный шаблон protostar, кодировка моего хостинга utf-8. Модуль запросто запускается на Joomla с версией 3 и выше, а про кодировку поговорим, когда будем писать код. Наша форма обратной связи будет иметь три поля «Ваше имя», «Ваш телефон», «Сообщение», а так же кнопку для отправки. Ещё добавим два сообщения, одно из которых будет гласить о положительном результате отправки письма, а второе в качестве заголовка. Вот как выглядит этот модуль, размещённый в боковой панели сайта:

1. Создаём файлы и папки

Для начала необходимо разобраться со структурой папок и файлов. На рабочем столе создаём папку mod_feedback_form (все приставки mod ниже по тексту обязательны), внутри расположим ещё одну с названием tmpl. В первой папке должно лежать то, что отвечает за установку модуля, его настройку и работу. В tmpl кладут шаблоны для визуального отображения на сайте или подключаемые файл. Ещё многие добавляют пустые index.html в качестве заглушки, чтобы любопытные пользователи не могли иметь прямой доступ к файлам в этих папках. Вы можете их создать, если хотите, но лично я не вижу необходимости, так как название вашего модуля вы создаёте сами. Какова вероятность того, что злоумышленники узнают название? К тому же в файлах такого рода принято писать первую строчку для ограничения доступа. Даже если человек напрямую сошлётся на конкретный файл, движок выдаст «Restricted access» (Ограниченный доступ).

И так, в папке mod_feedback_form при помощи любого редактора создаём mod_feedback_form.xml и mod_feedback_form.php:

В tmpl кладём default.php и success.php:

Теперь о каждом по отдельности.

1.1 Файл mod_feedback_form.xml

Это установочный файл и содержит подробную информацию о владельце модуля, его описание и т.д. Для нас в данном случае имеет значение, что тут располагаются настройки. Вставьте в mod_feedback_form.xml следующий код:

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

1.2 Файл mod_feedback_form.php

На данный момент mod_feedback_form.php является файлом обработчиком для формы. Это означает, что в нём находятся те функции, благодаря которым мы и будем принимать сообщение от пользователя, а потом отправлять на электронный ящик. Открыв mod_feedback_form.php, вставляем это:

Всё подписал в самом коде, но для тех, кто не понимает, объясняю. Всё что между if и else как раз и формирует сообщение для отправки на почту. После того как письмо выслано на электронный ящик, вместо полей формы выводится содержимое из success.php (в нем сообщение об успешной отправки). Это происходит, если нажали кнопку «Отправить», в противном случае покажет стандартную форму из файла default.php. Очень важный момент, у меня на хостинге установлена кодировка utf-8, поэтому я поставил на 18 строчке именно её. У кого-то возможно надо будет заменить на windows-1251. Если будет стоять не та кодировка, то на почту будут приходить непонятные символы.

1.3 Шаблон default.php в папке tmpl

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

Тут всё просто, три строчки для заполнения, заголовок и кнопка отправки. Для кнопки взял стандартные стили из Joomla, но вы вполне можете делать в этом файле всё что хотите.

1.4 success.php в папке tmpl

В success.php будет небольшой код:

Этот файл отвечает за вывод сообщения при успешной отправке письма на почту. Но я не стал писать слова прямо в нём, а добавил функцию echo с параметром feedback_success_message. Таким образом, тут покажет всё, что мы напишем в настройках модуля.


2. Устанавливаем в Joomla

Далее нам необходимо установить модуль на сайте. Берём папку mod_feedback_form со всеми файлами внутри и бросаем в директорию на сервере …/modules.

Открываем панель управления, следом «Расширения – Менеджер расширений — Поиск». В списке мы увидим наш модуль (название Feedback Form), выбираем его и нажимает установить.

Далее открываем менеджер модулей и нажимаем создать. В самом верху выбираем тип модуля:

3. Настраиваем форму обратной связи

Пишем заголовок, выбираем позицию (у меня правая боковая панель) и переходим во вкладку «Настройки».

Собственно те, что помечены звёздочкой, обязательны для заполнения.

E-mail – тут необходимо вставить электронный ящик, на который впоследствии будут отправляться все письма из формы. Можете выбирать любой, не обязательно писать тот же, что и при установке Joomla.

Заголовок в форме – небольшое текстовое сообщение перед полями. Оно не обязательно, скорее мотивирует или даёт подсказку, зачем нужна данная форма.

Заголовок письма – этот текст будет заголовком для письма приходящего на ящик.

Удачная отправка – данное сообщение выводиться после успешной отправки. Этот параметр прописан в файле success.php.

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

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

Вот как выглядит написанное сообщение и то, что приходит на mail:

Заключение

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

aiContactSafe — формы обратной связи

Одной из распространенных задач для веб-мастера, является создание почтовых форм или форм обратной связи для оправки писем (сообщений) с сайта. В Joomla это можно реализовать несколькими способами, в том числе и стандартно, с помощью компонента «Контакты». Но в этой статье я расскажу о том, как можно создать формы для отправки сообщений, формы обратной связи и о том, как их вставить в любое место сайта с помощью стороннего компонента. Этот компонент называется aiContactSafe. Он абсолютно бесплатен, но вы можете помочь развитию такого полезного проекта, пожертвовав небольшую сумму. Скачать его можно через JED или с сайта разработчика, предварительно зарегистрировавшись. Или можно скачать с сайта Aitishnik.Ru. На момент написания статьи актуальной была стабильная версия aiContactSafe 2.0.21с, совместимая как с Joomla 1.5, так и с Joomla 2.5.

Топ-пост этого месяца:  Урок 2. Типы данных в MySQL

В состав компонента форм обратной связи aiContactSafe входят:

  1. Модуль Mod_aiContactSafe, который выводит форму обратной связи в любой позиции шаблона сайта.
  2. Плагин Plg_aiContactSafeForm, который нужен для размещения формы обратной связи прямо в статье.
  3. Плагин Plg_aiContactSafeLink, нужный для размещения ссылки на форму обратной связи в статье.

Компонент aiContactSafe обладает следующими возможностями:

  • Имеет свой встроенный защитный код (CAPTCHA). Встроенная CAPTCHA может задавать кодовые слова для различных языков, выводить вместо слов случайный набор символов заданной длины. Защитный код легко интегрируется в дизайн сайта благодаря настройкам цвета символов и цвета фона.
  • Поддержка профилей. С помощью профилей, на сайте можно создать различные виды форм, с различным набором пользовательских полей. Например, в одном профиле можно настроить форму обратной связи для отправки резюме, а в другом профиле форму заявки на подбор персонала, а в третьем профиле настроить форму для отправки сообщения администратору сайта и т. д.
  • Неограниченное количество пользовательских полей различного типа: текстовое поле, флажок, переключатель, список, выпадающий список, разделитель, вложение файла, контакт Joomla, адрес электронной почты, скрытое поле, многострочное текстовое поле.
  • Добавление префиксов (заголовков) и суффиксов полей.
  • Перенаправление на указанную страницу в случае успешной отправки сообщения (письма).
  • Добавление любого количества вложений, работающих как с AJAX, так и без него.
  • Поддержка SEF. Можно использовать как родной SEF Joomla, так и ARTIO JoomSEF или sh404SEF.
  • Поддержка многоязычности.
  • Языковые файлы для более чем двадцати языков.
  • Указание дополнительной (контактной) информации с помощью редактора WYSIWYG.
  • Подробные инструкции по настройке и администрированию (на английском).
  • Блокировка пользователя по IP адресу.
  • Блокировка сообщений по определенным словам (стоп-словам).
  • Автоматическая блокировка IP адресов, которая срабатывает через заданное время, если посетитель сайта с определенного IP адреса отправляет сообщения содержащие стоп-слова.

Итак, скачиваем компонент и производим стандартную установку, используя «Менеджер расширений». После успешной установки переходим в меню «Компоненты» и выбираем пункт «Форма обратной связи». По умолчанию компонент будет открыт на вкладке «Сообщения». Сообщений у нас пока нет, поэтому займёмся настройкой. Перейдем на вкладку «Статусы сообщения» и переименуем их. У компонента есть небольшие проблемы с локализацией, поэтому для удобства приходится их исправлять вручную.

Кликаем по названию статуса и переименовываем: New в Новое, Read в Прочитанное, Replied в Отправленное, Archived в Архивное.
Переходим на вкладку «Панель управления». Здесь находятся общие настройки компонента. Большую часть настроек можно оставить со значениями по умолчанию. Стоит обратить внимание на блок антиспам-настроек.

Сейчас мы не будем настраивать этот блок – каждый настраивает его сам, согласно своим потребностям. Рассмотрим в вкратце эти настройки.
Активировать контроль SPAM’а. Включает/выключает контроль спама по стоп-словам. Если в сообщении будут найдены стоп-слова, то оно не будет отправлено. Работает в паре со следующей опцией.
Блокировать письма содержащие. В это поле вписываются стоп-слова, через «;».
Записывать заблокированные сообщения. Включает запись сообщения, помеченного как СПАМ в БД. Оставляем включенным – для контроля.
Активировать запрет по IP адресу. Если активировать эту опцию, то посетители с отмеченных, ниже IP адресов не смогут получить доступ к форме обратной связи (контактной форме).
IP адреса для блокирования. Это поле содержит список блокируемых ip адресов. Посетители, пришедшие на сайт с одного из указанных адресов, не смогут получить доступ к контактной форме. Для блокировки больших сегментов сети можно использовать символы подстановки, например «*». Если записать так: 123.*.*.*, то будут запрещены все IP адреса, начинающиеся с 123.
Перенаправлять заблокированные IP адреса на. В это поле можно ввести адрес страницы, на которую будет перенаправлен посетитель сайта, если он пришёл с заблокированного IP адреса. Если ничего не указать, то перенаправление будет выполнено на главную страницу сайта.
Запрещать IP-адреса, которые отправляют сообщения с заблокированными словами. Включает/выключает автоматическую блокировку IP адресов посетители, с которых отправляют сообщения со стоп-словами. Блокировка будет срабатывать, если будут выполнены условия двух, нижеследующих опций.
Максимальное количество заблокированных сообщений перед запретом IP. Предельное количество сообщений со стоп-словами, после которого IP адрес будет заблокирован.
Минуты для подсчёта заблокированных сообщений. Период времени, в который осуществляется подсчёт сообщений со стоп-словами.
Отправлять email с сообщением о запрете IP. Адрес электронной почты, на который отправляется сообщение о срабатывании автоматической блокировки IP адреса.
Кроме блока антиспам-настроек следует обратить внимание на настройки, которые находятся в нижней части окна.

Следующие четыре опции относятся к настройке вложений, отправляемых с письмом.
Максимальный размер вложения (в байтах). Если в форме обратной связи будет поле для вложения файла, то полезно ограничить его максимальный размер. По умолчанию 5 Мб.
Разрешённые типы вложений. В этом поле через запятую можно указать разрешенные типы вложений.
Присоединить к сообщению. Определяет отправку вложения. Можно присоединить вложение к сообщению, а можно с сообщением отправить ссылку на файл, который при отправке будет сохранён на сервере.
Удалить файлы после отправки сообщения. Если вложение отправляется прикреплённым к сообщению, то файл вложения можно удалять с сервера. Например, для экономии дискового пространства.
Проверить языковые файлы. Нажатие этой кнопки запускает процедуру проверки языковых файлов для соответствующего языка.
Следующие три опции доступны, если установлены соответствующие им компоненты: ARTIO JoomSEF, Joom!Fish и FaLang. Если на сайте установлены данные компоненты, то имеет смысл включить их интеграцию с aiContactSafe.
За этими настройками следуют три кнопки включения вышеописанных составляющих компонента. По умолчанию они выключены. Кнопки сопровождает устрашающее предупреждение. Нам с вами нужно знать, как это работает, поэтому включаем все три.
Далее следует настройка прав доступа к компоненту. Здесь можно установить группу пользователей сайта, которая может читать сообщения с лицевой части сайта. По умолчанию «Супер-пользователи». Так и оставим.
Название кнопки «Удалить таблицы из базы данных» говорит само за себя. Она может понадобиться в исключительных случаях, когда нужно полностью удалить или полностью переустановить компонент. Нажатие на эту кнопку удалит в базе данных сайта все таблицы, созданные компонентом aiContactSafe. Без резервной копии их восстановить не удастся!
Следующую часть настроек рассмотрим на простом практическом примере. Допустим, что на сайте кадрового агентства нужно разместить две формы обратной связи: первая – общая, для контактов по общим вопросам, а вторая – для отправки резюме. Для первой формы будет создана страница и пункт меню «Контакты», а вторая форма будет размещаться на страницах с вакансиями. В первой форме обратной связи нам нужна следующая информация: имя отправителя, адрес электронной почты, тема сообщения, текст сообщения и возможность отправки копии сообщения отправителю. Во второй контактной форме нам понадобятся следующие поля: имя отправителя, адрес электронной почты, название вакансии и возможность прикрепления файла с резюме.
В компоненте aiContactSafe переходим на вкладку «Поля».

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

Название . Это внутренняя переменная компонента. Всегда пишется латинскими буквами без пробелов. Оставляем как есть.

Field label (метка поля) . Это заголовок в поля в форме обратной связи. Меняем на Отправитель.

Label parameters (параметры метки) . Здесь можно задать дополнительные стили, как если бы мы задали стили в тегах style >. Только кавычки должны быть одинарными. Например, мы хотим, чтобы при наведении указателя мыши всплывала подсказка. Тогда в этом поле можно написать: title=’Ваше имя, например Сергеев Николай Николаевич’.

Field label in message ( метка поля в письме ) . Это заголовок в письме получателя. Мы ведь получим письмо! Меняем на Отправитель.

Label in message parameters (параметры метки поля в письме) . То же, что и Label parameters, только для письма.

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

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

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

Field values (значения поля) . Так же недоступен для текстовых полей. Нужен для полей списков, выпадающих списков, групп флажков и переключателей.

Лимит поля . Параметр, ограничивающий количество символов в текстовом поле. Больше символов, чем указано в этом параметре ввести нельзя. Ограничим это поле 60 (шестьюдесятью) символами.

Field parameters (параметры поля) . Такая же настройка, что и для метки поля. Но относящееся уже к самому полю ввода. По умолчанию уже содержит значение. Добавим к нему свои пять копеек, чтобы получилось . Пусть тоже будет всплывающая подсказка.

Автозаполнение . В нашем случае Нет.

Значение по умолчанию . Можно сразу задать значение поля по умолчанию, но нам это не надо.

Префикс поля . Информация, которая будет добавлена прямо перед полем ввода.

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

Field required (необходимое поле) . Поле, обязательное для заполнения.

Включать в тело письма . Отображать ли значение поля в письме получателя.

Опубликовано . Включено поле или выключено.

Сохраняем настройки. Теперь вы можете самостоятельно поправить текстовые поля « Phone » и « Subject ». Присвойте метки Телефон и Тема соответственно.

Поле « Email », практически ничем не отличается от текстового поля. Различие состоит в том, что для этого типа полей предусмотрена проверка на ввод корректного адреса электронной почты. Поправим только метки поля – пусть будут Эл. почта.

Для поля « Message » зададим значение для меток Сообщение. Можем установить лимит в 1000 символов (на своё усмотрение). Тип этого поля – «Расширенное текстовое поле», а значит и настройки идентичны.

В настройках поля « Send a copy of this message to yourself » так же поменяем метки на Отправить копию сообщения себе. Это поле представляет собой флажок (галочку). Если опция установлена, отправитель получит копию своего сообщения на адрес электронной почты, который он указал выше.

Всё, существующие поля поправили! Теперь создадим два нужных нам поля: текстовое поле «Вакансия» и поле для прикрепления файла резюме к сообщению. Для этого всё в той же вкладке «Поле» кликаем на кнопке «Добавить». В открывшемся окне задаём значение поля Название: aics_vacancy. По умолчанию тип создаваемого поля «Текстовая строка» — это то, что нам нужно для создания поля «Вакансия». С текстовыми полями вы уже умеете работать, так что настроите сами. На всякий случай ниже привожу скрин своих настроек.

Теперь создадим поле для прикрепления файла к сообщению. Нет ничего проще! Нажимаем кнопку «Добавить», название поля — aics_file, метка поля — Прикрепить файл с резюме до 5 Мб(zip,rar,doc), метка поля в письме — Прикрепить файл, тип поля – Файл.
Теперь, когда есть все необходимые поля можно настроить профили. В компоненте aiContactSafe переходим на вкладку «Профайлы». Профайлы или профили – это наборы настроек для определённой формы обратной связи. Мы видим, что здесь о нас тоже позаботились и сделали два профиля. Кликаем на названии первого профиля (его ID — 1) и открываем его для редактирования. Настроек довольно много, но все они интуитивно понятны. Делаем следующее:

  • Меняем название профиля, чтобы было понятнее
  • Включаем опцию «Использовать AJAX для отправки формы»
  • Если нужно, то настраиваем отображение CAPTCHA

Здесь стоит обратить внимание вот на что. Если мы меняем максимальную длину слова для CAPTCHA, то нужно не забывать о «Ширине CAPTCHA». Чтобы не получилось так, что при заданной ширине отображаются не все символы. Другими словами, чтобы они поместились.

  • Если хотим, чтобы сообщения приходили на адрес электронной почты отличный от указанного в общих настройках сайта, то заполняем поле Электронный адрес. Следует помнить, что в это поле вводится адрес электронной почты, который будет работать с вышеуказанными настройками. Т. е. если в это поле ввести адрес ящика из другого домена, например из yandex.ru, то нужно будет соответствующим образом редактировать параметры отправки почты в общих настройках сайта.
  • Заполняем префикс темы письма.
  • Если нужно, меняем формат письма с HTML на «Простой текст».
  • Изменяем значение поля Обозначить необходимые поля символом (ами).
  • Изменяем Уведомление об обязательных полях.
  • Пишем своё Сообщение благодарности.
  • Сортируем и отмечаем нужные для этого профиля поля.

Кликаем на кнопке «Применить» и поднимаемся в верхнюю часть окна. Здесь нас интересуют кнопки: Edit Contact, Edit CSS, и Edit Email. Этими кнопками можно воспользоваться не только в этом окне. Они присутствуют в панели управления вкладки «Профайлы». Требуется только выделить нужный профиль и нажать соответствующую кнопку.

Сохраняем изменения. Теперь если нужно, то изменяем оформление (стили). Для этого выделяем профиль «Common» и нажимаем кнопку «Edit CSS». Подробно настройки CSS описывать не буду — во-первых, у каждого они свои, а во-вторых, это выходит за рамки статьи. Коснусь лишь вскользь. Каждый файл CSS для профиля уже содержит примеры того, как можно изменить стиль элемента формы обратной связи. Для существующих полей записи уже сделаны. Для новых элементов, если требуется, нужно скопировать строку для соответствующего типа, изменить идентификатор «field_name» на имя нового поля и добавить свойства.

После настроек CSS можно настроить вид приходящего письма. Для этого надо выделить профиль и нажать кнопку Edit Email. Редактирование вида приходящего сообщения – это задача не для новичков. На первых порах, оставляйте как есть — главное, что в нём содержится требуемая информация.
Один профиль настроили. Теперь мы можем поместить контактную информацию и форму обратной связи на сайте. Для этого в нужном меню добавляем пункт «Контакты», а тип пункта меню назначаем «Contact Form».

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

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

Заполняем поля и отправляем сообщение. Если всё настроено правильно, то электронное письмо появится во вкладке «Сообщения».
Теперь настроим второй профиль (Module form) и рассмотрим работу модуля и плагинов aiContactSafe. А именно, как вставить модуль с формой обратной связи, как вставить форму обратной связи в статью и как сделать ссылку на такую форму.
Основные настройки второго профиля:

  • Название профайла: resume
  • Поле для использования в качестве темы: aics_vacancy Вакансия
  • Поле для использования в качестве послать отправителю: нет
  • Выбираем нужные нам поля и сортируем их

Если требуется, меняем «Префикс темы электронного письма» и переводим уведомления. Остальные настройки редактируем по своему усмотрению. Сохраняем. Удаляем всю контактную информацию для этого профиля.

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

В настройках панели управления aiContactSafe мы включили модуль Mod_aiContactSafe. Теперь с помощью этого модуля вставим форму для отправки резюме в произвольную позицию шаблона. Для этого переходим в «Менеджер модулей», находим там модуль «aiContactSafe module», открываем его и соответствующим образом редактируем.

Главное, на что нужно обратить внимание при редактировании модуля – это правильно выбранный профиль. В поле «Profile’s CSS» можно выбрать использовать ли CSS компонента или шаблона сайта. А в поле «Fields values» для полей формы обратной связи можно ввести предустановленные значения, например «aics_vacancy=бухгалтер».

Если в «Менеджере модулей» не окажется модуля «aiContactSafe module» или потребуется ещё один, то просто создайте его.

Как вставить форму обратной связи в статью

Для того чтобы вставить форму обратной связи с помощью aiContactSafe в статью нужно, чтобы в настройках панели управления компонента был включен плагин Plg_aiContactSafeForm. Это мы уже сделали. Теперь в нужное место страницы добавляем следующий код (без пробелов): < aicontactsafeform pf=2|use_css=2 >.
pf=2 – это id используемого профиля.
use_css=2 – это css используемого профиля.
Так же, как и в модуле можно включить предустановленные значения для полей. Это может выглядеть так:

Смотрим, что получилось.

Как вставить ссылку на форму обратной связи

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

В параметре «text» пишем анкор ссылки. Параметр «pf» нам уже знаком – это id профиля. И через имя поля «aics_vacancy» указываем предустановленное для этого поля значение «Системный администратор». В конечном итоге получаем следующее.

Этим заканчиваю статью. Теперь, когда вы вооружены знаниями, вы можете конструировать какие угодно формы обратной связи и размещать их в любом месте своего сайта. Не забывайте, что у компонента есть встроенная справочная система – пользуйтесь ей! Ну и конечно же захаживайте на сайт Aitishnik.Ru.

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

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

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

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

Требования

Плагин будет работать на любом шаблоне, но для своей работы ему требуется библиотека JQuery. Не забудьте включить ее в своем шаблоне.

Оглавление

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

  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 токен? Не волнуйтесь, мой плагин его формирует с помощью ява скрипта (заодно это усложняет дело спамерам). Также формируются некоторые скрытые поля, которые добавляют информацию о посетителе (что тоже важно как тому кто получает оповещения об отправке, так и для контроля спама).

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

С помощью традиционных тегов

Примечание: не забудьте назначить атрибут 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задаем Javascript #3:

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

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

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

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

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

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

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

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

Тема письма

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

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

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

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

«Заказ на сайте. Телефон: «

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

После каждого поля мы добавили тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например для yootheme шаблонов или шаблонов на основе UIKit3 можно использовать такой код:

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

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

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

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

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

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

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

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

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

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

Для этого включите тумблер «включить телеграм» и создайте телеграм бота с помощью бота @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 — дополнительная информация о посетителе. Вашему коду будут доступны все переменные формы в массиве $source.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Топ-пост этого месяца:  Что такое файлообменник или файловый хостинг

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

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

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

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

Создание формы обратной связи Joomla 3

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

Чтобы создать страницу контактов, ни к каким сторонним разработкам прибегать не нужно — Joomla имеет в своём арсенале компонент Контакты. Теоретически с его помощью можно создать сколько угодно страниц обратной связи (например, для каждого владельца сайта, для каждого филиала магазина), но на практике страница обратной связи нужна бывает всего одна, её созданием сейчас и займёмся, а после добавим пункт меню, чтобы посетители могли до неё добраться.

Создаём страницу контактов

Алгоритм создания вам уже знаком.

1. В главном меню панели управления Joomla откройте Компоненты -> Контакты.

2. На открывшейся странице нажмите кнопку Создать.

3. Отредактируйте страницу контакта. Чтобы появилась форма обратной связи, достаточно заполнить поле Имя, выбрать связанного пользователя, на вкладке Настройки отображения из раскрывающегося списка Формат отображения выбрать вариант Обычный, а также на вкладке Настройки отображения контактов из раскрывающегося списка Показывать форму обратной связи выбрать Показать.

4. Нажмите кнопку Сохранить.

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

Создаём ведущий на неё пункт меню

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

2. В поле Заголовок введите название нового пункта.

3. В области Тип пункта меню нажмите кнопку Выбрать, в появившемся списке щёлкните Контакты -> Контакт.

4. Нажмите кнопку Выбрать в области Выбор контакта и щёлкните на наименовании страницы обратной связи.

5. Нажмите кнопку Сохранить.

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

Редактор контактов

На случай, если вы захотите углубиться в вопрос работы с контактами в Joomla, оставляю здесь дополнительную информацию о форме настройки контакта и её элементах.

Единственное обязательное и не заполняемое автоматически поле — Имя. Судя по всему, разработчики компонента подразумевали создание большого количества форм и хотели, чтобы вы ввели сюда имя конкретного контактного лица, одного из многих, но если на сайте планируется разместить всего одну контактную страницу, то вместо имени лучше ввести название (h1), так как оно будет отображаться на странице, и пользователи будут его видеть. Сюда можно ввести «Контакты», «Обратная связь» или нечто подобное.

Поле Алиас нам уже знакомо, например, по работе с менеджером категорий.

Остальные настройки распределены по вкладкам.

Контакт

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

Дополнительная информация

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

Параметры публикации

Те же элементы, что и в редакторе страниц: начало/конец публикации, дата создания, информация об авторе, изменениях и количестве просмотров, а также поля для ввода метаданных.

Настройки отображения


Здесь можно отобразить или скрыть каждое из сведений, указанных на вкладке Контакт, например, спрятать должность, но отобразить страну и почтовый индекс, или сделать наоборот. Также здесь можно настроить показ опубликованных пользователем материалов и выбрать альтернативный макет отображения страницы, чтобы она приобрела отличный от остальной части сайта внешний вид. Однако самая интересная из простых возможностей — раскрывающийся список Формат отображения.

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

  • По умолчанию. Если не трогать настройку, будет выбран сворачивающийся список.
  • Сворачивающийся список. Вариант, при котором блоки располагаются один под другим, и чтобы открыть раздел, нужно щёлкнуть кнопкой мыши на его названии.
  • Вкладки. Данные распределяются по вкладкам, горизонтально.
  • Обычный. Пользователь увидит сразу все контактные данные — как раз то, что нужно, если вы хотите сразу показать форму обратной связи.

Настройки отображения контактов

Кроме того, что здесь можно показать или скрыть форму обратной связи, настройки вкладки позволяют также убрать флажок, благодаря которому пользователь может отправить копию адресованного вам письма на всякий случай самому себе. На этой же вкладке можно заблокировать определённые e-mail-адреса, темы и тексты писем, чтобы защититься от спама или нежелательной почты (фрагменты запрещённого текста либо записываются каждый с новой строки, либо отделяются друг от друга точкой с запятой). Включение функции Проверять сессию приведёт к тому, что вам не смогут написать пользователи с отключенными cookie, Если хотите, чтобы после успешной отправки письма посетитель был перенесён на другую страницу, введите её адрес в поле Перенаправление.

Модули обратной связи и контактов для Joomla

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

RSForm! PRO 2.2.7

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

Благодаря нашему пост .

JSN UniForm 4.1.22

Компонент для создания сложных и не очень сложных форм для Joomla. Огромное количество видов полей, поддержка интерфейса Drag-n-Drop, возможность создания форм разделенных на этапы/страницы, мощная защита от спам .

Easy Profile Pro 2.8.0

Easy Profile – это мощный компонент, который расширяет возможности управления профилями пользователей, добавляя дополнительные поля и многие другие настройки.

Shack Forms 4.0.21

Одно из самых популярных расширений в JED каталоге, работающее на AJAX и предоставляющее вашим посетителям красивую форму обратной связи. Неограниченное количество добавляемых полей, возможность загрузки файлов, 5 вар .

Fox Contact Form 3.9.8

Fox Contact Form — компонент для быстрого построения функциональной формы обратной связи для Joomla 2.5 и 3.x. Расширение обладает понятными настройками и может создавать неограниченное количество текстовых полей, вып .

DJ-Messages 1.0.9

DJ-Messages — это простая в установке и настройке Система Приватных Сообщений для Joomla. Она позволяет пользователям сайта общаться друг с другом с помощью простых входящих и исходящих сообщений.

K2 Contact 1.0.1

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

Он основан на типах фильтров модуля K2 Filter & Search и может отображать все поля K .

JA Quick Contact 2.6.5

Модуль JA Quick Contact позволяет вам быстро добавить форму обратной связи на любую страницу вашего сайта. Она компактна и изящна. Если вы боитесь спама, то просто дополнительно установите бесплатный плагин JA Multipl .

Shack Editorial Calendar 1.2.3

Shack Editorial Calendar предназначен для людей с загруженными сайтами Joomla. С помощью этого расширения вы можете управлять большим количеством статей Joomla. Вы можете создавать, редактировать и планировать ве .

jInbound Pro 3.0.7

jInbound — это лучшее расширение для автоматизации процесса маркетинга. Цель jInbound — помочь пользователям Joomla расширить свой бизнес. jInbound предлагает простой способ управления несколькими кампаниями .

Balbooa Forms Builder 1.7.4

Balbooa Joomla Forms Builder — это потрясающий компонент для Joomla, который позволяет создавать формы любой сложности и дизайна без каких-либо знаний CSS и PHP.

В компоненте есть своя очень удобная админка. В .

Convert Forms Pro 2.0.4

Convert Forms Pro — это прекрасный конструктор форма для Joomla с великолепным адаптивным дизайном и гибкими настройками.

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

Minitek Discussions 3.2.2

Minitek Discussions – это функциональная и легкая в использовании система, для создания мощных систем обсуждения и форумов на вашем Joomla сайте. Расширение имеет огромное количество настроек, поддержку Ajax, что позв .

BreezingForms FULL 1.9.0 build 930 B

BreezingForms это единственный современный построитель форм для Joomla, который объединяет современные технологии и корпоративные функции. От простых классно выглядящих форм до комплексных систем форм, можно сделать п .

Community Surveys 4.5.5

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

CjForum 2.0.2

CjForum — это мощный и многофункциональный движок для форума на основе Joomla. Основными особенностями этого компонента является интеграция с социальными сетями, приятный и полностью адаптивный интерфейс, а также боль .

Testimonials 1.0

Хотите рассказать своим пользователям о своем продукте, качестве вашего сервиса, или получить больше доверия от своих клиентов? Тогда расширения JF Testimonials идеально подойдет для вашего сайта на CMS Joomla. Расшир .

AjaxChimp 1.0

JF AjaxChimp – это уникальное расширение для вашего сайта на CMS Joomla, которое работает на AJAX и позволит вашим клиентом подписываться на ваши почтовые рассылки в сервисе MailChimp, а также делать это эффектно и ос .

Regreminder 3.0.0.13

RegReminder– это уникальный плагин для сайтов на CMSJoomla, который позволяет вам держать свой сайт в чистоте. С помощью данного расширения, ваш список пользователей будет постоянно обновляться и сортироваться. Вы все .

Creative Contact Form LF 4.5

Creative Contact Form – это мощная форма обратной связи с небольшими визуальными эффектами. Количество настроек просто потрясает!

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

Vik Appointments 1.5

Vik Appointments – это расширение, которое позволяет создать полноценную систему организации рабочего времени на сайте под управлением Joomla. Дизайн разработан таким образом, чтобы любой сотрудник мог управлять всем .

Vik Restaurants 1.6

Vik Restaurants – это расширение, созданное как система бронирования и заказов для ресторанов.

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

Yj Contact Us 1.0.5

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

SP Quick Contact 1.4

SP Quick Contact – очень простой модуль контактов для Joomla. Этот основанный на технологии Ajax модуль разработан с помощью MooTools. Поля, проверенные JavaScript в случае отсутствия ошибок в электронном адресе, отсы .

ChronoForms 5.0.10

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

YJ Reservations 1.0.2

Простенькая форма бронирования для Joomla. Хорошо подойдет тем, кому мало стандартных возможностей движка и при этом нет особого желания утяжелять код такими мощными и универсальными компонентами как RSforms, JSN Unif .

S5 Contact Popup 1.5

Модуль простой формы обратной связи на AJAX для Joomla. Данное расширение защитит Вас от спама при помощи Google reCaptcha, а для работы используется стандартная jquery библиотека, поэтому никаких конфликтов со с .

YJ Ajax Contact 1.0.5

Это милое, но вместе с тем мощное Joomla расширение. Оно позволит вашим пользователям отсылать вам е-мейл сообщения и показывать ваш новый гаджет. Благодаря проверки формы с помощью Formcheck, настраиваемой ширины и д .

Perfect Popup Box 1.0.11

Perfect Popup Box выводит стилизованную кнопку слева, справа, вверху или низу экрана вашего сайта. С помощью данного модуля вы с легкостью можете отобразить абсолютно любой контент: статью, модуль, произвольный HTML к .

Simple Contact 3.1.0

DM Simple Contact это простой, но при этом законченный Joomla компонент для организации обратной связи.

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

Joomla форма обратной связи

Дата публикации: 2020-01-27

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

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

В данной статье мы рассмотрим стандартные инструменты CMS Joomla, благодаря которым достаточно легко создается форма обратной связи джумла. Конечно, можно использовать различные сторонние расширения, но по большому счету, в 90% случаев, вполне достаточно стандартного функционала CMS.

Создание контакта

Как было сказано, выше, форма обратной связи отправляет сообщение на почту, определенного пользователя, и соответственно возникает вполне законный вопрос, а как привязать пользователя к конкретной форме? Для этого необходимо создать так называемый “Контакт” – это элемент стандартного компонента “com_contact”, который привязывается к определенному пользователю и содержит, если это необходимо, дополнительную информацию и настройки по отображению формы обратной связи.

Для создания “Контакта” – открываем в панель администратора CMS Joomla.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Затем, используя пункт “Компоненты”, главного меню, переходим по ссылке “Контакты”.

Если Вы планируете создать несколько “Контактов” и соответственно несколько форм обратной связи, то “Контакты”, можно разделить по категориям. Для этого необходимо перейти в раздел “Категории”, использовав меню левой колонки.

Для создания “Контакта”, кликаем по кнопке “Создать”.

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

После, этого можно кликать по кнопке “Сохранить”, для добавления контакта в базу данных. Но если Вы хотите, что бы на странице, формы обратной связи так же отображалась дополнительная информация, о пользователе, то необходимо заполнить поля, на текущей вкладке. То есть указать, должность, e-mail, адрес проживания, телефон и т.д,, человека, который получит сообщение пользователя.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

На вкладке “Дополнительная информация”, можно указать краткую информацию о привязанном пользователе в виде текста. Для удобства, в Вашем распоряжении визуальный текстовый редактор.

На вкладке “Параметры публикации”, Вы можете указать дату публикации контакта и данные для формирования мета-тегов (meta-keywords, meta-description и т.д).

Вкладки “Настройки отображения” и “ Настройки отображения контактов” содержат параметры для настройки отображения информации о контакте, а также отображения формы обратной связи.

Отображение формы обратной связи

Форма обратной связи джумла 3, может быть отображена на отдельной странице сайта, используя меню Joomla. Для этого в панели администратора, переходим в менеджер меню.

И кликаем по кнопке “Создать”, для создания нового элемента.

Обратите внимание, что указав заголовок будущего пункта меню, необходимо, обязательно выбрать его тип в параметре “Тип пункта меню”.

Нас интересует компонент “Контакты” и непосредственно вид — “Контакт”, то есть страница показа информации по определенному контакту. При этом, после выбора типа меню, необходимо выбрать “Контакт”, в параметре “ Выбор контакта”, данные которого будут отображены на экране, вместе с формой обратной связи. После этого, кликаем по кнопке “Сохранить” для добавления пункта меню в базу данных. Так же на странице добавления нового пункта меню, в дополнительных вкладках, присутствуют параметры для настройки отображения информации на странице, сформированной данным пунктом меню.

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

На этом данный урок завершен. Всего Вам доброго и удачного кодирования.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

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

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

Меня заинтересовало это предложение и немного поразмыслив, я приступил к работе. На самом деле, расширить таким образом компонент Joomla com_contact несложно. Правда есть один «нехороший» момент: если внести изменения в файлы компонента, то обновлять его больше будет невозможно, потому что при обновлении все ваши изменения будут потеряны.

Можно попытаться клонировать компонент. Но так как он встроен в систему, сделать это тоже не так просто — в нем много различных зависимостей, поэтому работающая копия компонента com_contact у меня не получилась. В итоге решение получилось совсем не идеальным, но работающим :).

Уже по завершении работы я «наткнулся» на одну статью на сайте с документацией для Joomla. В ней говориться о том, что для расширения формы обратной связи (и других системных компонентов) нужно создавать плагин. Таким образом вы не изменяете файлы в системном компоненте и не теряете возможность обновлять CMS.

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

Сейчас я опишу весь процесс изменения компонента обратной связи, который я проводил для добавления в форму поля типа “file”.

Итак, сначала вносим небольшие изменения в административной части сайта:

► Изменяем языковые файлы.

/administrator/language/ru-RU/ru-RU.com_contact.ini
Добавляем следующие строки:

В файл /administrator/language/en-EN/en-EN.com_contact.ini добавляем те же строки, только с их значением будут фразы на английском языке. Таким образом обеспечиваем многоязычность.

► Редактируем файлы: /administrator/components/com_contact/config.xml (секция fieldset name=»Contact_Form» ) и /administrator/components/com_contact/models/form/contact.xml (секция fieldset name=»email» ) добавляем в оба файла следующий код:

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

Напомню читателю, что при изменении параметров контакта в админке, они сохраняются в БД: таблица __contact_details , поле params .

Теперь переходим к изменению файлов компонента в публичной части сайта.

► Теперь в шаблоне компонента com_contact станет доступно значение добавленного параметра allow_images_attach . Перед внесением изменений в код шаблона, его следует скопировать в папку шаблона сайта: /templates/имя_шаблона/html/com_contact/contact/default_form.php

Для проверки можно разместить в указанном файле следующий код.

Если ошибок нет, то странице компонента в публичной части сайта выведется цифра «1».

► Далее добавляем описание поля для прикрепления файла (изображения) в xml-файл с описанием полей формы в модели ( /components/com_contact/models/forms/contact.xml ).

► В языковые файлы нужно добавить подпись ( label ) и описание ( description ) для нового поля ( /language/ru-RU/ru-RU.com_contact.ini ):

В файл /language/en-EN/en-EN.com_contact.ini добавляем те же строки, только с английским текстом в качестве значения.

► Добавляем в шаблон формы ( /templates/имя_шаблона/html/com_contact/contact/default_form.php ) следующий код:

После добавления этого кода на странице с компонентом обратной связи появляется поле для добавления файла.

Чтобы форма отрабатывала правильно, необходимо добавить в тег

Добавить комментарий