Всплывающая форма обратной связи для Joomla 3.

Здравствуйте! Эта лекция станет полезной для начинающих веб-дизайнеров. И особенно много интересной информации из неё смогут почерпнуть пользователи CMS Joomla 3
Не секрет, что интернет-сайт создается в первую очередь для привлечения клиентов и осуществления продаж. Одним из наиболее популярных способов установления контакта с посетителем в сети остается форма обратной связи. Если у вас, уважаемые читатели, уже есть начальный опыт работы с Joomla 3, то вы заметили, что настроить качественную форму обратной связи в этой cms довольно непросто. Разумеется, хорошенько разобравшись в теме, можно научиться добавлять статические формы, как самописные, так и сторонние. Однако установить в Joomla 3 всплывающую форму обратной связи - совсем другая история. Лично я за несколько лет перепробовал несколько решений и остановился на Perfect Ajax popup contact form. Об этом модуле и особенностях его настройки и пойдёт речь в данной статье.

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

Прежде всего скачаем Perfect Ajax popup contact form и установим его через менеджер расширений в Джумле. На данный момент я использую версию 3.2.20, и она меня устраивает более чем полностью. Теперь я предлагаю вам пройти несколько шагов, в ходе которых мы сделаем простенькую кнопку и привяжем к ней всплывающую форму обратной связи Perfect Ajax.
Перейдем в менеджер модулей админпанели Joomla 3. Здесь нам нужно найти свежеустановленный модуль и открыть его настройки:

Всплывающая форма обратной связи для Joomla 3

Сразу скажу, Perfect Ajax можно настроить и для статического (невсплывающего) отображения, однако это тема отдельной статьи. Ну а мы в первую очередь выставляем параметр Lightbox Window в первой вкладке, которая именуется Модуль:

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

(Кликните по картинке для увеличения)

Также в этой вкладке скрываем заголовок модуля, если он есть, включаем публикацию и выставляем позицию модуля. В принципе, можно выбрать любую позицию, так как окошко формы будет всплывать "из ниоткуда", я обычно выставляю позицию debug, она встречается практически во всех шаблонах Джумлы.
Во вкладке Привязка к пунктам меню выбираем На всех страницах. Далее переходим в следующую важную вкладку Theme. Именно здесь задается внешний вид нашей формы обратной связи Joomla.
В этой вкладке очень много настроек, в которых легко заблудиться, поэтому я расскажу вам о нескольких основных. В самом верху выбирается цветовая тема. Давайте сделаем стиль кнопок и полей (Buttons and fields style) синим, а цвет фона (Background style) - белым:

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

(Кликните по картинке для увеличения)

Прокручиваем вниз. Тут есть пара важных настроек, таких как Ширина формы (Form width), Позиция названий полей (Labels position), Шрифт (Font size, Font family). Названия полей я обычно ставлю над полями (Above field), всё остальное - ситуативно:

всплывающая форма обратной связи

(Кликните по картинке для увеличения)

В самом низу можно указать визуальный эффект всплывания и его длительность, например Square, 400 ms. Не забываем вписать Подпись кнопки отправки (Send button label), иначе она останется на инглише:

Perfect Ajax popup contact form

(Кликните по картинке для увеличения)

Модуль формы обратной связи Joomla. Perfect Ajax popup contact form настройка.

Хорошо, двигаемся дальше! Кликаем по вкладке Toggler tab. Toggler tab - это стандартная кнопка, которая активирует всплывающую форму обратной связи, однако мы помним, что в нашем варианте кнопка будет своя, самодельная, размещенная в нужном нам месте, поэтому Toggler tab мы отключаем:

Модуль формы обратной связи Joomla
Больше в этой вкладке нам делать нечего. Переходим дальше, во вкладку Fields (Поля). Эту вкладку можно назвать сердцем модуля формы обратной связи Joomla, так как в ней мы задаем и настраиваем поля, заполняемые посетителем, настраиваем, можно сказать, диалог с ним. Параметров здесь довольно много, мы же сделаем обычную форму с именем, телефоном, эл. почтой и небольшим окошком для сообщения (textarea). При добавлении полей выбираем соответствующий им тип (Field type) и делаем их обязательными/необязательными для заполнения (обязательные в дальнейшем пометятся красной звездочкой):

Perfect Ajax popup contact form настройка

(Кликните по картинке для увеличения)

Следующая важная группа настроек располагается во вкладке Email. Тут необходимо задать адрес почты, на который будут приходить заявки с формы (Email to). Несколько адресов разделаются запятой. Рекомендую вам вписать Тему письма (Email subject), чтобы получателю было удобнее ориентироваться в почте:

настройка Perfect Ajax

(Кликните по картинке для увеличения)

Далее перейдем во вкладку Events (События/Действия). Из всего набора настроек уделим внимание одной - автоматическое закрывание формы после отправки (Auto-close), это очень важная функция. Кликаем по кнопке On email success, что значит, что наша форма закроется сама после успешной отправки заявки. Задержку автозакрытия (Auto-close delay) я обычно выставляю равной 2500 мс.
И, пожалуй, последняя настройка Perfect Ajax popup contact form. Располагается она во вкладке Documentation и обуславливает способ открытия всплывающей формы. В нашем случае форма должна открываться HTML-кнопкой, поэтому наc интересует позиция Open contact form by link. Код интеграции очень простой и подразумевает добавление класса pwebcontact143_toggler. 143 - это порядковый номер самого модуля Perfect Ajax, в каждой админке он свой собственный.

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

Всё почти готово! Дело за малым - написать кнопку и прикрепить к ней форму обратной связи. Модуль кнопки с телефоном у меня выглядит следующим образом:

cms joomla 3

(Кликните по картинке для увеличения)

Как вы видите, у кнопки (Заказать Звонок) два css-класса, один от модуля Perfect Ajax, а другой - мой самописный. Кстати говоря, вы можете сами проверить, как работает эта форма на созданном мной сайте здесь. Нажмите на кнопку и вы увидите результат:

perfect ajax popup

Спасибо за внимание! Теперь вы знаете как сделать всплывающую форму обратной связи в Joomla. Если у вас возникли вопросы по CMS Joomla 3, пишите мне на электронную почту:

webplustudio email

Отвечу всем :)

Услуги и Цены

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

instagram webplustudio  Подписывайся на наш Инстаграм

Продвижение сайтов казань. Сео оптимизация сайта.

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

 

Copyright © 2008 - 2017 | Webplustudio. Создание сайтов недорого в Казани.