FormIt MODX Revolution для создания форм. Modx formit настройка

Создание контактных форм на MODX при помощи Formit + AjaxForm

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

Создание формы обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «kontact-form» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:

<form method="post"> <div> <i></i> <input type="text" name="name" required="" placeholder="Ваше имя*" value=""> </div> <div> <i></i> <input type="text" name="email" required="" placeholder="Ваш email*" value=""> </div> <div> <i></i> <input type="text" name="pfone" required="" placeholder="Ваш телефон*" value=""> </div> <div> <textarea rows="3" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea> <i></i> </div> <div> <label> <input type="checkbox" required=""> Согласен на обработку персональных данных <span></span> </label> </div> <p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p> <button type="submit">Отправить</button> </form>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<div>

</div>

<div>

<label>

<input type="checkbox" required=""> Согласен на обработку персональных данных

</label>

</div>

<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>

<button type="submit">Отправить</button>

</form>

А выглядит она так.

форма обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

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

Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms

А теперь переделаем код в динамический с учетом синтаксиса Formit и AjaxForm, получим следующее.

<form method="post"> <div> <i></i> <input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]"> <span>[[+fi.error.name]]</span> </div> <div> <i></i> <input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]"> <span>[[+fi.error.email]]</span> </div> <div> <i></i> <input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]"> <span>[[+fi.error.pfone]]</span> </div> <div> <textarea rows="4" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea> <i></i> <span>[[+fi.error.message]]</span> </div> <div> <label> <input type="checkbox" required=""> Согласен на обработку персональных данных<br/> <span>[[+fi.error.opd]]</span> </label> </div> <p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~21]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p> <button type="submit">Отправить</button> [[+fi.success:is=`1`:then=` <div>[[+fi.successMessage]]</div>`]] [[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]] </form>

<div>

<i></i>

<span>[[+fi.error.name]]</span>

</div>

<div>

<i></i>

<span>[[+fi.error.email]]</span>

</div>

<div>

<i></i>

<span>[[+fi.error.pfone]]</span>

</div>

<div>

<span>[[+fi.error.message]]</span>

</div>

<div>

<label>

<input type="checkbox" required=""> Согласен на обработку персональных данных<br/>

<span>[[+fi.error.opd]]</span>

</label>

</div>

<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~21]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>

<button type="submit">Отправить</button>

[[+fi.success:is=`1`:then=`

<div>[[+fi.successMessage]]</div>`]]

[[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]

</form>

Не забудьте поменять ссылку на страницу с пользовательским соглашением (href=»[[~21]]»)

Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-kontact-form со следующим содержимым:

<p>Имя: [[+name]]</p> <p>Email: [[+email]]</p> <p>Телефон: [[+pfone]]</p> <p>Сообщение: [[+message]]</p>

<p>Email: [[+email]]</p>

<p>Телефон: [[+pfone]]</p>

<p>Сообщение: [[+message]]</p>

Ну и сталось сделать вывод в нужном месте:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`[email protected]` &validate=`name:required,email:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]]

[[!AjaxForm?

&snippet=`FormIt`

&form=`kontact-form`

&emailTpl=`tpl-kontact-form`

&hooks=`spam,email`

&emailSubject=`Сообщение с сайта [[++site_url]]`

&emailTo=`[email protected]`

&validate=`name:required,email:required`

&validationErrorMessage=`В форме содержатся ошибки!`

&successMessage=`Сообщение успешно отправлено!`

]]

Не забудьте поменять значение emailTo на свою почту.

Документация по компонентам:

FormIt — docs.modx.com/extras/revo/formit
AjaxForm — docs.modx.pro/components/ajaxform

Вот в принципе и все!

web-revenue.ru

FormIt MODX Revolution для создания форм

FormIt- что это такое?

FormIt – это сниппет динамической обработки формы для MODx Revolution. Он обрабатывает форму после подтверждения, валидирует действия и дает на них отклик, например отправляет email-а. Он не генерирует форму, но он может повторно заполнить ее, если она не прошла валидацию.

История

FormIt написал Шоном Маккормиком (Shaun McCormick) как форму обработки Extra, первый официальный релиз состоялся 19 октября 2009 года.

MODX Formit рекомендации по использованию

Просто поместите запрос сниппета FormIt в ресурс, содержащий форму, которую Вы хотите использовать. В отличие от аналоговых предшественников (прежде всего eForm в MODx Evolution), не нужно помещать форму в чанк и ссылаться на чанк в запросе сниппета FormIt: Вы в буквальном смысле вставляете запрос сниппета вместе с формой, которую требуется обработать. Укажите в запросе сниппета «hooks»(или пост валидационные скрипты обработки). Затем добавьте проверку (валидацию) с помощью параметров &validate и &customValidators в тег сниппета.

Если у Вас на странице несколько форм, вставьте свойство &submitVar в запрос сниппета имени элемента формы внутри нее (то есть, &submitVar=`form1-submit`). Эта постановка для FormIt означает обработку запросов форм с POST-переменной.

Formit доступные свойства

Ниже перечислены общие доступные свойства для запроса FormIt (не включая хук-специфических свойств):

	Имя	Описание	Значение по умолчанию
1	hooks	Какие скрипты выполнять, если таковые имеются, после того, как форма проходит проверку. Это может быть разделенный запятыми список крючков, и если проверка не пройдена, обработка не происходит. Крючком может быть также имя сниппета, которое будет выполнять этот сниппет.
2	preHooks	Какие скрипты выполнять, если таковые имеются, пока форма загружается. Это может быть разделенный запятыми список хуков (hooks), и если проверка не пройдена, обработка не происходит. Хуком может быть также имя сниппета, которое будет выполнять этот сниппет.
3	submitVar	Если задано, обработка формы не начнется, если POST-переменная не пройдена. Обратите внимание: требуется, если Вы используете &store property (+ задано submit var in input="submit"!).
4	validate	Разделенный запятыми список полей для проверки, где каждое имя поля имеет вид name:validator (например, username:required,email:required). Валидаторы также могут быть сцеплены, как email:email:required. Это свойство может присваиваться нескольким строкам.
5	validationErrorMessage	Общее сообщение об ошибке, устанавливается в плейсхолдер, если валидация не пройдена. Может содержать , если Вы хотите отобразить список всех ошибок в верхней части.	<p>A form validation error occurred. Please check the values you have entered.</p>
6	validationErrorBulkTpl	HTML tpl, который используется для каждой отдельной ошибки в общем значении валидации общего сообщения об ошибке.	<li></li>
7	errTpl	HTML враппер ( wrapper) для сообщений об ошибках. Примечание: не чанк, а только HTML.	<span></span>
8	customValidators	Разделенный запятыми список настраиваемых имен валидатора (сниппетов), которые Вы планируете использовать в этой форме. Они должны быть четко сформулированы здесь, или они не будут работать.
9	clearFieldsOnSuccess	Если true, очищает поля по успешному подтверджению форм без редиректа.	1
10	store	Если true, будет хранить данные в кэше для выборочного использования сниппетом FormItRetriever.	0
11	storeTime	Если для 'store' установлено true, определяет количество секунд для сохранения данных из подачи формы. По умолчанию пять минут.	300
12	placeholderPrefix	Префикс, используемый для всех плейсхолдеров, установленных FormIt для полей.	fi.
13	successMessage	Если не используется крючок редиректа, отображается сообщение об успехе после успешной подачи.
14	successMessagePlaceholder	Имя плейсхолдера, куда помещается сообщение об успешном выполнении.	fi.successMessage
15	redirectTo	ID страницы "Thank You", куда посетитель может быть отправлен после успешного подтверждения подачи формы, но этот параметр показывается, только если Вы включите "redirect" в list of &hooks.

Проверка

Проверка (валидация) в FormIt осуществляется через свойство &validate, и может использоваться для автоматического проведения проверки по любому из полей в форме.

Для получения дополнительной информации о проверке в FormIt, посетите страницу Validators.

Хуки

Хуки (Hooks) – это, по существу, скрипты, которые выполняются во время обработки FormIt. Хуки могут соединяться: сначала выполняется первый хук, если он пройден удачно, задействуется следующий.

Для получения дополнительной информации о хуках, посетите страницу Hooks.

Хуки Form

Валидация Formit

FormItRetriever

Учебные пособия и примеры

FormItCountryOptions

FormItStateOptions

www.modx.cc

Проcтая форма обратной связи на MODx Revolution + FormIt

Cоздать форму обратной связи на сайте с использованием системы управления MODx Revolution и дополнения FormIt следует:

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

<h3>Форма обратной связи</h3> [[!FormIt? &hooks=`spam,email,redirect` &emailTpl=`email_tpl` &emailTo=`[email protected]` &emailSubject=`Письмо с сайта [[++site_url]]` &redirectTo=`25` &validate=`name:required,email:email:required,text:required:stripTags,phone:required` ]] [[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]] <form action="[[~[[*id]]]]" method="post"> <input type="hidden" name="nospam:blank" value="" /> <label for="name">Ваше имя <span>*</span>:</label> <span>[[!+fi.error.name]]</span> <input type="text" name="name" value="[[!+fi.name]]" /> <label for="email">Телефон <span>*</span>:</label> <span>[[!+fi.error.phone]]</span> <input type="text" name="phone" value="[[!+fi.phone]]" /> <label for="email">Email <span>*</span>:</label> <span>[[!+fi.error.email]]</span> <input type="text" name="email" value="[[!+fi.email]]" /> <label for="text">Сообщение <span>*</span>:</label> <span>[[!+fi.error.text]]</span> <textarea name="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea> <input type="submit" value="Отправить" /> </form>

Создать ещё один ресурс, куда будет происходить редирект после успешной отправки формы. Не забываем изменить значение параметра &redirectTo=`25` в месте вызова сниппета FormIt (код выше), куда следует передать корректный ID ресурса. В содержимое ресурса можно написать всё что угодно, например:

<p>Благодарим за обращение!</p>

Осталось создать шаблон, который будет будет выводить информацию в письмо, тоесть нужно создать чанк с названием email_tpl, который передаёться в качестве параметра &emailTpl=`email_tpl` во время вызова сниппета FormIt:

<p>От кого: [[+name]]</p> <p>Телефон: [[+phone]]</p> <p>E-mail: [[+email]]</p> <p>Сообщение: [[+text]]</p>

Можно добавить несколько правил CSS чтобы наша форма приобрела более привлекательный вид.

input, label, textarea{ display: block; } input, textarea{ margin: 0 0 10px 0; border: 1px solid #ccc; padding: 5px; } input.submit_button{ background-color: #43A52B; border: 1px solid #358222; padding: 5px 10px; border-radius: 3px; font: 13px Arial, Verdana, Tahoma, sans-serif; color: #fff; cursor: pointer; } input.submit_button:hover{ background-color: #358222; } span.required, span.error{ color: #ff0000; } span.required{ font-size: 18px; } span.error{ font-size: 11px; } Голосов: 588 | Просмотров: 2985

proweb63.ru