Это пример, где мы создаем форму с возможностью отправки файлов, где делаем возможность загрузки файла в виде кнопки "ПРИКРЕПИТЬ", сам input type="file" скрыт.
Сначала создаем чанк с формой.
Form_On_Panel_Tpl (символ "((" заменяем на две квадратные скобки)
<form action="" method="post" class="ajax_form af_example" enctype="multipart/form-data">
<div class="form-group">
<div class="container-form-input">
<input type="text" id="name" name="name" value="" placeholder="Имя" class="container-form-control">
<span class="error_name">((+fi.error.name))</span>
</div>
</div>
<div class="form-group">
<div class="container-form-input">
<input type="text" id="phone" name="phone" value="" placeholder="Телефон" class="container-form-control">
<span class="error_phone">((+fi.error.phone))</span>
</div>
</div>
<div class="form-group">
<div class="container-form-input">
<input type="text" id="mail" name="mail" value="" placeholder="Почта" class="container-form-control">
<span class="error_mail">((+fi.error.mail))</span>
</div>
</div>
<div class="form-group">
<div class="container-form-input">
<textarea type="text" id="message" name="message" value="" placeholder="" rows="3" class="container-form-control"></textarea>
</div>
</div>
<div class="container-form-input chkboxform">
<div class="agree">
<p class="agree-text">Нажимая кнопку "Отправить", вы принимаете условия пользовательского соглашения и даете согласие на обработку персональных данных.</p>
</div>
<div class="list">
<div class="container-form-input" style="display:none;">
<input id="input-doc" type="file" class="container-form-control" name="doc-list">
</div>
<p class="list-text">Прикрепите опросный лист для расчета КП:</p>
<label for="input-doc" class="list-link">ПРИКРЕПИТЬ</label>
</div>
<div class="form-group" style="margin: 0;">
<div class="controls">
<button type="submit" class="container-form-link">ОТПРАВИТЬ</button>
</div>
</div>
</div>
</form>
Далее создаем чанк шаблона письма для этой формы.
Form_On_Panel_EmailTpl (символ "((" заменяем на две квадратные скобки)
<h3>На сайте Москонвейер поступила заявка на конвейер</h3>
<p>От кого: ((+name))</p>
<p>Телефон: ((+phone))</p>
<p>Почта: ((+mail))</p>
<p>Сообщение:</p>
<p>((+message))</p>
Далее в нужном месте на сайте вставляем код вызова FormIt для отображение нашей формы.
Код (символ "((" заменяем на две квадратные скобки)
<div class="panel__body-form">
((!AjaxForm?
&snippet=`FormIt`
&form=`Form_On_Panel_Tpl`
&hooks=`email`
&emailSubject=`На сайте Москонвейер MODX Revolution поступила заявка на конвейер`
&emailTo=`Udnlx@yandex.ru`
&emailFrom=`no-reply@mysite.com`
&emailTpl=`Form_On_Panel_EmailTpl`
&validate=`name:required,phone:required,mail:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
))
</div>
Теперь добавим стили для нашей кнопки "ПРИКРЕПИТЬ".
css
.panel__body-form label.list-link {
width: 80%;
margin: auto;
border: 0;
color: #ffffff;
background-color: #0f9c3e;
padding: 5px 20px 5px 20px;
cursor: pointer;
text-align: center;
transition: 0.5s;}
.panel__body-form label.list-link:hover {
color: #000000;
transition: 0.5s;}
Приведу несколько примеров с проверкой загружен ли файл в форму.
Пример первый, имеется блок с несколькими input для загрузки фалов и их появление осуществлено последовательно по мере добавления фалов. Такой метод я использовал при работе над сайтом "НПЦОТ".
HTML
<div id="blockfile">
<input type="file" id="filepg001" name="file001[]" class="onvisible" multiple="multiple">
<input type="file" id="filepg002" name="file002[]" class="offvisible" multiple="multiple">
<input type="file" id="filepg003" name="file003[]" class="offvisible" multiple="multiple">
<input type="file" id="filepg004" name="file004[]" class="offvisible" multiple="multiple">
<input type="file" id="filepg005" name="file005[]" class="offvisible" multiple="multiple">
<input type="file" id="filepg006" name="file006[]" class="offvisible" multiple="multiple">
<input type="file" id="filepg007" name="file007[]" class="offvisible" multiple="multiple">
</div>
SCRIPT
<script>
$('#file001').on('change', function(){
$('#file002').removeClass('offvisible');
$('#file002').addClass('onvisible');
});
$('#file002').on('change', function(){
$('#file003').removeClass('offvisible');
$('#file003').addClass('onvisible');
});
$('#file003').on('change', function(){
$('#file004').removeClass('offvisible');
$('#file004').addClass('onvisible');
});
$('#file004').on('change', function(){
$('#file005').removeClass('offvisible');
$('#file005').addClass('onvisible');
});
$('#file005').on('change', function(){
$('#file006').removeClass('offvisible');
$('#file006').addClass('onvisible');
});
$('#file006').on('change', function(){
$('#file007').removeClass('offvisible');
$('#file007').addClass('onvisible');
});
</script>
Пример второй, простой. Идет проверка заполнен ли input с фалом или нет, если заполнен, то выводится сообщение над кнопкой что файл загружен, если же нет, то выводится сообщение что нужно загрузить файл.
HTML
<div class="container-form-input chkboxform">
<div class="agree">
<p class="agree-text">Нажимая кнопку "Отправить", вы принимаете условия пользовательского соглашения и даете согласие на обработку персональных данных.</p>
</div>
<div class="list">
<div class="container-form-input" style="display:none;">
<input id="input-doc" type="file" class="container-form-control" name="doc-list">
</div>
<p class="list-text">Прикрепите опросный лист для расчета КП:</p>
<label for="input-doc" class="list-link">ПРИКРЕПИТЬ</label>
</div>
<div class="form-group" style="margin: 0;">
<div class="controls">
<button type="submit" class="container-form-link">ОТПРАВИТЬ</button>
</div>
</div>
</div>
SCRIPT
<script>
$('#input-doc').change(function() {
if ($('#input-doc').val() != '') {
console.log ('фаил добавлен');
$('p.list-text').text('Опросный лист для расчета КП прикреплен. Спасибо');
} else {
console.log ('фаил не добавлен');
$('p.list-text').text('Прикрепите опросный лист для расчета КП:');
}
});
</script>