Одним их наиболее востребованных элементов сайта была и остается форма обратной связи. Она представляет собой удобный способ установления контакта посетителей с владельцем сайта. Многие веб-мастера устанавливают себе сторонние расширения для организации формы обратной связи, но мало кто знает, что создать ее можно и стандартными средствами 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). Если такового нет, то придется зарегистрировать. После авторизации вас попросят ввести адрес сайта:
И после этого будут сгенерированы два ключа.
Вся процедура получения ключей и пользования ими бесплатна.
2) Идем в менеджер плагинов сайта и находим там плагин «CAPTCHA - reCAPTCHA».
В его настройках видим поля для ввода ключей:
Вводим ключи, активируем плагин и сохраняем его.
3) Переходим в компонент контактов и открываем настройки:
В опции «Включить CAPTCHA» выбираем «CAPTCHA - reCAPTCHA». Сохраняем. Готово. Теперь капча появится в нашей форме обратной связи.
Кстати, reCAPTCHA может использоваться не только в форме обратной связи, но и при регистрации пользователей (активируется в настройках менеджера пользователей).
На этом всё. Потратив 5 минут, можно создать простую и удобную форму обратной связи для вашего Joomla-сайта, не прибегая к использованию сторонних расширений.
Комментарии
Да стандартными средствами если делать формы на джумле, то ничуть не хуже выходит. А что за сервис такой, это английский или вот этот stepform.io/ru ? Посмотрел, написано интересно на лендинге, а там неизвестно как.
Весь вопрос с чем сравнивать, если у них лицензия на год для неограниченного использования стоит 99€ тогда как, например, у Rockettheme за ВСЕ компоненты также на год стоит 30$. Я конечно не пробовал его, может он того и стоит.
Подскажите в каком файле можно править текст: Отправить сообщение. Все поля, отмеченные звездочкой, являются обязательными.
Спасибо!
http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-30-facebox-for-virtuemart-flypage.html
только применительно к странице формы обратной связи.
Шаблон формы – это он? Joomla! 2.5.9
\components\com_contact\views\contact\tmpl\default.php
Строчка, которая выводит ссылку на страницу, строка 32 с кодом
php echo $contactLink
/Код не пишу, все равно при сохранении вырежется/
Как прописать, чтобы после отправки формы, всплывающее окно само закрылось?
Или оно и так, само закроется?
- Если ошибка при заполнении формы – выбрасывает на сайт с системным сообщением
- Спасибо за соообщение – выбрасывает на сайт с системным сообщением
- Как автоматически закрыть окно после удачной отправки?
Спасибо.
1) Если ссылка на форму есть пункт меню, то нужно делать его типа "внешний URL" и добавлять в основному URL &tmpl=component.
2) Нужно ковырять файл формы, пытаясь добавить этот же &tmpl=component или вернуть на текущую страницу.
3) Аналогично 2
4) И как тогда пользователь узнает об удачной отправке?
\components\com_contact\views\contact\tmpl\default.php
Спасибо за статью, помогла наглядно. Один вопрос: необходимо поменять строку "Тема" на "Телефон"
ни как не могу найти где :(
Расширения - менеджер языков - переопределение констант. Там разберетесь.
В файле, где есть ссылка на эту кнопку не получается заменить ее. Подскажите, может быть не там ищу...
Давно читаю ваши статьи и хочу задать вопрос:
Насколько я помню, у вас раньше были тэги, прикреплённые к статьям. Если были, то почему вы от них отказались, ну а если я путаю, всё равно посоветуйте хороший проверенный плагин для такой фунциональности)
И ещё: какой плагин используете для иконок шаринга статеями? Заранее спасибо)
Теги есть и работают, правда в статьях не показываются, но в остальном все также. Компонент, который используется... он есть только для Joomla 1.6. Дальше я доделывал сам. Вообще, на Joomla 2.5 нормальных компонентов тегов я не знаю. В Joomla 3.1 прекрасный компонент тегов от разработчиков встроен по умолчанию.
Шаринг статей: http://api.yandex.ru/share/
По умолчанию Iframe будет вырезан из редактора. Вставляйте без редактора.
http://floomby.ru/s1/rYShPE Как сделать рамку вокруг каждого поля. А то ни черта не видно куда писать. Если можно то поподробнее. Спасибо !
Спасибо за статью, очень Вы помогли!
Может, глупый вопрос, но как вы сделали отображение дополнительной информации сверху? Делала по вашему примеру, но у меня сначала идет "Форма обратной связи", а потом "Дополнительная информация". Из-за чего это может быть?
Заранее спасибо
подробнее - http://joomlaforum.ru/index.php?PHPSESSID=k2atr76qladhkqhutmjj4vtcg3&topic=221849.0;wap2
Вопрос на засыпку:как отравлять сообщения на два email ?
Ее там нет по умолчанию?
SMTP error from remote mail server after end of data:
host mxs.mail.ru [94.100.180.150]: 550 Message was not accepted -- it contains invalid headers. More specially, 'From:' header must match user you are sending mail from. See http://help.mail.ru/mail-help/mailer/popsmtp for details.
Я не могу дать ссылку, т.к. сайт пока на локальном сервере. Как сюда вставить скриншот?
Всё сделал как Вы учили, но под формой обратной связи не появляется рисунок капчи, а только надпись: CAPTCHA *
В чем проблема?
http://demo.joomlashine.com/joomla-templates/jsn_mico/pro/index.php?option=com_contact&view=contact&id=1:name&catid=16&Itemid=512
Спасибо!
Мне нравится то, что есть общий браузер, который позволяет оператору увидеть страницу так, как ее видит клиент, это позволяет гораздо быстрее
найти проблему и исправить ее. Кроме того, нету раздражающих всплывающих окон. Сами производители достаточно часто совершенствуют
RedHelper - есть и отдельный виджет RedConnect , с которым они полностью интегрируются и постоянно добавляется что-то новое.
Ппод формой обратной связи не появляется рисунок капчи, а только надпись: CAPTCHA *
Плагин reCAPTCHA включен - проверила. Подскажите, что делать?
Вот скрин.
p.s. спасибо за оперативную связь
Код:
<?php foreach ($this->items as $i => $item) : ?><tr class="<?php echo ($i % 2) ? "odd" : "even"; ?>">
<td class="item-num">
<?php echo $i; ?>
</td>
и
Код:
<th class="item-num"><?php echo JText::_('JGLOBAL_NUM'); ?>
</th>
Но php пока не сильна...
Если вы нашли участок кода верно, то просто удалите:
Код:
<td class="item-num"> <?php echo $i; ?> </td>и
Код:
<th class="item-num"> <?php echo JText::_('JGLOBAL_NUM'); ?> </th>Напоминаю, что такие изменения нужно вносить в макет, переопределенный в шаблон Joomla. В противном случае, изменения будут стерты при первом же обновлении Joomla.
Еще раз спасибо за оперативность))
Подскажите, пожалуйста, какой файл отвечает за всплывающие подсказки в стндр форме отправки письма.
Не понятно почему всплывает подсказка вида - ИмяВаше имя
В общем перерыл много чего, но ответа так и не нашел. Может тут, добрые люди помогут и добро им вернется
Заранее спасибо! Joomla 3.4.8
Изменить их содержание! Точнее решить проблему с тегами - которые во всплывающих подсказках, как бы не срабатывают - например при наведении на "ИМЯ*" - выпадает " Имя Ваше имя".
Спасибо!
Второй вариант - найти макет Joomla, который отображает данную страницу и отредактировать его, удалив всплывашки.
Третий вариант - скрыть всплывашки через CSS (стиль: display: none;)
После переопределения, теги во всплывающей подсказке остаются, слова- естественно переопределяются, что должно и происходить без проблем.
Суть убрать ТЕГИ. Заранее спасибо! Креплю фото!
В используемом вами шаблоне откройте файл index.php и перед закрывающим тегом body добавьте следующий код:
Код:
<script type="text/javascript">
jQuery(document).ready(function () {
// Tooltip
jQuery('.tooltip').tooltip({
html: true
});
});
</script>
Может есть еще какие-нибудь мысли?
Почему это не работает правильно "из коробки"? Скорее всего работает. Проблема может быть в том, что на сайте одновременно используется Mootools и jQuery фреймворки. Попробуйте поменять шаблон Joomla на один из стандартных и проверить подсказки. Не исправились ли они?
А вообще, стандартное решение следующее. Вам нужно посмотреть CSS-класс всплывающих подсказок, разобраться, какой скрипт за них отвечает, посмотреть документацию скрипта и добавить опцию активации html в tooltip'ах по аналогии с тем, как я писал выше. Для веб-разработчика это не сложно, но если вы не очень хорошо разбираетесь в коде, данные действия могут вызвать у вас проблемы.
Пробовал - протостар, бииз3 - так же без результата.
Вот каким образом наити скрипт который отвечает за Tooltip'ы?
Спасибо за ответы!)
Обязательное поле в контактной форме выводится с помощью - ПХП ЭХО $this->form->getInput('contact_name');
Подскажите, пжлста, какой конструкцией сделать чтобы внутри этой формы писался текст?
Скорее всего это "placeholder=" но как его применить???
Код:
.tooltip{display: none;}<br />@media screen and (min-width: 900px){<br />.tooltip { position: absolute; z-index: 1030; display: block; visibility: visible; font-size: 11px; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); } .tooltip.in { opacity: 0.8; filter: alpha(opacity=80); } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } .tooltip-inner { max-width: 200px; padding: 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }<br />}Данные css-стили необходимо вставить в ваш css файл, чтобы всплывающие подсказки отображались нормально.
В указанном примере используется дополнительное условие, чтобы подсказки выводились только на экранах с разрешением по ширине выше 900 пикселей (так же распространяется на ширину окна браузера).
Если вам не нужно это условие, то просто удалите код:
Код:
.tooltip{display: none;}<br />@media screen and (min-width: 900px){<br />и в конце:
Код:
}Давно уже решил просто "обойти" стороной это "всплывание)"
Но кто знает, возможно в будущем поможет подсказка!
CAPTCHA *, но не появляется код, который нужно ввести, а самое главное не приходят письма на электронный адрес. Что я могла сделать неправильно? Уже несколько раз пытаюсь начать с самого начала, а результат тот же. У нас сайт учреждения, обратная связь должна работать обязательно, помогите советом, пожалуйста
1) Вы зарегистрировались в сервисе reCaptcha и получили ключи?
2) Вы ввели ключи в настройках плагина?
3) В настройках плагина указана 2-я версия reCaptcha?
3) Плагин включен?
4) В общих настройках Joomla выбрана reCaptcha?
Если вы работаете на локальном сервере, то почта отправляться не будет.
Спасибо за Вам за интересный и полезный контент. Вы наверняка знаете об угрозе штрафных санкций за нарушение правил обработки персональных данных. Скажите пожалуйста, как под стандартной формой обратной связи Joomla 3.8.x (над кнопкой отправки сообщения) разместить флажок с текстом, нажатие на который позволит посетителю дать согласие на обработку персональных данных? Так, чтобы пока пользователь непоствит "галочку" на согласие, отправка сообщения была бы невозможной. Знаю, есть расширения с данной опцией, но хотелось бы обойтись стандартными.
1) Переопределяем макет формы контакта в шаблон Joomla: components/com_contact/views/contact/tmpl/default_form
2) Добавляем в переопределенном макете checkbox
3) Добаляем в переопределенном макета jQuery-скрипт, который будет при отправке формы сначала проверять то, что установлен чекбокс, и только потом отправлять форму.
Другой вариант - попробовать реализовать это же через дополнительные поля Joomla.
И главное. Подумайте хорошо, нужно ли это вам. Некоторые замеры показывают, что при добавлении такой галочки падает конверсия формы. Некоторые люди просто не хотят, чтобы их данные обрабатывали. У многих слово "обработка" ассоциируется с добавлением телефона или адреса электронной почты в спам-базы.
Я не думаю, что вам грозит штраф. Joomla не хранит в базе отправленные данные. Эти данные только приходят к вам на почту и никак не хранятся и не обрабатываются автоматически.
Или сделать не обязательными чтоб скрыть через css
Там это поле отключается в настройках.