<label for="fileUpload" class="download-file">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25px" height="21px" version="1.1" viewBox="0 0 6.01 5.01"><path style="fill:#764E2B" d="M6.01 5.01l-6.01 0 0 -5.01 6.01 0 0 5.01 0 0zm-0.25 -4.76l-5.51 0 0 4.5 5.51 0 0 -4.5 0 0zm-0.25 4l-4.76 0 1 -1.87 0.75 0.76 1.26 -1.89 1.75 3zm-2.97 -0.71l-0.73 -0.74 -0.64 1.2 3.9 0 -1.33 -2.28 -1.2 1.82zm-1.16 -2.79c0.34,0 0.62,0.28 0.62,0.63 0,0.34 -0.28,0.62 -0.62,0.62 -0.35,0 -0.63,-0.28 -0.63,-0.62 0,-0.35 0.28,-0.63 0.63,-0.63zm0 0.25c0.2,0 0.37,0.17 0.37,0.38 0,0.2 -0.17,0.37 -0.37,0.37 -0.21,0 -0.38,-0.17 -0.38,-0.37 0,-0.21 0.17,-0.38 0.38,-0.38z"></path></svg>
<span class="download-file-text ps-2">Выберите несколько фото</span>
</label>
<input class="photo" type="file" name="files[]" value="" size="30" placeholder="Загрузить фото" multiple="true" accept="image" id="fileUpload" accepts=".jpg, .jpeg, .png, .webp">
<div id="image-holder" class="d-flex flex-wrap"></div>

JS для размещения в XSL-шаблон HOSTCMS

<SCRIPT>
    <xsl:comment>
    <xsl:text disable-output-escaping="yes">
    <![CDATA[

    $(function() {
    $("#fileUpload").on('change', function () {
 
     //Get count of selected files
     var countFiles = $(this)[0].files.length;
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();
 
     if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "webp") {
         if (typeof (FileReader) != "undefined") {
 
             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }
 
                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }
 
         } else {
             alert("Ваш брузер не поддерживает FileReader!");
         }
     } else {
         alert("Выберите файл в формате JPG, JPEG, PNG или WEBP!");
     }
    });
    });

    ]]>
    </xsl:text>
    </xsl:comment>
</SCRIPT>

Добавляем поле загрузки файла (новое поле создается после загрузки изображения)

<SCRIPT> 
    function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
   }
   addOneMoreInput();
</SCRIPT>

Стили CSS

<form action="" method="post" target="_blank">
	<input type="text" name="name">
	<input type="text" name="surname">		
	<button type="submit" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>

<form action="" method="post">
	<input type="text" name="name">
	<input type="text" name="surname">		
	<button type="button" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>	
<script>
$(document).ready(function(){
	$("input[name='print']").click(function(){
		var form =  $(this).closest('form');
		form.attr('target', '_blank');
		form.submit();
		form.attr('target', '');
	});
	return false;
});
</script>

2. Скрытая форма

Следующий вариант поможет, когда нужно отправить форму в новую вкладку и на другой URL. В данном примере все поля основной формы копируются в скрытую.

<form style="display: none;" action="/new.php?print=1" target="_blank" method="post" id="form-print"></form>	
<form action="" method="post" id="form-original">
	<input type="text" name="name">
	<input type="text" name="surname">		
	<button type="button" name="print">Распечатать</button>
	<button type="submit" name="send">Далее</button>
</form>	
<script>
$(document).ready(function(){
	$("input[name='print']").click(function(){
		$('#form-print').html($('#form-original').html());
		$('#form-print').submit();
	});
	return false;
});
</script>

Сохраняем в сессии (sessionStorage) значения, введённые в поля формы, для сохранения их в случае перезагрузки страницы.

    // выбираем на странице все элементы типа textarea и input
    document.querySelectorAll('textarea, input').forEach(function(e) {
        // если данные значения уже записаны в sessionStorage, то вставляем их в поля формы
        // путём этого мы как раз берём данные из памяти браузера, если страница была случайно перезагружена
        if(e.value === '') e.value = window.sessionStorage.getItem(e.name, e.value);
        // на событие ввода данных (включая вставку с помощью мыши) вешаем обработчик
        e.addEventListener('input', function() {
            // и записываем в sessionStorage данные, в качестве имени используя атрибут name поля элемента ввода
            window.sessionStorage.setItem(e.name, e.value);
        });
    });

PHP . Обработчик отправки фоормы

Стили CSS

Для валидации формы используем скрипт validate.js

$(function() {

var errorTxt = 'Ошибка отправки формы'; //Ошибка отправки формы
$('#form1').validate({
  rules: {
    name: "required",
    phone: "required"
  },
  messages: {
    name: "Заполните это поле", // Заполните это поле
    phone: "Заполните это поле",
  },
  focusInvalid: true,
  errorClass: "input_error",
  submitHandler: function(form){
        var form = document.forms.form1,
        formData = new FormData(form),
        xhr = new XMLHttpRequest();
        xhr.open("POST", "/mform/send-zakazspec.php");
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if(xhr.status == 200) {
            $("#form1").html('<p style="text-align:center">Ваша Заявка отправлена!<p>');
                setTimeout(function(){
                    location.reload();
                    }, 1000);
     
          }
        }
      };
      xhr.send(formData);
    }
    });

     //  Получаем значение из span.title и добавляем в поле формы название выбранной спецтехники
      $('.predzakaz').click(function() {
            var nameg = $(this).parent().children('span.title').text();
            $('#predzakazModal').appendTo('body');//перемещаем по DOM в конец body
            $('input#model').val(nameg);
            $('#model-name').html(nameg);
      });
});

HTML код формы

<div class="modal fade" id="predzakazModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
          <div class="modal-content">
                         <div class="modal-header text-center"><button class="close" type="button" data-dismiss="modal"></button>
                                   <div class="modal-title h3">РемонтССТ </div>
                                    <p class="bold"> Узнать стоимость:  <span id="model-name"></span></p>
                         </div>
                        <div class="box-content">
                                 <form method="get" id="form1">
                                             <div class="text-center mess" id="form_err1"></div>
                                             <div class="text-center mess"  id="form_right1"></div>
                                             <input  name="model"  id="model" type="hidden" />
                                             <input name="name" id="name" maxlength="80" placeholder="Ваше Имя" type="text" />
                                             <input name="phone" id="phone" maxlength="80" placeholder="Телефон *" type="text" required/>


                                            <button type="submit" autocomplete="off" class="btn btn-primary btn-lg btn-circle">Отправить заказ</button>
                            </form>
                 </div>
          </div>
     </div>
</div>

Обработчик отправки формы  send-zakazspec.php

<?php
$to  = "info@site.ru" ;

if ( isset( $_POST['phone'] ) ) {
  $name= substr( $_POST['name'], 0, 40 );
  $phone = substr( $_POST['phone'], 0, 15 );
  $model = substr( $_POST['model'], 0, 250);

  $body = "Имя: ".$name."\r\n";
  $body  .= "Телефон: ".$phone."\r\n";
  $body  .= "Спецтехника: ".$model."\r\n\r\n";

  send_mail($to, $body, $email);
}

// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email)
{
  $subject = 'Пользователь сайта SITE.RU заполнил форму Заказа спецтехники';
  $boundary = "--".md5(uniqid(time())); // генерируем разделитель
  $headers .= "From: ".$email."\r\n";   
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
  $multipart = "--".$boundary."\r\n";
  $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
  $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";


  $body = $body."\r\n\r\n";
  $multipart .= $body;


  mail($to, $subject, $multipart, $headers);
}
?>