Joomla форма отправки данных
Наши преимущества:
Обработка персональных данных
С 1 июля 2017 вступают в силу поправки в закон о персональных данных. Теперь перед отправкой формы пользователь должен дать согласие на обработку своих данных. Мы добавили в модуль соответствующий чекбокс. Пример текста.
Лицензионность
Модули с пиратских сайтов зачастую наполнены скрытыми ссылками. Это может негативно повлиять на продвижение вашего сайта. С нашей формой у вас не будет таких проблем.
Простота настройки
Контактус прост в настройке и установке. Вы сможете настроить внешний вид формы, способ вызова модуля, маску для телефонного номера. Специально для вас мы сделали как видео, так и текстовую инструкции. В статьях нашего блога разобрали возможные проблемы и пути их решения.
Цели для аналитики
Все варианты модуля имеют функционал для настройки целей в Google Analytics и Яндекс метрике. Заполните два поля и отслеживайте конверсии.
Конструктор полей
Премиум модуль позволит вам создать свои собственные формы на базе контактуса. Поля, списки, чекбоксы и другие элементы в вашем распоряжении. В версии 3.17 были добавлены связанные поля.
Всплывающая форма
Создавайте как простые, так и всплывающие формы. Модуль может быть вызван по клику на любой элемент сайта: текст, пункт меню, картинку и т.п.
SMS и Telegram
Неудобно получать сообщения на почту? Получайте их прямо на телефон через SMS или Telegram.
Рекапча
В качестве капчи в модуле используются Recaptcha 2 и 3 от Google на выбор. Они просты в применении и обеспечивают лучшую защиту от спама.
Новости Joomla
Бесплатный шаблон для интернет-магазина на базе JoomShopping 4
Бесплатный шаблон для интернет-магазина на базе JoomShopping 4.18 с использованием CSS-фреймворка Bootstrap 4.6. Адаптивная верстка.
Вышел релиз Joomla 4.1 Alpha 2
Проект Joomla рад сообщить о выпуске Joomla! CMS 4.1 Alpha 2.
Вышли релизы Joomla 4.0.4 и Joomla 3.10.3
Доступны к загрузке Joomla 4.0.4 и Joomla 3.10.3. Это релизы с исправлениями ошибок и улучшениями для серий Joomla 4.0.x и 3.10.x.
Progreccor
Добрый день.
Хорошо бы в вашем мануале добавить несколько примеров разных форм, чтобы можно было просто скопировать, переименовать тексты и использовать.
Ибо, я думаю, не один я такой, кто мучает единственный пример:
И думает «блеаа, как сделать просто для текста?»
Progreccor
Появилась возможность использовать поле «ответить на» для удобного общения с клиентами.
Обновлено описание плагина https://hika.su/rasshireniya/radical-form
Добавлен пример формы с валидацией HTML5 полей и разбор ее работы.
Progreccor
В новой версии плагина 1.3.5 исправлена работа с новой версией Joomla! и другие ошибки.
* Исправлено отображение слишком длинных форм в истории
* Добавлена проверка на минимальную версию PHP
* Исправлена работа формы на версиях Joomla 3.8.7 и выше
* В случае обычного вызова яваскрипта #2 ему не передавался параметр here
* Исправлены ошибки в английском языковом файле
Progreccor
Это багфикс релиз.
Версия плагина 1.3.6
* Обнаружена досадная ошибка в файле английского языка, которая рушила дизайн админки. Пришлось выпустить эту версию.
Создание формы обратной связи стандартными средствами Joomla.
Одним их наиболее востребованных элементов сайта была и остается форма обратной связи. Она представляет собой удобный способ установления контакта посетителей с владельцем сайта. Многие веб-мастера устанавливают себе сторонние расширения для организации формы обратной связи, но мало кто знает, что создать ее можно и стандартными средствами Joomla. Это гораздо правильнее, поскольку каждое стороннее расширение требует отдельного обновления и отслеживания уязвимостей. В этой статье я расскажу о том, как создать форму обратной связи, защищенную от спама, с помощью стандартных средств Joomla.
Иногда бывает так, что вы давно уже знакомы с Joomla и вроде бы знаете эту CMS достаточно хорошо, но в один прекрасный день обнаруживаете новую возможность, которая все это время имелась в Joomla, но вы о ней даже не подозревали. Точно также получается и с формой обратной связи – она есть, но найти ее довольно непросто.
Помимо стандартной формы обратной связи советую попробовать мой модуль Wedal Joomla Callback. Он бесплатен и позволяет загружать и отправлять форму обратной связи без перезагрузки страницы.
Создание формы обратной средствами Joomla. Компонент «Контакты».
Скажите честно, сколько раз вы пытались разобраться со стандартными компонентами Joomla, которые доступны сразу после ее установки? Не знаю почему, но ассоциации такие, что это простейшие, базовые вещи, которые вряд ли когда-то понадобятся. На самом деле бывает наоборот.
В Joomla есть стандартный компонент с названием «Контакты». Легко понять, что он позволяет показать на сайте список контактов владельцев сайта, менеджеров и.т.д. Вы скажете: «Ну и зачем разбираться с целым компонентом, если можно просто создать статью, указав в ней необходимые контактные данные?». Во многом вы будете правы. Но, к сожалению, поступив именно так, вы никогда не узнаете, что компонент «Контакты» позволяет создать отдельную форму обратной связи для каждого контактного лица. Уже интереснее?
На сайте Wedal.ru вы можете увидеть пример такой формы:
Как видите, все необходимое для связи имеется. Этой формой посетители пользуются достаточно часто. Как ее создать?
Компонент «Контакты». Добавление контакта.
Переходим в «Компоненты» –> «Контакты» и добавляем новый контакт.
Появится следующая форма:
Здесь вы указываете имя контакта, и выбираете пользователя, который будет связан с контактом. Обычно это администратор.
В поле «Дополнительная информация» можете указать какой-то текст, который требуется показать на странице контакта.
Во вкладке «Детали контакта» не заполняем ничего.
Во вкладке «Настройки отображения» скрываем все лишнее:
Во вкладке «Форма обратной связи» показываем форму:
Компонент «Контакты». Добавление пункта меню контакта.
После того, как контакт создан, необходимо показать его на сайте. Для этого создаем в меню пункт «Контакты» или «Обратная связь» и выбираем для него тип «Контакты» –> «Контакт»:
После этого в появившейся справа форме выбираем созданный нами контакт:
На этом все. Можно смотреть на нашу форму на сайте.
Важно! Обязательно проверьте работоспособность полученной формы обратной связи. Иногда, из-за неправильных настроек отправления писем, почта не отправляется. Это ошибка не формы контактов, а настроек Joomla по работе с почтой (смотрите общие настройки Joomla).
Создание формы обратной средствами Joomla. Защита от спама.
Случается так, что спам-боты, бродящие по просторам интернета, находят вашу форму и, поскольку поля в ней стандартные, начинают отправлять владельцам сайта спам. Первое время, когда форма только создана, советую не защищать ее от спама. Защиту следует применять только тогда, когда ну совсем замучают рекламой, поскольку защита от спама усложняет форму и уменьшает лояльность реальных людей, которые ею пользуются.
Как защитить форму обратной связи от спама? В Joomla 2.5 имеется поддержка наверное самой лучшей капчи(код с картинки) reCAPTCHA. Алгоритм ее активации следующий:
1) Получение ключей. Чтобы получить ключи активации, нужно перейти на страницу http://www.google.com/recaptcha/whyrecaptcha и нажать кнопку «Sign Up Now». Вам будет предложено авторизоваться в аккаунте Google(сервис reCaptcha принадлежит Google). Если такового нет, то придется зарегистрировать. После авторизации вас попросят ввести адрес сайта:
И после этого будут сгенерированы два ключа.
Вся процедура получения ключей и пользования ими бесплатна.
В его настройках видим поля для ввода ключей:
Вводим ключи, активируем плагин и сохраняем его.
3) Переходим в компонент контактов и открываем настройки:
Кстати, reCAPTCHA может использоваться не только в форме обратной связи, но и при регистрации пользователей (активируется в настройках менеджера пользователей).
На этом всё. Потратив 5 минут, можно создать простую и удобную форму обратной связи для вашего Joomla-сайта, не прибегая к использованию сторонних расширений.
Форма обратной связи Joomla – как создать и разместить на сайте, урок 27
Вступление
Компонент «Контакты» мало освещаем в документации. Мало того, создается впечатление, что он нужен для вывода на сайт контактных данных владельца, администраторов, авторов сайта и т.д. На самом деле у компонента «Контакты» много задач. Как по мне, основное назначение компонента «Контакты», это создании формы обратной связи с клиентом, пользователем, покупателем. Сразу отмечу, что создать их можно несколько.
В прошлых статьях я рассказал об общих настройках компонента «Контакты», а также чем контакты отличаются от пользователей. Пора создавать форму обратной связи.
Этапы создания формы обратной связи Joomla
Контакты Joomla это компонент системы. Общие (глобальные) настройки контактов делаем на вкладке: Общие настройки>>>Контакты. Управление контактами находится на вкладке Компоненты>>>Контакты.
Чтобы создать и разместить форму обратной связи на сайте Joomla пройдем следующие этапы:
Создать категорию контактов
Напомню, компонент контакты может иметь древовидную структуру материалов, по типу родительская категория – дочерняя подкатегория. При этом, при создании сами контакты могут помещаться, только в конкретную категорию, но потом могут копироваться или перемещаться в другие категории контактов. Делается это на кнопке «Пакетная обработка» в списке контактов.
Вернемся к созданию категории контактов. Если вы при установке Joomla забыли убрать «установку демо данных», то у вас на сайте уже могут быть созданы категории контактов и есть установленные контакты. Удалите их, оставив только категорию «Uncategorised», она системная.
На вкладке Контакты (верхнее меню)>>>Категории, жмем кнопку «Создать»;
В открывшейся вкладке создаем категорию с произвольным именем. Выберем имя категории по логике задачи. Для примера создам категорию для контактов «Отзыв», алиас «otzyv». Можно назвать её «Связаться», «Контакт» и т.п.
Я не понимаю, зачем контакты и формы контактов индексировать, поэтому на вкладке Публикация>> Мета-тег Robots, закрываю категорию от поисковиков, ставя параметры noindex, nofollow. Вы можете это не делать.
Создать контакт
Теперь в созданной категории нужно создать контакт. Это контакт будет формой обратной связи, которую мы покажем на сайте. Поэтому заполнять его будем по-особенному.
Вкладка «Создать контакт»
Заполняем свои контактные данные. Все, которые хотим сообщить пользователям (клиентам). Например: адрес, телефон, факс, город и т.д. Эти контактные данные можно скрывать настройками в пункте меню.
Можно связать данный контакт с любым пользователем, существующим на сайте. Тогда основные данные, возьмутся от этого пользователя.
Вкладка «Дополнительная информация»
Здесь пишем текст, который будет отображаться над или под (зависит от шаблона) формой контакты-обратная связь. Например, пишу «Здесь вы можете оставить отзыв о работе нашего сайта».
Вкладка «Настройка отображения»
Здесь нам нужно либо оставить глобальные настройки, которые стоят на вкладке Общие настройки>>Контакты, либо что-то изменить именно для этого контакта.
Важная настройка, для внешнего вида показываемого контакта, это параметр «Контактная информация». Он стоит на значении «По умолчанию». Раскроем его, установив значение «Показать». Для примера я заполню этот параметр так.
Вкладка «Настройка отображения контактов»
Вот эта вкладка, которая нам нужна и важна принципиально. На ней мы размещаем в форме контактов форму обратной связи. По сути, именно эта форма обратной связи нам нужна. Остальное проформа, хотя черный список может быть полезен..
Обращу внимание, что на вкладке «Создать контакт» мы не привязали контакт к конкретному пользователю (администратору).
Вкладка «Параметры публикации»
Я закрываю от индексации форму обратной связи и ставлю в параметре «Мета-тег Robots» параметр «noindex, nofollow».
Всё. Контакт с формой обратной связи создан, остается поместить его в меню сайта, чтобы показать на фронтэнд сайта.
Добавляем контакт в меню сайта
Для этого, идем в любое созданное меню и добавляем новый пункт меню.
Результат и исправления
Приведенные примеры исправлений сделаны для демонстрации различных возможностей в создании формы обратной связи. Получилось следующая форма обратной связи.
Как видим маловато информации о сайте и администраторе в элоке Контакты. Хотя мы их заполняли.
Возвращаемся в пункт меню «Отзыв». На вкладке «Параметры отображения контактов», ранее я оставил по умолчанию. Так как по умолчанию все параметры были скрыты, то в форме они не показались. Исправляю и ставлю в строке «Контактная информация» параметр показать. Далее выставляю, что хочу показать в контактной информации. Сохраняюсь.
Чищу кэш и смотрю новую форму контактов.
Опять мне кое-что не нравится, не вижу описания данного контакта, которое я хотел показать пользователю.
Возвращаюсь в сам контакт. Данное описание контакта это «Дополнительная информация». Её показ включаем на вкладке «Настройки отображения»—«Дополнительная информация»—Показать. Аналогично включаем показ дополнительной информации в пункте меню.
Заодно, поменяю формат отображения формы обратной связи. По умолчанию стоит обычная форма, есть возможность сделать выпадающий список. Полезно если много полей. Для этого в пункте меню «Отзыв», на вкладке «Параметры отображения контактов», в параметре «Формат отображения», ставлю «Сворачивающиеся списки».
Смотрим результат. Форма связи с виде сворачивающихся списков.
Капча на форме обратной связи
Чтобы добавить в форму обратной связи капчу, нужно везде её включить. Проще всего, если вы не меняли настройки по умолчанию, включить капчу глобально, в общих настройках. Эта глобальная настройка применится ко всем компонентам, как настройка по умолчанию.
Проверьте включение капчи общих настройках «Контакты» вкладка «Форма». Там же, если открываете формы для поисковиков, на вкладке «Интеграция» включите новый параметр URL Routing, очищающий URL от цифровых меток (Experimental-Да). Об этом урок 26
Итоги
В статье, форма обратная связи с клиентами создана, размещена на сайте и готова к работе. Теперь любой пользователь сайта может написать письмо тому, для кого создан контакт с формой обратной связи. Письма будут приходить на почтовый ящик, указанный в контакте (ящик может быть скрыт в форме).
Полная форма обратной связи состоит из трех блоков:
Каждая часть имеет большое число настраиваемых полей, по-моему, слишком большое.
Примечание: Для этого сайта в форме обратной связи я убрал всё лишнее, и упростил её до простейшей.
Кстати, вот в каком виде приходит письмо от пользователя.
Остался один не решенный вопрос, как заставить пользователей регистрироваться для отправки формы обратной связи? Очень просто, при создании пункта меню для контакта, поменяйте права или группу пользователей.
Разработка форм обратной связи для магазинов на Joomla 3
Преамбула
В современном интернет-магазине должно быть немало форм обратной связи. Интернет-маркетологи стараются предупредить все возможные ситуации и порой создают формы обратной связи чуть ли ни на каждый потенциальный интент пользователя.
Оставив за скобками традиционные «заказать звонок», «подписаться на новости» привожу примеры форм интернет-магазина/каталога, которые мне доводилось встречать на практике при работе с Joomla 3:
…и т.д. и т.п. Чудный мир фантазий интернет-маркетолога (безусловно опирающийся на данные аналитики, мониторинг конкурентов и рынка в целом, профессиональное чутьё и опыт) предлагает самые разные варианты ответа на вопрос: «как достать клиента?»
Задача
Создать N-е количество форм обратной связи для интернет-магазина на базе Joomla. Формы должны быть красивыми и информативными, не вызывать неточного толкования у посетителя в том, что он делает. В форму выводим информацию о товаре и интент пользователя.
В форме должен меняться заголовок («Задать вопрос», «узнать цену» и т.д.), картинка товара, его цена, название и артикул.
К каким проблемам это приводит?
Мы постоянно слышим о том, что что-то можно сделать «легко и быстро», однако забываем о том, что для этого нужны знания и опыт. Везде.
Чаще всего один модуль имеет только одну настройку темы письма (ручками указываем «задать вопрос», «купить оптом»). В итоге получается, что мы на каждый интент пользователя создаем отдельный модуль. Сверяемся со списком форм выше и получаем 9 однотипных модулей только для каталога товаров. Значит мы получаем много мусора в коде страницы и все вытекающие отсюда минусы.
Форма обратной связи для Joomla своими руками
Ну, почти своими. Описываемый ниже подход подойдет для любых форм обратной связи. И отдельный акцент мы делаем на формах, в которых нужно указать информацию о товаре.
Замена модулей обратной связи на плагин-обработчик
Если кратко, то обычно каждое стороннее расширение тянет за собой js-скрипты, css, которые далеко не всегда вписываются в контекст сайта. В итоге всё равно приходится делать свой макет вывода. А если автор стороннего модуля решил сделать решения в духе No code (то есть максимум настроек внешнего вида в админке), то для разработчика работа с таким решением может превратиться в ад.
С Radical Form становится возможным следующий подход в работе:
вы делаете свой HTML формы (вообще любой!),
кнопке «отправить» назначается класс ‘rf-button-send’
код формы размещаете в модуле типа «HTML-код» везде, где это необходимо.
И оно работает. Именно это решение мы разовьём в тексте ниже. Так же рекомендую ознакомиться с документацией по Radical Form для лучшего понимания общей картины.
Несколько форм в одной
Чаще всего формы показываются в модальных (всплывающих) окнах. Я в основном работаю с сайтами в стеке Bootstrap, поэтому примеры HTML будут приведены для него. Однако, в контексте данной статьи не имеет значение CSS-фреймворк.
В data-атрибуты кнопки можно поместить самую разную информацию. В некоторых случаях я помещаю туда нужные для отображения поля формы (name, email, phone, comment), какие из них должны быть обязательными для заполнения и т.д. Например, получение обязательных полей из атрибута data-fields-required кнопки, имена которых указаны через запятую:
Подробно кейс создания множества форм в одной с примерами форм и кода был разобран здесь: Интеграция форм обратной связи и Битрикс 24 на сайте Joomla.
Таким образом мы размещаем в коде сайта только 1 модуль с HTML-кодом формы обратной связи и в любом нужном нам месте кнопки для вызова модального окна с нужными data-атрибутами. А создание новой формы сводится к копированию кода кнопки и указанию нужных data-атрибутов.
Получение информации о товаре для формы обратной связи
Для красивого модального окна нам нужно брать информацию о товаре: картинку, название товара, артикул, цену.
Первый путь, совсем неправильный
Второй путь, тоже неправильный
Приведу в качестве примера магазин на Virtuemart 3. Шаблоны дизайна для этого магазина делаются с помощью переопределений Joomla (хороший мануал по шаблонам Virtuemart 3 и список макетов). То есть файлы, где описана вёрстка, лежат в папке templates/ваш_шаблон/html/com_virtuemart/. В качестве подопытного кролика у нас будет список товаров в категории.
Передача данных из php в javascript в Joomla
Дело в том. что в Joomla есть простой и удобный способ передачи данных из php в javascript.
Данные передаются в виде json-объекта, доступ к которому с фронта получаем через функцию Joomla.getOptions(‘virtuemart_products_details ‘). Это стандартная функция Joomla, никаких дополнительных плагинов для этого устанавливать не нужно.
Для этого мы идём в файл templates/ваш_шаблон/html/com_virtuemart/category/default.php и циклом добавляем нужные нам данные о товарах Virtuemart в отдельный массив.
А затем получаем данные на фронте в js:
Для карточки товара аналогичные операции проводим с файлом templates/ваш_шаблон/html/com_virtuemart/productdetails/default.php
Почему этот путь тоже неправильный?
Плагин создаем в группе Jshoppingproducts, таким образом не будет попытки выполнить наш код при просмотре статьей, страниц с контактами, при переходах в админке и т.д. Он будет работать только там, где надо. Так же наш код, будучи самостоятельным плагином, не пострадает при обновлении Joomla, при обновлении компонента магазина.
Для карточки товара мы находим событие onAfterDisplayProduct, куда приходит объект с данными товара.
Для категории товаров используем событие onBeforeDisplayProductListView, куда приходит $view целиком и список товаров отдельно $productlist.
Результат работы плагина будет таким:
Готовый плагин для добавления данных товара в json-объект для JoomShopping можно скачать здесь. Добавлены параметры в настройку плагина:
Заключение
Цель данной статьи была поделиться своим опытом в работе с различными магазинами на Joomla. Возможно, он кому-то будет полезен. Возможно, кто-то предложит другие, альтернативные пути решения той же задачи. Предложения и улучшения приветствуются в комментариях.