ФОРМЫ / Загрузка формы на страницу с помощью AJAX для редакции HostCMS Старт

Заметка создана: 04 апреля 2024 г.
Создаётся узел структуры - Обратная связь (/zayavka/)
Тип раздела выбираем "Динамическая страница".
Кнопка вызова формы, которая размещается в макете на любой странице сайта.
<button 
    type="button" 
    class="btn btn-transparent btn-lg" 
   onclick="return $.openForm('/zayavka/', 'Вопрос на тему - Ремонт и выкуп элитных  швейцарских часов в Москве')" 
   tabindex="0">Задать вопрос
</button>
Добавляем на сервер в папку, например, /mform, обработчик отправки формы (в также него добавлена возможность отправки вложенных файлов) send-zakaz.php
<?php
$to  = "info@test.com";
$email = "zayavka@test.com";

if ( isset( $_POST['phone'] ) ) {
  $username= substr( $_POST['username'], 0, 40 );
  $phone = substr( $_POST['phone'], 0, 15 );
  $thema = substr( $_POST['thema'], 0, 250);
  $mess = substr( $_POST['mess'], 0, 250);

  $body = "Имя: ".$username."\r\n";
  $body  .= "Телефон: ".$phone."\r\n";
  $body  .= "Тема: ".$thema."\r\n\r\n";
  $body  .= "Сообщение: ".$mess."\r\n\r\n";

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

// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email)
{
  $subject = 'Пользователь сайта test.com заполнил форму Заявки';
  $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);
}
?>

В Основном макете, в самом низу, добавляем код модального окна, в которое будет загружаться наша форма

    <div class="modal fade" id="applicationModal" tabindex="-1" aria-labelledby="applicationModalLabel" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header justify-content-center">
                    <div class="h4 m-0 modal-title" id="applicationModalLabel">Заявка</div>
                    <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                </div>

                <div id="modalContent" class="modal-body"></div>
            </div>
        </div>           
     </div>

PHP . В поле "Динамическая страница" вставляем следующий код формы

    <div id="formUpload">

        <form method="get" id="form2" action="./">
                    <input type="hidden" name="thema" id="thema_2">
                    <div class="mb-3">
                        <input type="text" name="username" class="form-control" maxlength="40" placeholder="Ваше Имя *">
                    </div>
                    <div class="mb-3">
                        <input name="phone" class="form-control" maxlength="15" placeholder="Телефон *" type="text">
                    </div>
                    <div class="mb-3">
                        <textarea name="mess" class="form-control" rows="2" maxlength="300" placeholder="Ваш запрос *" type="text"></textarea>
                    </div>
                    
                    <p>Можете приложить несколько фото высокого разрешения в разных ракурсах</p>
                    <div id="image-holder_2" class="d-flex flex-wrap"></div>
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <input class="file-upload d-none" type="file" name="files[]" value="" placeholder="Загрузить фото" multiple="true" accept="image" id="fileUpload_2" data-id="2" accepts=".jpg, .jpeg, .png, .webp">
                            <label for="fileUpload_2" class="download-file btn btn-transparent primary">Добавить фото</label>
                        </div>
                        <div class="col-12 col-sm-6 text-end">
                             <button type="submit" id="submit_2" autocomplete="off" class="btn btn-transparent btn-lg primary" disabled>Отправить заявку</button>
                        </div>
                    </div>
                   
                   <div class="mt-4">
                       <div class="form-check">
                          <input id="checkbox_2" class="form-check-input" type="checkbox" name="checkbox" onchange="document.getElementById('submit_2').disabled = !this.checked;">
                             <label for="checkbox_2" class="form-check-label small">Я соглашаюсь на обработку своих персональных данных в соответствии с <a href="/private/" class="link-border"> Политикой конфиденциальности</a></label>
                        </div>
                    </div>
        </form>
                
  </div>

JavaScript / jQuery . Размещаем в макете сайта во вкладке Javascript обработчик AJAX загрузки формы

/

// Функции без создания коллекции
$.extend({
    
  // Загрузка форм заявок на ajax с валидацией
    openForm: function(path, form_title) {
      $("#modalContent").load(path + " #formUpload", function(response){
        // Если ответ не пустой, открываем модальное окно
        if (response) {
            $('#applicationModal').modal('show').appendTo('body');
            $('#thema_2').text(form_title);
            $('#form2').validate({
  rules: {
    phone: "required",
    mess: "required"
  },
  messages: {
    mess: "Заполните это поле",
    phone: "Заполните это поле"
  },
  focusInvalid: true,
  errorClass: "input_error",
  submitHandler: function(form){
        var form = document.forms.form2,
        formData = new FormData(form),
        xhr = new XMLHttpRequest();
        xhr.open("POST", "/mform/send-zakaz.php");
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if(xhr.status == 200) {
            $("#form2").html('<p style="text-align:center">Ваша Заявка отправлена!<p>');
                setTimeout(function(){
                    location.reload();
                    }, 1000);
     
          }
        }
      };
      xhr.send(formData);
    }
    });
    

    $("#fileUpload_2").on('change', function () {
     //Get count of selected files
     var dataID = $(this).data('id');
     var countFiles = $(this)[0].files.length;
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder_" + dataID);
     console.log(dataID);
     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!");
     }
    });
        }
    });
    },

............. остальной код

}

Формы