Отправка файлов через формы FormIt

Это пример, где мы создаем форму с возможностью отправки файлов, где делаем возможность загрузки файла в виде кнопки "ПРИКРЕПИТЬ", сам 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>

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
любым мессенджером, позвонить или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2023 Портфолио Юдина Александра г.Пенза. Все права защищены