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

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

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

Установка Formlt на MODx Revolution

Итак, во-первых после успешной инсталляции сниппета 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]]

Чанк письма FormIt MODx Revolution

Итоги:

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

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

Опубликовано 4-01-2013 в 18:06


Комментариев к записи: 9

  1. Олег:

    Добрый день!
    Вроде всё сделал как написано
    Но ничего не работает
    http://glass.webmasters-nn.ru//index.php?id=6
    Подскажите что не так?

    • admin:

      Без HTML вашего шаблона формы контактов обсуждение не имеет смысла. Плюс нужен код вызова сниппета Formit.

  2. MachineGunRap:

    Все круто. Получилось. Начал потихоньку разбираться что и как в modx. Спасибо.

  3. Alex Muha:

    Не получилось что-то… Форма создана, но кода валидации на ней нет (или он серверный в данном случае)?
    Валидация не работает, при нажатии кнопки ни чего не происходит..

    Из описанного примера, непонятно где определен объект fi ?
    Или это зарезервированное имя для FormIt ?

  4. Добрый день! Не могу понять почему сообщения не доходят на почту…. Все сделала правильно адрес указала, в итоге они так и не доходят до меня.

    • Администратор:

      Где пробуете на localhost или на рабочем хостинге?
      Чанк получаемого письма подготовили, передали в emailTpl?
      Что выводится на форме после клика по кнопке отправки письма?

  5. Дмитрий:

    У меня такой же вопрос ка у Надежды!
    Пробую отправлять на localhost
    после отправки форма очищается
    про чанк emailTpl я не понял

  6. Дмитрий:

    Хотел узнать как прикрутить данное окно (http://red-book-cms.ru/poleznosti/javascript/jquery-vsplyivayushhee-okno.html), чтоб она открывалась после отправки сообщения?

Добавить комментарий для Администратор Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты