Форма обратной связи для 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 следующий код:
XML код:
<?xml version="1.0" encoding="utf-8"?> <extension type="module" version="3.6" client="site"> <name>Feedback Form</name> <author>WebDesign</author> <creationDate>august 2016</creationDate> <copyright>Copyright (C) 2016. All rights reserved.</copyright> <license>Public License</license> <authorEmail><a href="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.<">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.<</a>;/authorEmail> <authorUrl>www.author.ru</authorUrl> <version>1.0.0</version> <description>Модуль для создания формы обратной связи на сайте.</description> <files> <filename module="mod_feedback_form">mod_feedback_form.php</filename> <folder>tmpl</folder> <filename module="mod_feedback_form">default.php</filename> <filename module="mod_feedback_form">success.php</filename> </files> <languages> <language tag="en-GB">en-GB.mod_feedback_form.ini</language> <language tag="en-GB">en-GB.mod_feedback_form.sys.ini</language> </languages> <config> <fields name="params"> <fieldset name="feedbackform" label="Настройки"> <field name="feedback-email" type="email" label="E-mail" description="Напишите почтовый ящик, на который хотите получать письма от пользователей." required="true" size="30" validate="email" /> <field name="feedback_title_form" type="text" default="" label="Заголовок в форме" description="Напишите заголовок, который будет отображаться в форме обратной связи перед полями." size="30" /> <field name="feedback_title" type="text" default="" label="Заголовок письма" description="Этот заголовок будет показан в приходящем на почту письме." required="true" size="30" /> <field name="feedback_success_message" type="text" default="" label="Удачная отправка" description="Сообщение о том, что письмо удалось отправить." required="true" size="300" /> </fieldset> </fields> </config> </extension>
В настройках написал четыре поля, остальное имеет стандартный вид любого подобного файла. Единственное что хотел упомянуть, это то, что тут указаны файлы перевода, хотя самим переводом заниматься не станем.
1.2 Файл mod_feedback_form.php
На данный момент mod_feedback_form.php является файлом обработчиком для формы. Это означает, что в нём находятся те функции, благодаря которым мы и будем принимать сообщение от пользователя, а потом отправлять на электронный ящик. Открыв mod_feedback_form.php, вставляем это:
PHP код:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); if(isset($_POST['mod_feedback_submitted'])) { // Если кнопка нажата, то отправить письмо $name = isset($_POST['feedback_name']) ? $_POST['feedback_name'] : 'Не указано' ; $phone = isset($_POST['feedback_phone']) ? $_POST['feedback_phone'] : 'Не указано' ; $formmessenge = isset($_POST['feedback_form_messenge']) ? $_POST['feedback_form_messenge'] : 'Не указано' ; $name = strip_tags($name); $phone = strip_tags($phone); $formmessenge = strip_tags($formmessenge); $message = "<h2>Текст сообщения:</h2>" ; // Текст письма на почте $message .= "<p><b>Имя:</b> $name" ; // Имя - если не заполнено, покажет "Не указано" $message .= "<p><b>Телефон:</b> $phone" ; // Телефон - если не заполнено, покажет "Не указано" $message .= "<p><b>Сообщение:</b> $formmessenge" ; // Сообщение - если не заполнено, покажет "Не указано" $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8"; // кодировка ставится в зависимости от сервера: utf-8 или windows-1251 // Отправляем письмо на уканаззный ящик с заголовком @mail($params['feedback-email'], $params['feedback_title'], $message, $headers) ; // Показывает сообщение об успешной отправке из файла success.php require( JModuleHelper::getLayoutPath( 'mod_feedback_form', "success" ) ); } else { // Если кнопка НЕ нажата, то показывать стандартную форму из файла default.php require( JModuleHelper::getLayoutPath( 'mod_feedback_form' ) ); } ?>
Всё подписал в самом коде, но для тех, кто не понимает, объясняю. Всё что между if и else как раз и формирует сообщение для отправки на почту. После того как письмо выслано на электронный ящик, вместо полей формы выводится содержимое из success.php (в нем сообщение об успешной отправки). Это происходит, если нажали кнопку «Отправить», в противном случае покажет стандартную форму из файла default.php. Очень важный момент, у меня на хостинге установлена кодировка utf-8, поэтому я поставил на 18 строчке именно её. У кого-то возможно надо будет заменить на windows-1251. Если будет стоять не та кодировка, то на почту будут приходить непонятные символы.
1.3 Шаблон default.php в папке tmpl
У нас уже готов обработчик и установочный файл, остаётся создать саму форму. default.php содержит макет модуля, количество полей для заполнения, а так же стили.
PHP код:
<div id="connect_form"> <form method="POST"> <div style="font-size: 11px; font-weight: bold; color: #949494;"><?php echo $params['feedback_title_form']?></div> <input type="text" name="feedback_name" placeholder="Ваше имя..." required='required' /> <input type="text" name="feedback_phone" placeholder="Ваш телефон..." required='required' /> <input type="text" name="feedback_form_messenge" placeholder="Сообщение..." required='required' /> <input type="submit" value="Отправить" name="mod_feedback_submitted" /> </form> </div>
Тут всё просто, три строчки для заполнения, заголовок и кнопка отправки. Для кнопки взял стандартные стили из Joomla, но вы вполне можете делать в этом файле всё что хотите.
1.4 success.php в папке tmpl
В success.php будет небольшой код:
PHP код:
<div style="font-size: 12px; font-weight: bold; color: #949494;"> <?php echo $params['feedback_success_message']?> </div>
Этот файл отвечает за вывод сообщения при успешной отправке письма на почту. Но я не стал писать слова прямо в нём, а добавил функцию 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 (то есть локально) имейте в виду, что модуль не будет отправлять письма на ящик расположенный в глобальной паутине. Но как только вы загрузите его на сервер и установите, всё будет работать как надо.
Соседние материалы | ||||
Стильное портфолио на jQuery с Lightbox эффектом | Дополнительный пункт меню в панели управления Joomla |
Комментарии