Главная Статьи Joomla Компоненты Joomla Как создать форму обратной связи в Joomla - работаем с aiContactSafe
Как создать форму обратной связи в Joomla - работаем с aiContactSafe
19.06.2010 15:16

Для большинства владельцев сайтов очень важно поддерживать связь с посетителями. При этом желательно использовать не просто указанный где-нибудь на сайте e-mail, но и выделить отдельную страничку под форму обратной связи. Заполнив такую форму, посетители сайта без труда смогут отправлять вам сообщения, минуя почтовый клиент. Решая подобную задачу в системе управления контентом Joomla, мы наткнулись на очень полезный компонент – aiContactSafe, которому и посвящена сегодняшняя статья.

{mosloadposition debug}

Предлагаю скачать aiContactSafe c нашего сайта. Сделать это можно на этой странице: icon  AiContactSafe 2.0.8 (Rus)

 

Прежде всего, пару слов о том, как создать форму обратной связи стандартными средствами Joomla. В этой системе управления контентом есть компонент Контакты, который можно найти в меню «Компоненты». После создания категории и нового контакта вы сможете использовать для него форму обратной связи. Для этого перейдите в режим редактирования контакта и отметьте опцию «Показать» в настройках Формы E-mail.

 

Image

 



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

 

Image

 



Однако при таком подходе есть несколько серьезных «минусов»:

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

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

3.невозможно создать несколько разных форм на сайте.

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

Что же умеет делать этот компонент:

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

2.использует проверочный код (капчу) и позволяет настроить ее внешний вид и параметры показа;

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

4.позволяет задать уникальные e-mail для получения сообщений из каждой формы сайта;

5.хранит архив отправленных посетителями сайта сообщений, который доступен прямо в панели администрирования Joomla;

6.проверяет заполнение обязательных полей формы и выдает посетителю сообщение об ошибках, если то или иное обязательное поле не заполнено;

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

Собственно, данного перечня возможностей уже достаточно, чтобы установить компонент aiContactSafe в Joomla. Для этого, как обычно, выберите в меню «Расширения» пункт «Установить / Удалить» и, указав архив с модулем, нажмите кнопку «Загрузить и установить».

После установки aiContactSafe будет доступен в меню «Компоненты» - «Форма обратной связи».

 

Image

 



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

«Сообщения» - архив всех сообщений, отправленных посетителями сайта через формы aiContactSafe.

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

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

«Панель управления» - общие настройки компонента.

«О программе» - получение дополнительной информации о компоненте и его разработчиках.

Изучать работу компонента aiContactSafe мы будем на примере формы обратной связи, которая обычно имеется в меню «Контакты» сайта. Предположим, нам необходимо создать такую форму с четырьмя полями: ФИО посетителя, его e-mail, тема и текст сообщения, дабы посетители без труда могли связаться с нами, не покидая страниц сайта.

Для этого перейдите в меню «Поля» компонента aiContactSafe и создайте 4 поля, нажав кнопку «Добавить».

 

Image

 



Для каждого поля необходимо ввести его название на английском языке. Оно будет использоваться компонентом при обработке данных из формы. В качестве «Field label (метка поля)» указываем понятное посетителям сайта наименование поля, например «Ваше Ф.И.О» и т.п.

 

Image

 



Опция «Field type (тип поля)» позволяет выбрать тип поля: текстовое, чекбокс, выпадающий список и т.п. Первые три поля формы будут иметь тип «Textbox (Текстовая строка)». Последнее поля, куда посетитель должен вводить текст сообщения, будет иметь тип «Editbox (Расширенное текстовое поле)».

 

Image

 



Обратите внимание на параметр «Field required (необходимое поле)». Если вы отметите его галочкой, то поле будет считаться обязательным для заполнения. В настройках профайла обязательные поля можно обозначить каким-либо знаком, например, популярной у всех звездочкой. Также проверьте, чтобы стояли галочки напротив параметров «Включать в тело письма» и «Опубликовано».

 

Image

 



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

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

 

Image

 

 

 

Image

 



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

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

 

Image

 



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

 

Image

 



В следующем блоке настроек вам предстоит определить внешний вид формы обратной связи. Опытным путем мы выяснили, что наилучшие результаты получаются, когда элементы формы выровнены по ширине или по центру веб-страницы. В настройках опции «Align label and fields» можно также использовать выравнивание по левому или правому краю. Здесь многое зависит от дизайна вашего сайта.

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

 

Image

 



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

 

Image

 



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

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

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

 

Image

 


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

 

Image

 



В качестве типа меню выберите «Внутренняя ссылка» - «aiContactSafe» – «Сообщение» – «Contact Form».

 

Image

 



В блоке настроек «Параметры - Основные» укажите нужный профайл aiContactSafe.

 

Image

 



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

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

{mosloadposition cpanel}

{mosloadposition debug}

Комментарии (5)Добавить комментарий
mellow
...
Автор: mellow, Июнь 17, 2011
Здравствуйте!!!
Подскажите, пожалуйста, как сделать два поля привязаными друг к другу?
Мне надо создать поле "Раздел" и что бы в зависимости от того, что выбираешь в "разделе", в поле "подраздел" появляются категории этого раздела.
eu1cj
...
Автор: eu1cj, Август 04, 2011
Спасибо за статью! То, что нужно.

Кстати, столкнулся с интересной штукой: призагрузке CAPTCHA выдавало ошибку и ничего не показывалось.
Версии aiContactSafe v.2.0.2.d.stable и Joomla! 1.5.22

Оказалось, что валилось в коде mootools.js Там звали функцию jQuery "setHTML()". Пришлось вручную везде заменить на html(), и всё пошло. Да ещё какого-то чёрта обращаются к селектору по ID $('div_bla-bla'), без "#". Или я чего-то не догоняю... но тоже пришлось изменить ручками.
Дизайн, да, там конечно, кривой... пришлось свои CSS писать на все fields.

А так плагин отличный, я доволен функционалом.
smu71
...
Автор: smu71, Январь 15, 2012
Кто подскажет, можно ли размещать форму связи на определённых страницах по выбору?
Alegros
...
Автор: Alegros, Февраль 25, 2012
Не приходят емейлы. В чем может быть проблема?
mrak101181
...
Автор: mrak101181, Май 07, 2014
Добрый день!
Подскажите, пожалуйста, где настроить, чтобы письмо приходило в текстовом виде, а не в HTML.
Сейчас приходят вот, так:


Материал
 
натуральная


Примечание
 
.......

Заранее благодарен!

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

busy

Похожие новости:
Также рекомендуем к прочтению:

Обновлено 17.02.2011 00:33