MODx: Делаем удобную форму обратной связи
На каждом нормальном сайте у пользователя должна быть возможность связаться с владельцем сайта. Я думаю, это всем понятно :). Для обратной связи можно указать просто адрес электронной почты, но не всегда хочется показывать всем подряд свой адрес, да и боты по сбору email’ов не спят. В таких случаях нам на помощь придет форма обратной связи. Пользователь заполняет её прямо на сайте, жмет кнопку отправить и всё — письмо уже у нас на почте.
Сейчас я делаю сайты на CMS MODx и соответсвенно форму обратной связи буду писать для неё. Что необходимо получить:
- поля проверяются «на лету» (по мере заполнения пользователем формы);
- использование каптчи;
- возможность отправить сообщение, только когда все поля заполнены верно.
Для работы с формой воспользуемся сниппетом eForm, для проверки полей на лету будем использовать JavaScript. Итак, приступим.
Для начала создадим новый документ, в котором у нас будет отображаться форма обратной связи. Назовем его «Обратная связь» и в содержимое запишем следующее:
<h1>Обратная связь</h1> [!nikoFeedBack!]
Последняя строчка — некэшируемый вызов сниппета nikoFeedBack, который и отвечает за вывод нашей формы.
Теперь создаем новый сниппет: название — «nikoFeedBack», описание — «Форма обратной связи».
Код сниппета:
<?php
function fbValidateName($value) { return strlen($value)>=5; }
function fbValidateText($value) { return strlen($value)>=15; }
$modx->regClientStartupScript($modx->config['site_url'].'assets/snippets/nikoFeedBack/validate.js');
$outForm = $modx->runSnippet(
"eForm",
array(
"formid" => "FeedBackForm",
"to" => "admin@site.ru",
"tpl" => "eFBForm",
"report" => "eFBReport",
"thankyou" => "eFBThanks",
"from" => "[+fbEMail+]",
"fromname" => "site.ru",
"subject" => "Посетители сайта пишут",
"vericode" => "1"
)
);
echo $outForm;
?>
В начале сниппета задается две функции: fbValidateName и fbValidateText. Они отвечают за проверку корректности введенных данных полей «Имя» и «Текст сообщения». Откуда эти функции вызываются — опишу позднее.
Затем с помощью стандартной функции в MODx regClientStartupScript добавляем скрипт validate.js (в нем будут храниться скрипты, отвечающие за проверку введенных значений на лету) для загрузки внутрь тега <head>.
Далее вызывается сниппет eForm, который используется для работы с формами в MODx. При вызове сниппета передаем ему следующие параметры:
- formid – Идентификатор формы, который используется при отправке данных (FeedBackForm).
- to - Адрес Email на который будет послана информация. Можно использовать несколько адресов разделяя их запятой (,). Если не указано, то будет использован системный адрес. В данном случае информация будет отправлена на адрес admin@site.ru.
- tpl - Название чанка (не число) или идентификатор документа (число) для используемого шаблона. Наш чанк с формой будет называться «eFBForm».
- report - Название чанка (не число) или идентификатор документа (число) для шаблона отчета. Это шаблон для письма, которое будет отправлено с сайта к нам на почту, у нас он называется «eFBReport».
- thankyou - Название чанка (не число) или идентификатор документа (число) для используемого шаблона сообщения выводимого пользователю после отправки данных формы. Наш чанк с благодарностью пользователю за оставленное сообщение будет называться «eFBThanks».
- from - Устанавливает адрес отправителя письма. В качестве адреса устанавливаем плейсхолдер [+fbEMail+], который будет содержать адрес электронной почты пользователя.
- fromname - Устанавливает имя отправителя письма. Пишем название нашего сайта, чтобы видеть сразу откуда письмо.
- subject - Тема письма. Для примера поставим «Посетители сайта пишут».
- vericode - Включает использование каптчи в форме.
Перейдем к чанкам. Для начала создадим чанк eFBForm, содержащий форму.
<p>Пишите сообщения и не сомневайтесь - вы будете услышаны!</p> <div class="fbForm"> <p><span style="color:#900;">[+validationmessage+]</span></p> <form method="post" action="[~[*id*]~]" id="FeedBackForm"> <div class="form"> <div class="name">Ваше имя и фамилия</div> <div class="error" id="fbNameError"></div> <div class="element"><input type="text" name="fbName" id="fbName" eform="Имя::1:Должно содержать не менее 5 символов.:#FUNCTION fbValidateName" value="[+fbName+]"></div> <div class="name">Адрес электронной почты</div> <div class="error" id="fbEMailError"></div> <div class="element"><input type="text" name="fbEMail" id="fbEMail" eform="EMail:email:1:EMail » Некорректный адрес электронной почты." value="[+fbEMail+]"></div> <div class="name">Текст сообщения</div> <div class="error" id="fbTextError"></div> <div class="element"><textarea name="fbText" id="fbText" eform="Текст сообщения:html:1:Должен содержать не менее 15 символов.:#FUNCTION fbValidateText" cols="40" rows="5">[+fbText+]</textarea></div> <table cellpadding="0" cellspacing="0" class="captcha-test"> <tr> <td> <div class="name">Защита от спама</div> <div class="captcha"><img src="[+verimageurl+]" alt="Проверочный код" border="1"></div> </td> <td> <div class="name">Код на картинке:</div> <div class="element"><input type="text" name="vericode" id="vericode" value=""></div> </td> </tr> </table> <div class="submit"><input type="submit" name="fbSubmit" id="fbSubmit" value="Отправить"></div> </div> </form> </div>
[+validationmessage+] - этот плэйсхолдер выводит ошибки, если данные, отправленные на сервер, были некорректными или отправка сообщения не удалась.
[+verimageurl+] - плэйсхолдер содержит адрес картинки с каптчей. Для проверки каптчи — необходимо использовать INPUT c именем «vericode».
Пустые слои с идентификаторами <имя поля>Error — используются для вывода ошибок при заполнении полей, когда проверка данных проводится «на лету».
Как вы заметили поля формы имеют дополнительный параметр efrom. Он используется для настройки встроенного в eForm анализатора, определяющего формат и тип данных с соответствующей проверкой каждого поля. Базовый вид параметра efrom следующий:
[description/title]:[datatype]:[required]:[validation message]:[validation rule]
description/title — Название (описание) поля.
datatype — Тип данных.
required – Обязательно ли заполнение этого поля.
validation message — Сообщение при неудачной проверке значения поля.
validation rule — Правило проверки значения поля.
Вот здесь мы и используем функции fbValidateName и fbValidateText, описанные в сниппете nikoFeedBack, для проверки корректности значений полей «Имя» и «Текст сообщения».
Стили используемые в форме:
* { padding : 0px; margin : 0px; border: none; }
BODY {
color: #252525;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.fbForm .form { padding-left: 40px; }
.fbForm .name { padding-top: 12px; font-size: 8pt; color: #7d7d7d; }
.fbForm .element { padding-top: 2px; }
.fbForm .element INPUT, .fbForm .element TEXTAREA {
border: 1px solid #ccc;
background-color: #E6EFF6;
font-size: 10pt;
color: #2C5883;
}
.fbForm INPUT#fbName,
.fbForm INPUT#fbEMail {
background-image: url(images/icon_form.gif);
background-repeat: no-repeat;
width: 250px;
padding: 4px 0px 4px 25px;
}
.fbForm INPUT#fbName { background-position:3px -3px; }
.fbForm INPUT#fbEMail { background-position:3px -33px; }
.fbForm TEXTAREA#fbText {
padding: 4px 4px 4px 25px;
width: 425px;
font-family: Tahoma;
background: #E6EFF6 url(images/icon_form.gif) no-repeat 3px -93px;
}
.fbForm .captcha-test TD { vertical-align: top; padding-right: 15px; }
.fbForm .captcha { padding-top: 3px; }
.fbForm .captcha IMG { border: 1px solid #ccc; }
.fbForm INPUT#vericode { width: 130px; padding: 4px 0px 4px 25px; background: #E6EFF6 url(images/icon_form.gif) no-repeat 3px -63px; }
.fbForm .submit { padding-top: 15px; }
.fbForm INPUT#fbSubmit {
border: 1px solid #ccc;
background-color: #f7f7f7;
cursor: pointer;
padding: 2px 15px 2px 15px;
}
.fbForm .error { font-size: 8pt; color: red; display: none; }
Создадим чанк eFBThanks, который используется после успешной отправки сообщения. Тут всё просто:
<p>Cообщение отправлено.</p> <p>Благодаря вашей помощи проект может стать лучше!</p>
Теперь чанк eFBReport, который является шаблоном для отправляемого письма:
<p>Поступило сообщение через обратную связь сайта <b>site.ru</b>.</p> <p> [+postdate+] <br> [+fbName+] ([+fbEMail+]) пишет: </p> ---------------------------------------------- <p> [+fbText+] </p> ---------------------------------------------- <p>Для ответа можно использовать эту ссылку: <a href="mailto:[+fbEMail+]?subject=RE: site.ru">[+fbEMail+]</a></p>
В чанке используются следующие плейсхолдеры: [+postdate+] - дата отправки сообщения; [+fbName+], [+fbEMail+], [+fbText+] - соответствующие поля формы.
На этом основную часть нашей формы мы сделали. Она уже вполне работоспособна. Корректность введенных данных проверяется на сервере. Теперь добавим в нашу форму немного динамичности. Что мы сделаем:
- проверка корректности введенных значений «на лету»;
- кнопка отправить будет доступна только когда все поля формы заполнены верно (за исключением каптчи — это проверяется на сервере всегда).
Создаем папку nikoFeedBack в папке assets/snippets/. Теперь в созданной папке создаем файл validate.js. Содержание файла следующее:
var fbNowShowError; // Выводить ли при проверки поля ошибки
function fbIsFormValid() {
var formFeedBack = document.getElementById("FeedBackForm");
var result = true;
for (var i=0; i < formFeedBack.elements.length; i++) {
if (typeof formFeedBack.elements[i].valid == "boolean") {
result = result && formFeedBack.elements[i].valid;
}
}
return result;
}
function fbValidateField(txtField) {
var fbNameError = document.getElementById("fbNameError");
var fbEMailError = document.getElementById("fbEMailError");
var fbTextError = document.getElementById("fbTextError");
// Проверка имени
if (txtField.name == "fbName") {
if (txtField.value.length < 5) {
if (fbNowShowError) {
fbNameError.style.display = "block";
fbNameError.innerHTML = "Имя должно содержать не менее 5 символов";
}
txtField.valid = false;
} else {
if (fbNowShowError) {
fbNameError.style.display = "none";
}
txtField.valid = true;
}
}
// Проверка email
if (txtField.name == "fbEMail") {
var re = /^[\.\-_A-Za-z0-9]+?@[\.\-A-Za-z0-9]+?\.[A-Za-z0-9]{2,6}$/;
if (!re.test(txtField.value)) {
if (fbNowShowError) {
fbEMailError.style.display = "block";
fbEMailError.innerHTML = "Некорректный адрес электронной почты";
}
txtField.valid = false;
} else {
if (fbNowShowError) {
fbEMailError.style.display = "none";
}
txtField.valid = true;
}
}
// Проверка текста сообщения
if (txtField.name == "fbText") {
if (txtField.value.length < 15) {
if (fbNowShowError) {
fbTextError.style.display = "block";
fbTextError.innerHTML = "Текст сообщения должен содержать не менее 15 символов";
}
txtField.valid = false;
} else {
if (fbNowShowError) {
fbTextError.style.display = "none";
}
txtField.valid = true;
}
}
var fbSubmit = document.getElementById("fbSubmit");
if (fbIsFormValid()) {
fbSubmit.disabled = false;
fbSubmit.style.cursor = 'pointer';
} else {
fbSubmit.disabled = true;
fbSubmit.style.cursor = 'default';
}
}
function fbValidateFieldOnChange(oEvent) {
fbNowShowError = true;
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
fbValidateField(txtField);
}
function fbValidateFieldOnKeyUp(oEvent) {
fbNowShowError = false;
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
fbValidateField(txtField);
}
window.onload = function () {
var fbName = document.getElementById("fbName");
var fbEMail = document.getElementById("fbEMail");
var fbText = document.getElementById("fbText");
var fbVeriCode = document.getElementById("vericode");
var fbSubmit = document.getElementById("fbSubmit");
fbSubmit.disabled = true;
fbSubmit.style.cursor = 'default';
fbName.valid = false;
fbEMail.valid = false;
fbText.valid = false;
fbName.onchange = fbValidateFieldOnChange;
fbEMail.onchange = fbValidateFieldOnChange;
fbText.onchange = fbValidateFieldOnChange;
fbName.onkeyup = fbValidateFieldOnKeyUp;
fbEMail.onkeyup = fbValidateFieldOnKeyUp;
fbText.onkeyup = fbValidateFieldOnKeyUp;
fbNowShowError = true;
if (fbName.value != '') fbValidateField(fbName);
if (fbEMail.value != '') fbValidateField(fbEMail);
if (fbText.value != '') fbValidateField(fbText);
fbNowShowError = false;
fbVeriCode.value = '';
fbValidateField;
};
Кратко опишу, что делает каждая их функций:
fbIsFormValid — проверяет все ли поля формы заполнены правильно.
fbValidateField — проверяет правильно ли заполнено поле.
Автоматически определяется тип поля — и проводится соответствующая проверка.
По окончании проверки поля проверяется — правильно ли заполнены остальные поля,
и если правильно — то кнопка «Отправить» становится доступной,
если не правильно — то недоступной.
fbValidateFieldOnChange — функция, вызываемая при изменении поля
(после потери им фокуса). Сама функция — вызывает функцию проверки поля.
fbValidateFieldOnKeyUp — функция, вызываемая каждый раз при
изменении поля. Сама функция — вызывает функцию проверки поля.
Разные функции на события OnChange и OnKeyUp вызываются для того, чтобы задать - выдавать ли ошибку при проверке или нет. То есть, когда объект не потерял фокус, но произошло его изменение (событие OnKeyUp) — производится проверка данного поля и всех остальных полей для того, чтобы в случае правильности заполнения сделать активной кнопку «Отправить», но при этом ошибки не выводятся, либо продолжают показываться. В случае же когда поле теряет фокус (событие OnChange) помимо проверки — показывать или нет кнопку «Отправить» - также показывается сообщение об ошибке в случае некорректных данных или исчезает ошибка, если данные введены верно. Довольно запутанно, но это необходимо, например, для того, чтобы при первоначальном заполнении полей — сразу не выскакивали ошибки (если разделения не будет, то как только мы начнем вводить к примеру Имя, то сразу вылезет ошибка).
В конце с помощью конструкции window.onload = function () { … } после загрузки страницы задаем обработчики событий для полей и сразу проверяем все поля на валидность. Плюс данного способа в том, что форма остаётся рабочей даже в том случае, если у пользователя отключен JavaScript.
Всё! Форма обратной связи с проверкой данных «на лету» готова. Пользуйтесь :).
В приложенном архиве лежит файл стилей, изображения, используемые для оформления, файлы с чанками eFBForm, eFBReport, eFBThanks, файл со сниппетом nikoFeedBack и файл с JS-скриптами validate.js.
Приложение к статье 202 (modx_feedback.zip, ~5.5kb)
UPD: Отправление сообщения в CMS
Для того, чтобы отправлять сообщения в кмс, нужно внести немного изменений в сниппет nikoFeedBack.
Добавить функцию:
function fbSubmitMessage($fields) {
global $modx;
$txt = $modx->getChunk(’eFBReport’);
foreach ($fields as $key => $val) {
$txt = str_replace(’[+'.$key.'+]‘,$val,$txt);
}
$modx->sendAlert(’alert’,'admin’,1,$fields[subject].’ (’.$fields[fbName].’)',$txt,1);
return true;
}
И добавить параметры noemail=1 (чтобы на почту не отправлялось) и eFormOnMailSent=fbSubmitMessage (чтобы запустилась наша функция отправки в кмс) при вызове eForm, те в итоге вот такой вызов:
$outForm = $modx->runSnippet( "eForm", array( "formid" => "FeedBackForm", "to" => "admin@site.ru", "tpl" => "eFBForm", "report" => "eFBReport, "thankyou" => "eFBThanks", "from" => "[+fbEMail+]", "fromname" => "site.ru", "subject" => "Посетители сайта пишут", "vericode" => "1", "eFormOnMailSent" => "fbSubmitMessage", "noemail" => "1" ) );
icq# 207898641
skype: nikovrn
Комментарии
Очень подробно и главное работает.
Спасибо за подробное описание, вроде все получилось, а не подскажите как передать значения если в форме используется следующее поле с выпадающим списком:
Почта России
DHL
Pony Express
ведь в поле input значение передается через value="[+fbEMail+]" например, а в теге select такого нет.
Nikola, да при использовании SELECT - необходимо прописывать параметр SELECTED для нужного OPTION. Мне кажется здесь для вывода селекта нужно использовать сниппет, которые в зависимости от значения будет ставить в нужном месте SELECTED.
Не совсем представляю как это сделать, а нельзя передать параметр через name в теге selеct? например - name="[+usluga+]" ? Спасибо что прочитали мое сообщение.
Nikola, к сожалению так сделать нельзя :(
А можно ли добавить к этой форме возможность отправки файла?Я в модексе новичок,поэтому если это возможно, то распишите подробнее пожалуйста!!!
как сделать, чтобы отправить была активной только после проверки каптчи
не работает, все проверяет, но ничего не отправляет и сообщение на отправку не выводит
Если я правильно понял хочется добавить динамические поля для своей анкеты:
Это делается приблизительно следующим образом:
Я на примере добавления городов из TV
В шаблоне самой формы пишем:
...
[+display_tv_towns+]
...
Перед вызовом формы пишем
$modx->runSnippet("FormOptions");
в вызове формы добавляем:
"eFormOnBeforeFormParse"=>"formGetOptions"
А сам сниппет FormOptions делаем следующим:
Ну вот что-то типа этого. Не претендую конечно на медаль но если комуто поможет только буду рад.
А сам сниппет FormOptions делаем следующим:
if( !function_exists('formGetOptions') ) {
function formGetOptions(&$fields,&$templates){
global $modx;
$str="";
foreach($doc as $item)
{
if(is_array($item))
{$str.="{$item['pagetitle']}";}
else $str.="{$item}";
}
$templates['tpl']=str_replace('[+display_tv_towns+]',$str,$templates['tpl']);
return '';
сори первый раз вписал с тегом php видно вырезало
Форма хорошая, все рисует, все проверяет и т.д. Но отправляет только когда отправитель указывает как свой обратный адрес определенный е-майл, а именно тот самый адрес что указан как емайл адрес админа сайта
Я вообще не понял, а где во всем этом механизме указано как собственно отправляется почта? где можно указать smtp сервер, логин и пароль пользователя от чьего имени отправляется почта и ит.д.?
Parse error: syntax error, unexpected '[' in /home3/u75149/comphelpspbru/www/manager/includes/document.parser.class.inc.php(770) : eval()'d code on line 8
Вот что выдает вместо формы. Что это может значить? Где рыться?