Как сделать вложенное поле в FormIt

Здесь я сделаю оговорку, что я не совсем уверен имеет или нет сниппет FormIt специальный хук для управления вложениями, если у вас есть определённые знания по этому поводу, то дайте знать об этом в комментах. Метод, который я покажу здесь – это используемый мною метод и он очень прост в применении.

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

 FormIt MODX Revolution прикрепление файла к сообщению

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

Установка типа шифра формы

Первой и наиболее важной вещью, которую нам необходимо сделать это установить атрибут типа шифра enctype формы. Большинство пользователей не устанавливают этот атрибут и в большинстве случаев всё и так отлично работает, все HTML формы по умолчанию будут установлены в “application/x-www-form-urlencoded”, что хорошо для отправки почты. В то же время, если вы ходите добавить файлы к сообщению, то вам необходимо установить атрибут enctype в “multipart/form-data”.  Вы можете почитать больше по поводу enctype и другие атрибуты в конце этого урока.

Этот атрибут определяет тип контента, который используется для отправки формы серверу (при методе  “post”).  По умолчанию значение этого атрибута “application/x-www-form-urlencoded”. Значение “multipart/form-data” должно использоваться с элементом  INPUT, тип=”file”.

Давайте откроем нашу контакт страницу и отредактируем ее код: добавим атрибут enctype к самой первой линии, которая отрывает нашу форму и устанавливает её атрибуты:

Код
<form id="contactForm" method="post" action=" [[~ [[*id]]]]" enctype="multipart/form-data">

Ну вот, теперь наша форма готова к обработке вложений и всё, что нам нужно – это добавить поле загрузки.

Добавление поля загрузки

Сейчас мы допавим поле к нашей форме с типом “file” и назовём это поле contact_attachment.  Я добавлю это поле к форме после области сообщения и перед областью каптчи, код в таком случае будет иметь такой вид:

Код
<div> <label for="contact_message">Your comment </label><em>(required)</em><br /> <textarea id="contact_message" cols="70" rows="7" name="contact_message"> [[!+fi.contact_message]]</textarea> </div> <div> <label for="contact_attachment">Attach a File </label><em>(optional)</em><br /> <input type="file" name="contact_attachment" value=" [[!+fi.contact_attachment]]" /> </div> [[+formit.recaptcha_html]] [[!+fi.error.recaptcha]]

Если мы посмотрим на форму, то увидим новое поле для прикрепления файла:

 Новое поле в FormIt "Прикрепить файл"

Давайте протестируем форму:

 Тестирование формы

Вы видите, что  jane doe решила отослать мне какие-то вложения. Так выглядит мой почтовый ящик, когда приходит новое письмо.

 Тестирование FormIt

Откроем почту и увидим файл marys-buttons.zip, который Джейн отослала мне и успешно прикрепила к моему имейлу и я могу теперь просто нажать на файл, чтобы загрузить его на свой компьютер.

 FormIt настроен правильно

Заключение

Ну вот мы подошли к концу нашего короткого урока как добавить поле вложения к вашей контакт-форме FormIt MODX Revolution . Мы изучили, что необходимо добавить атрибут enctype к нашей форме и далее добавить поле типа file.  Рекомендую почитать приведенные ниже ссылки, если вы хотите понять больше про формы.

2162