Как сделать вложенное поле в FormIt
Здесь я сделаю оговорку, что я не совсем уверен имеет или нет сниппет FormIt специальный хук для управления вложениями, если у вас есть определённые знания по этому поводу, то дайте знать об этом в комментах. Метод, который я покажу здесь – это используемый мною метод и он очень прост в применении.
Форма, которую мы создали, имеет следующие поля: имя, имейл, телефон, добавочный номер, сообщение и каптчу.
Сейчас мы просто добавим поле, которое позволит нашему пользователю сайта загружать файлы и прикреплять их к форме и далее отсылать в письме как обычное вложение. Всё на самом деле очень просто, поэтому приступим.
Установка типа шифра формы
Первой и наиболее важной вещью, которую нам необходимо сделать это установить атрибут типа шифра 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]]
Если мы посмотрим на форму, то увидим новое поле для прикрепления файла:
Давайте протестируем форму:
Вы видите, что jane doe решила отослать мне какие-то вложения. Так выглядит мой почтовый ящик, когда приходит новое письмо.
Откроем почту и увидим файл marys-buttons.zip, который Джейн отослала мне и успешно прикрепила к моему имейлу и я могу теперь просто нажать на файл, чтобы загрузить его на свой компьютер.
Заключение
Ну вот мы подошли к концу нашего короткого урока как добавить поле вложения к вашей контакт-форме FormIt MODX Revolution . Мы изучили, что необходимо добавить атрибут enctype к нашей форме и далее добавить поле типа file. Рекомендую почитать приведенные ниже ссылки, если вы хотите понять больше про формы.