<img src="image.jpg" width="100%" height="300" alt="">

... то картинка будет растягиваться не пропорционально. Для того, чтобы это исправить используем слой-обертку:

<div class="b-img-wrap">
	<img src="image.jpg" width="100%" alt="">
</div>

Стили:

.b-img-wrap {
	height: 300px;
	overflow: hidden;
}

Как вы заметили, у изображение убрали параметр height, те высота изображения будет высчитываться браузером автоматически и изображение будет пропорционально изменять свои размеры. Для того, чтобы сохранилась фиксированная высота - задаём её слою-обёртке и присваиваем ему свойство overflow: hidden;. Таким образом всё, что выходит за пределы слоя будет скрываться.

Метод масштабирования изобажения

Во всех популярных браузерах кроме Internet Explorer ниже 8й версии используется качественный бикубический метод масштабирования изображения. А вот IE6 и IE7 используют метод копирования ближайшего пикселя - поэтому масштабированное изображение в этих браузерах получается менее качественным. С IE6 мы ничего не сделаем, а вот в IE7 мы можем решить проблему с помощью CSS-свойства -ms-interpolation-mode. Это свойство определяет каким способом масштабировать изображения и может принимать одно из следующих значений:

• nearest-neighbor (метод копирования ближайшего пикселя) – по умолчанию
• bicubic (бикубический метод)

Соответственно используем CSS-хак для IE7:

*+html .b-img-wrap IMG { -ms-interpolation-mode: bicubic; }

Пример к статье

Скачать пример ¹¹ (img_100p_fix_height.zip, ~352Kb) | Посмотреть пример

Работоспособность была проверена в следующих браузерах:

• Mozilla Firefox 3.5
• Opera 9.64
• Safari 4 (win)
• Internet Explorer 6, 7, 8

То, что в итоге у нас получится можно посмотреть здесь.

Для начала скачиваем последнюю версию jQuery (http://jquery.com/) и плагин jCarousel (http://sorgalla.com/jcarousel/). На момент написания статьи последние версии jQuery 1.3.2 и jCarousel 0.2.3.

Подключаем jQuery и jCarousel к нашей странице. Из jCarousel нам понадобится сам файл плагина (jquery.jcarousel.pack.js) и файл со стилями (jquery.jcarousel.css). Теперь все необходимые инструменты у нас есть. Создаём список новостей:

<div class="b-news">
	<ul>
		<li>
			<div class="picture"><img src="images/news1.jpg" width="300" height="200" alt=""></div>
			<div class="title">Новость номер 1</div>
			<div class="desc">Краткий анонс первой новости</div>
		</li>
		...
		<li>
			<div class="picture"><img src="images/news8.jpg" width="300" height="200" alt=""></div>
			<div class="title">Новость номер 8</div>
			<div class="desc">Краткий анонс восьмой новости</div>
		</li>
	</ul>
</div>

Инициализация карусели довольно простая:

$(document).ready(function(){
	$('.b-news UL').jcarousel({ scroll: 1 });
});

Параметр scroll определяет сколько блоков прокручивать за раз.

Теперь пропишем стили для карусели. Нам нужно задать width: 100% для контейнера, определить размеры элементов, а также местоположение и внешний вид кнопок управления (прокрутка вперед/назад). В коде даны комментарии:

/* Растягиваем контейнер на 100% по ширине */
.b-news .jcarousel-container-horizontal { width: 100%; }
.b-news .jcarousel-clip-horizontal { width: 100%; }

/* Задаем размер одного блока */
.b-news .jcarousel-item, .b-news .jcarousel-list LI { width: 310px; height: 250px; }

/* Задаем внешний вид и расположение кнопок управления */
.b-news .jcarousel-next-horizontal {
	position: absolute;
	top: 80px;
	right: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: transparent url(../images/btn_next.gif) no-repeat 0 0;
}
.b-news .jcarousel-next-disabled-horizontal,
.b-news .jcarousel-next-disabled-horizontal:hover,
.b-news .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -30px 0; }
.b-news .jcarousel-prev-horizontal {
	position: absolute;
	top: 80px;
	left: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: transparent url(../images/btn_prev.gif) no-repeat 0 0;
}
.b-news .jcarousel-prev-disabled-horizontal,
.b-news .jcarousel-prev-disabled-horizontal:hover,
.b-news .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -30px 0; }

Осталось навести красивости и получим отличную карусель для новостей.

Пример к статье

Скачать пример ¹⁷² (jcarousel_100p.zip, ~160Kb) | Посмотреть пример

Работоспособность была проверена в следующих браузерах:

• Mozilla Firefox 3.5
• Opera 9.64
• Safari 4 (win)
• Internet Explorer 6, 7, 8

Как обычно сначала немного погуглил - готового решения не нашел. В общем по кусочкам собрал вот такой вот простенький скриптик:

<?
 
/*                                                      */
/*  СКРИПТ ДЛЯ РЕКУРСИВНОЙ СМЕНЫ ПРАВ НА ФАЙЛЫ И ПАПКИ  */
/*                                                      */
/*   Автор: Предводителев Сергей (Niko)                 */
/*   http://predvoditelev.ru                            */
/*                                                      */
/*   27.04.2009                                         */
/*                                                      */
 
 
// Папка, в которой находятся файлы и папки для изменения прав
$PARENT_DIR = '/home/*****';
 
$FILE_MODE = 0644; // права на файлы
$DIR_MODE = 0755; // права на папки
 
function chmodex($file) {
global $PARENT_DIR;
global $FILE_MODE;
global $DIR_MODE;
    
    if ( file_exists($file) ) {
        if ( is_dir($file) ) {
            if ( !($file==$PARENT_DIR) ) { chmod( $file, $DIR_MODE ); }
            $handle = opendir( $file );
            while( $filename = readdir($handle) )
            if ( $filename != "." && $filename != ".." ) chmodex( $file."/".$filename );
                closedir($handle);
        } else {
            chmod( $file, $FILE_MODE );
        }
    }
}
 
chmodex($PARENT_DIR);
 
?>

Для использования скрипта необходимо:

• Открыть файл chmodex.php (см. приложенный архив).
• Указать $PARENT_DIR - это путь к папке, в которой необходимо изменить права доступа.
• Указать $FILE_MODE и $DIR_MODE - это права доступа, которые необходимо установить для файлов и папок соответственно.
• Залить скрипт chmodex.php в папку, в которой необходимо поменять права доступа, те в папку, которую указали в $PARENT_DIR. Права доступа самой папки $PARENT_DIR измененены не будут.
• Через браузер запустить chmodex.php.
• Если после запуска скрипта - белый экран, то значит всё прошло успешно :).

Скачать скрипт ³⁷⁴ (chmodex.zip, ~ 0.6 kb)

Скачал плагин Popularity Contest c оффициального сайта. На момент написания поста последняя версия - 1.3b3 от 16 декабря 2007 года. Как видим плагин давно уже не обновлялся. Установка по идее довольно простая:

1. Копируем файл popularity-contest.php в папку \wp-content\plugins\.
2. Активировать плагин в разделе Плагины панели управления WordPress.

Но при активации плагина WordPress выдавал следующую ошибку: “Плагин не может быть активирован, поскольку он вызвал фатальную ошибку“.

Немного погуглив нашел решение:

1) Открываем popularity-contest.php и заменяем строчку 59:

require('../../wp-blog-header.php');

на

require('../wp-blog-header.php');

2) Необходимо создать таблицы в базе данных. Вот код:

CREATE TABLE IF NOT EXISTS `wp_ak_popularity` (
`post_id` int(11) NOT NULL,
`total` int(11) NOT NULL,
`feed_views` int(11) NOT NULL,
`home_views` int(11) NOT NULL,
`archive_views` int(11) NOT NULL,
`category_views` int(11) NOT NULL,
`single_views` int(11) NOT NULL,
`comments` int(11) NOT NULL,
`pingbacks` int(11) NOT NULL,
`trackbacks` int(11) NOT NULL,
`last_modified` datetime,
KEY `post_id` (`post_id`)
) ENGINE=MyISAM;

CREATE TABLE IF NOT EXISTS `wp_ak_popularity_options` (
`option_name` varchar(50) NOT NULL,
`option_value` varchar(50) NOT NULL
) ENGINE=MyISAM;

Примечание. Если вы используете в БД префикс для таблиц отличный от wp_, то при создании таблиц замените префиксы на используемые вами.

После этих действий плагин должен активироваться и работать без проблем.

Форум Vanilla, конечно, довольно интересный и очень удобный, но ещё достаточно сыроват. Поэтому приходится некоторые ошибки по ходу находить и самому править. Собственно обнаружилась ошибка в проверке на максимальную длину названия темы в Vanilla. Описываемая ошибка у меня проявилась в версии 1.1.5a.

Итак в файле [путь к форуму]/appg/settings.php есть такой параметр $Configuration['MAX_TOPIC_WORD_LENGTH'], который вероятно и должен отвечать за максимальную длину названия темы. Но как не менял я этот параметр - результат был один и тот же: ограничение всегда было в 100 символов.

Стоит сказать, что определил-то я это не сразу :). Ошибка показывается, не как обычно что-то вроде “Превышено ограничение в N символов”, а показывается на сколько символов длина заголовка превышает ограничение, поэтому у меня число было всегда разным, а перевод был не правильным: "Заголовок темы превышает N символов". Я перевел для себя так (см. файл [путь к форуму]/languages/[название языка]/definitions.php):

$Context->Dictionary['ErrInputLength'] = '//1 слишком длинный. Сократите его на //2 символ(а, ов).';

Но собственно к ошибке с проверкой длинны. Раз ограничение всегда было одно - в 100 символов, значит оно где-то жестко прописано, вместо того, чтобы использовать наш параметр. Порывшись в исходниках, обнаружилось проблемное место. Итак, чтобы исправить этот глюк открываем файл [путь к форуму]/library/Vanilla/Vanilla.Class.DiscussionManager.php и заменяем в нём строку 448:

Validate($this->Context->GetDefinition('DiscussionTopicLower'), 1, $Name, 100, '', $this->Context);

на строку:

Validate($this->Context->GetDefinition('DiscussionTopicLower'), 1, $Name, $this->Context->Configuration['MAX_TOPIC_WORD_LENGTH'], '', $this->Context);

Теперь проверка на длину строки будет работать корректно.

В шаблоне также ограничение на длину прописано жестко, то есть параметр maxlength=”100″. Заменим его. Открываем файл [путь к форуму]/themes/discussion_form.php и заменяем в нем:

<input id="txtTopic" type="text" name="Name" class="DiscussionBox" maxlength="100" value="'.$Discussion->Name.'" />

на

<input id="txtTopic" type="text" name="Name" class="DiscussionBox" maxlength="'.$this->Context->Configuration['MAX_TOPIC_WORD_LENGTH'].'" value="'.$Discussion->Name.'" />

Вот теперь вроде бы всё. Ошибка исправлена полностью.

PS Много информациии по Vanilla вы найдете здесь: Русскоязычное сообщество Vanilla forum.

Продолжаем расширять функциональность форума Vanilla. Изучая админку форума я так и не нашел - где же посмотреть список зарегестрированных пользователей. К сожалению, авторы не посчитали эту возможность настолько важной, чтобы включить её в базовую версию форума. Раз нет в базовой версии, значит должно быть расширение дающее такую возможность. И оно нашлось - MembersList…

Данное разрешение добавляет вкладку “Список пользователей” в основное меню и соответственно позволяет в удобном виде просмотреть список зарегистрированных пользователей.

Скачать расширение MembersList можно отсюда: http://lussumo.com/addons/index.php?PostBackAction=AddOn&AddOnID=355 (на момент написания заметки актуальная версия - 1.2).

Скаченный архив разархивируем и перед тем как закачать расширение на сервер, переведем его на русский язык. Для этого открываем файл MembersList/conf/language.php и переводим на русский язык соответствующие значения. У меня получилось вот так:

<?php
// Language Dictionary
 
$Context->Dictionary['Members'] = 'Список пользователей'; // Tab title
$Context->Dictionary['AvatarDefinition'] = 'Аватар'; // Avatar Cell Title
$Context->Dictionary['Username'] = 'Ник'; // Username Cell Title
$Context->Dictionary['NameTag'] = 'Имя, фамилия'; // Name & Lastname Cell Title
$Context->Dictionary['Visit'] = 'Посещения'; // Total Visit Count Title
$Context->Dictionary['Role'] = 'Роль'; // Role Description Cell Title
$Context->Dictionary['Email'] = 'E-mail'; // Email Cell Title
$Context->Dictionary['Posts'] = 'Сообщения'; // Total Posts Title
$Context->Dictionary['Registered'] = 'Дата регистрации'; // Registration Date Title
 
$Context->Dictionary['Gizli'] = 'Secret'; // Secret Fields
$Context->Dictionary['notAvail'] = 'N/A'; // Not Available Fields (empty fields)
 
// denfinitions for Admin Panel
$Context->Dictionary['permission_view'] = 'Показывать дополнительные вкладки (Список пользователей)';
$Context->Dictionary['permission_view_secret'] ='Разрешить смотреть скрытые данные пользователей (Имя и e-mail)';
 
?>

Не забываем, что сохранять файл надо в кодировке UTF-8.

Теперь закачиваем папку MembersList на сервер в директорию [путь к форуму]/extensions/. Далее на форуме заходим в настройки - дополнения и ставим галочку напротив расширения MembersList.

Расширение мы активировали, осталось только указать, какие группы пользователей могут смотреть списки зарегистрированных пользователей. Для этого служат параметры Показывать дополнительные вкладки (Список пользователей) и Разрешить смотреть скрытые данные пользователей (Имя и e-mail) (см. настройки - полномочия).

PS Описанные в посте действия производились над форумом Vanilla версии 1.1.5a.

На одном из своих проектов решил установить форум. После непродолжительных раздумий остановил свой выбор на легковесном и жутко удобном форуме Vanilla (на момент написания поста последняя версия 1.1.5a).

В базовой версии форума - только самое необходимое. Дополнительная функциональность делается с помощью расширения для форума.

Первым расширением, которое мне понадобилось - был визуальный редактор для написания сообщения в форум. Выбор был сделан в пользу старого доброго TinyMCE. Собственно далее следует инструкция по установке TinyMCE на форум Vanilla.

Во-первых, качаем сам TinyMCE отсюда: http://tinymce.moxiecode.com/download.php (нам необходим Main package, на момент написания поста последняя версия - 3.2.1). В архиве есть папка jscripts - только она нужна нам из архива, документацию и примеры можно смело удалить :). Закачиваем папку jscripts на сервер в директорию [путь к форуму]/js/tinymce/ (папку tinymce необходимо создать).

Теперь скачиваем расширение для Vanilla, позволяющее установить TinyMCE в качестве редактора, отсюда: http://lussumo.com/addons/index.php?PostBackAction=AddOn&AddOnID=179 (на момент написания поста последняя версия - 1.4.1). Распаковываем содержимое архива на сервер в директорию [путь к форуму]/extensions/.

Всё, осталось только активировать дополнение. Для этого заходим в настройки форума - дополнения и ставим галочку напротив расширения Tinymce.

Просматривая свой сайт, подумалось мне - а зачем мне смотреть рекламу на своём сайте? Пускай посетители видят рекламу, а я что-нибудь полезное посмотрю :). Например, какую-нибудь статистику. Что я и сделал.

Задача: если администратор залогинился на сайте, то при просмотре вместо чанка с рекламой показывать чанк со статистикой.

Создаем простой сниппет ad_or_stat:

<?php
    if ($_SESSION['mgrShortname'] == 'admin') {
        echo $modx->getChunk("tpl_admin-stat");
    } else {
        echo $modx->getChunk("tpl_begun-code");
    }
?>

В переменной $_SESSION['mgrShortname'] содержится логин пользователя. Соответственно смотрим, если логин - “admin”, то выводим чанк со статистикой tpl_admin-stat; если же логин какой-то другой или это просто посетитель - выводим чанк с рекламой tpl_begun-code (в моем случае - это блок бегуна).

Чанк tpl_admin-stat у меня выглядит следующим образом:

<div class="admin-stat">
	<div class="title">Статистика</div>
	<div class="stat">
		Запросы к БД: <b>[^q^] ([^qt^])</b><br />
		Время работы скриптов: <b>[^p^]</b><br />
		Время генерации страницы: <b>[^t^]</b><br />
		Источник: <b>[^s^]</b>
	</div>
</div>

Теперь просто вместо вызова чанка с рекламой в шаблоне - вызываем наш сниппет: [!ad_or_stat!] и вместо рекламы - наблюдаем статистику.

Захотелось вот на одном сайте сделать форму, чтобы пользователи могли оставлять комментарии. Сайт, как понятно из названия, на MODx. Для комментирования решил использовать сниппет Jot. На данный момент самая свежая версия - 1.1.4. Скачал, установил… вроде работает :). Но в дальнейшем появился один глюк, не позволяющий в полной мере использовать регулярные выражения для проверки на правильность ввода данных, но обо всём по порядку…

Для поля “имя пользователя” необходимо было сделать проверку на длину строки (чтобы не менее 5 символов). Не проблема - в Jot можно использовать регулярные выражения для проверки с помощью параметра validate. Синтаксис следующий:

fieldname:message(:validation),fieldname:message(:validation),…

где:

• fieldname - имя поля;
• message - сообщение, показываемое при ошибке;
• validation - правило проверки (number, email, регулярное выражение).

Можно задать правила проверки для всех полей, разделяя их запятой.

Регулярное выражение для моего случая (длина строки не более 5 символов) следующее: /^.{5,}$/. В итоге получаем такой параметр:

&validate=`Name:Имя должно содержать не менее 5 символов:/^.{5,}$/`

Вроде бы всё правильно, но это не работает - вылазит ошибка: неверный синтаксис регулярного выражения. А проблема на самом деле в том, что в регулярном выражении мы используем запятую, но запятая используется в синтаксисе validate для разделения правил для полей. Соответственно строка парсится не правильно.

Для исправления этого глюка я решил заменить разделение полей в validate с запятой на ||. Для этого открываем файл /assets/snippets/jot/jot.class.inc.php и переходим на строку 171, она выглядит следующим образом:

$valStrings = explode(",",$this->config["validate"]);

И заменяем запятую на на наш разделитель "||":

$valStrings = explode("||",$this->config["validate"]);

Всё… теперь регулярные выражения в Jot работают корректно, но надо не забывать, что теперь разделителем в validate является "||" вместо запятой.

Сейчас я делаю сайты на 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 &raquo; Некорректный адрес электронной почты." 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.

Приложение к статье ⁵⁷ (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"
	)
);