MODx Revolution: контактная форма

В данной статье рассмотрим процесс создания простейшей формы обратной связи на CMS/CMF MODx Revolution. Итак, для этого нам понадобиться установить сниппет под названием FormIt.

Шаг 1. Подготовим сниппет Formit.

Итак, во-первых после успешной инсталляции сниппета Formit откроем для редактирования документ, который у нас имеет заголовок «Контактная форма», — его мы с вами создали в одном из предыдущих уроков по созданию блога на MODx Revolution, если не забыли.

В свойствах указываем шаблон одиночной страницы — page, также снимаем флажок напротив надписи «Использовать HTML-редактор».

Во-вторых уже в блоке содержимого вызываем уже упомянутый сниппет со следующими входными параметрами:

[[!FormIt?
&hooks=`email`
&emailTpl=`MyLetterChunk`
&emailTo=`administrator@example.com`
&validate=`name:required,
  email:email:required,
  subject:required,
  message:required:stripTags`
]]

Из вышеописанного поясню следующие моменты:

• Вызываем хук/крючок email (hooks).
• Указываем чанк с шаблоном письма (emailTpl), которое будет нам отправлено — MyLetterChunk. Этот чанк мы создадим чуть позже.
• Указываем адрес электронной почты получателя письма — administrator@example.com, к примеру (emailTo).
• Указываем правила проверки введенной информации (validate). Обязательные поля (required): name, email, subject, message. Т.е. имя отправителя, его эл. почта, тема письма и текст сообщения. Дополнительно удаляем HTML-теги из поля message (stripTags).

Шаг 2. Подготовим шаблон контактной формы.

Открываем HTML-страничку с примерами/элементами типографики, — вы же помните шаблон SimpleMagazine?

Берем из этой разметки пример формы. В итоге получаем такую вот разметку, которую вставляем сразу после вызова вышеописанного сниппета:

[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]

<form action="[[~[[*id]]]]" method="post">
<ul>
  <li>
    <label for="name">
      Имя:
      [[!+fi.error.name]] <!-- текст ошибки -->
    </label>
    <input type="text" name="name" size="45" value="[[!+fi.name]]" />
  </li>
  <li>
    <label for="email">
      Почта:
      [[!+fi.error.email]] <!-- текст ошибки -->
    </label>
    <input type="text" name="email" size="45" value="[[!+fi.email]]" />
  </li>
  <li>
    <label for="subject">
      Тема:
      [[!+fi.error.subject]] <!-- текст ошибки -->
    </label>
    <input type="text" name="subject" size="45" value="[[!+fi.subject]]" />
  </li>
  <li>
    <label for="text">
      Cообщение:
      [[!+fi.error.text]] <!-- текст ошибки -->
    </label>
    <textarea name="message" cols="75" rows="10" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
  </li>
  <li>
    <input type="submit" value="Отправить" />
  </li>
</ul>
</form>

Шаг 3. Готовим чанк получаемого письма.

Помните, что на первом шаге мы во входном параметре emailTpl прописывали несуществующий чанк MyLetterChunk. Пришла пора создать его:

Это письмо было отправлено с помощью контактной формы на вашем сайте.
<br />[[+name]] ([[+email]]) пишет: <br />
[[+message]]

Итоги:

Вот и готова наша первая простая форма обратной связи в MODx Revolution. Капчу приделаем в одной из следующих статей. Продолжение следует…