Для HostCMS

Подключаем в шапке сайта   ->js('/bootstrap/js/jquery.maskedinput.min.js')

Назначение плагина masked input

2. <!-- Подключение библиотеки jQuery -->
   <script src="jquery.js"></script>
   <!-- Подключение jQuery плагина Masked Input -->
   <script src="jquery.maskedinput.min.js"></script>

Создание HTML маски ввода

• Цифра 9 – соответствует цифре от 0 до 9.
• Символ a – представляет собой любой английский символ (A-Z, a-z).
• Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

<input id="phone" type="text">
<script>
//Код jQuery, установливающий маску для ввода телефона элементу input
//1. После загрузки страницы, когда все элементы будут доступны выполнить...
$(function(){
//2. Получить элемент, к которому необходимо добавить маску
$("#phone").mask("8(999) 999-9999");
});
</script>

Пример 1:    8(945) 64_-_____

<!--HTML элемент, который будет иметь заполнитель дд.мм.гггг -->
<input id="date" type="text">
<!--HTML элемент, который будет иметь в качестве заполнителя пробел -->
<input id="index" type="text">
<script>
 $(function() {
 //задание заполнителя с помощью параметра placeholder
$("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
 //задание заполнителя с помощью параметра placeholder
$("#index").mask("999999", {placeholder: " " });
 });
 </script>

Пример 2:  15.мм.гггг

<!-- Ввод номера телефона осуществляется с помощью маски -->
 <input id="phone" type="text">
 <script>
 $(function(){
//Использование параметра completed
 $("#phone").mask("8(999) 999-9999", {
completed: function(){ alert("Вы ввели номер: " + this.val()); }
 });
});
</script>

Пример 3: 6(945) 343-7667

Подтвердите действие на sites.ru

Вы ввели номер: 6(945) 343-7667

<!-- Ввод номера телефона осуществляется с помощью маски -->
<input id="number" type="text">
<script>
jQuery(function($){
 //создания своего специального символа для маски
$("#number").mask("0.9?9");
 });
</script>

Пример 4:  0.2

Настройка маски ввода Masked Input

<!-- HTML элемент, имеющий маску телефона -->
<input id="number" type="text">
<script>
jQuery(function($){
//создания специального символа для маски
$.mask.definitions['~']='[+-]';
$("#number).mask("~9.99");
});
</script>

Пример 5:   -5.3

<!-- HTML элемент, имеющий маску для ввода цвета в шестнадцатиричном формате -->
<input id="color" type="text">
<script>
jQuery(function($){
//создания специального символа h для маски
$.mask.definitions['h']='[A-Fa-f0-9]';
$("#color).mask("#hhhhhh");
});
</script>

Пример 6:   #675a_

Пример создания маски ввода телефона

<div class="form-group">
<label for="phone">Телефон: </label>
<select id="country" class="form-control">
<option value="ru"><img src="">Россия +7</option>
<option value="ua">Украина +380</option>
<option value="by">Белоруссия +375</option>
</select>
<input id="phone" type="text" class="form-control">
</div>

<script>
jQuery (function ($) {
$(function() {
function maskPhone() {
var country = $('#country option:selected').val();
switch (country) {
case "ru":
$("#phone").mask("+7(999) 999-99-99");
break;
case "ua":
$("#phone").mask("+380(999) 999-99-99");
break;
case "by":
$("#phone").mask("+375(999) 999-99-99");
break;
}
}
maskPhone();
$('#country').change(function() {
maskPhone();
});
});
});
</script>

Пример 7

Телефон:

Белоруссия +375  +375(777) 6__--

JavaScript / jQuery . jquery.maskedinput.min.js

<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

PHP . Код настроек ТДС "Отображение формы"

XSL . Шаблон "ОтобразитьФормуЗаявкаВМодальномОкне" с отправкой изображений

JavaScript / jQuery . Размещаем в макете сайта. Из XSL шаблонов валидацию форм убрать

<button 
    type="button" 
    class="btn btn-transparent btn-lg" 
   onclick="return $.openForm('/zayavka/', 'Вопрос на тему - Ремонт и выкуп элитных  швейцарских часов в Москве')" 
   tabindex="0">Задать вопрос
</button>

<?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 . В поле "Динамическая страница" вставляем следующий код формы

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

Добавляем в карточку товара блок с призывом задать вопрос

1. В XSL шаблон вывода карточки товара в нужном месте размещаем данный код: 

<div class="ask-question">
            <div class="d-flex justify-content-center">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
                <path style="fill:#ccc" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm32 352c0 17.6-14.4 32-32 32H293.3l-8.5 6.4L192 460v-76H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32v288zm-224-88c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm-8.5-24h17c4.2 0 7.7-3.3 8-7.5l7-112c.3-4.6-3.4-8.5-8-8.5h-31c-4.6 0-8.3 3.9-8 8.5l7 112c.3 4.2 3.8 7.5 8 7.5z"></path>
              </svg>
              <span class="ps-3 fs-4 fw-bold title">Есть вопросы?</span>
            </div>
            <div class="text">
						Если у вас есть вопросы по товару, то задавайте их и мы вам с радостью ответим.
					</div>
            <div class="last">
              <button type="button" id="questionModalOpen" data-bs-toggle="modal" data-bs-target="#questionModal" class="btn btn-transparent">Задать вопрос о товаре</button>
            </div>
          </div>

2. В макет добавляем код загрузки формы (в примере код формы с отправкой уведомления Пользователю). Форма будет в модальном окне. Нажатие на кнопку "Задать вопрос" вызовет открытие формы.

<?php
        // ФОРМА ЗАЯВКИ
        $oForm = Core_Entity::factory('Form', 1);  
        $Form_Controller_Show = new Form_Controller_Show($oForm);
       if (!is_null(Core_Array::getPost($oForm->button_name)))
          {
         $Form_Controller_Show
         ->values($_POST + $_FILES)
         // 0 - html, 1- plain text
         ->mailType(0)
         ->mailXsl(
            Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормыВФорматеHTML')
         )
         ->mailFromFieldName('euronasos19@gmail.com')
         ->process();

        // Отправляем письмо-подтверждение пользователю
        $Form_Controller_Show1 = clone $Form_Controller_Show;
        $sEmail = Core_Array::get($Form_Controller_Show1->values, 'email');  // здесь указать название поля input для email в форме
        if (Core_Valid::email($sEmail)){
            ob_start();
            $Form_Controller_Show1
                ->xsl(
                    Core_Entity::factory('Xsl')->getByName('ПисьмоПодтверждениеПользователюФормыВФорматеHTML')
                )
                ->show();
            $sMailText = ob_get_clean();
            if (mb_strpos($sMailText, 'ERROR TRUE') === FALSE){
                $subject = 'На сайте site.ru Вами была заполнена форма Заявки';// Тему письма отредактировать
                $oCore_Mail = Core_Mail::instance()
                    ->to($sEmail)
                    ->from('info@site.ru')
                    ->subject($subject)
                    ->message(trim($sMailText))
                    ->contentType('text/html')
                    ->header('X-HostCMS-Reason', 'Form');

                $oCore_Mail->send();
                      }
                  }
              }
                $Form_Controller_Show
                  ->xsl(
                  Core_Entity::factory('Xsl')->getByName('ОтобразитьФормуЗаявкиВМодальномОкне')
                 )
                  ->show();
?>

XSL . ФормаЗаявкиВМодальномОкне

Стили CSS

<script>
      $(function() {
            $(".validate").validate({
            focusInvalid: true,
            errorClass: "input_error",
            onkeyup: false,
            onfocusout: false,
            rules: {
            captcha: {
            required: true,
            remote: '/forms/'
            },
            author: "required",
             text: "required",
             email: {
                   required: true,
                   email: true
                  }
               },
               messages: {
                       author: "Пожалуйста, укажите своё Имя!",
                       text: "Пожалуйста, напишите свой комментарий!",
                       captcha: "Вы не вписали контрольное число!",
                       email: {
                       required: "Введите свой email",
                       email: "E-mail должен быть в формате name@domain.com"
                         }
            }});
        });
   </script>

Core_Page::instance()
// jQuery
->js('/hostcmsfiles/jquery/jquery.min.js')
...
// Validate
->js('/hostcmsfiles/jquery/jquery.validate.min.js')
...
->showJs();

<script>
$(".validate").validate();
</script>
Валидация всех форм:

<script>
$("form").validate();
</script>

Способы валидации форм

Использование имена классов как правила

<form action="." method="post" class="validate">
    <input type="text" name="name" value="" class="required" />
    <input type="submit" value="Submit" />
</form>

<form action="." method="post" class="validate">
    <input type="text" name="name" value="" class="name" />
    <input type="text" name="zip" value="" class="zip" />
    <input type="submit" value="Submit" />
</form>

<script >
$.validator.addClassRules("name", {
    required: true,
    minlength: 2
});
</script >

<script >
$.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}});
</script >

<script >
$(".validate").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "Введите свой email",
email: "E-mail должен быть в формате name@domain.com"
}
}});
</script >

<script >
$(".validate").validate({
rules: {
surname: "required",
name: "required",
email: {
required: true,
email: true
}
},
messages: {
surname: "Введите фамилию!",
name: "Введите имя!",
email: {
required: "Введите e-mail!",
email: "Адрес должен быть вида name@domain.com"
}
},
focusInvalid: true,
errorClass: "input_error"
});
</script>

<SCRIPT>
            $(document).ready(function() {
            $('.select2').addClass('required');
            $("#form<xsl:value-of select="@id" />").submit(function (event) {
            event.preventDefault();
            var eml = $('input[name=email]').val();
            if(eml =='svinya.svintus@yandex.ru') {
            alert ('Вы не можете отправлять нам письма');
            $(location).attr('href', '/');
            }else{
            
            $(this).validate({
            focusInvalid: true,
            errorClass: "input_error"
            });
            }
            });
            });
        </SCRIPT>

Добавляем в макет код показа формы:

<?php
        // add ФОРМА ПОДПИСКА ЗА СКИДКУ
     $oForm = Core_Entity::factory('Form', 49);  // заменить ID формы
      
     $Form_Controller_Show = new Form_Controller_Show($oForm);
      
     if (!is_null(Core_Array::getPost($oForm->button_name)))
     {
     $Form_Controller_Show
     ->values($_POST + $_FILES)
     // 0 - html, 1- plain text
     ->mailType(0)
     ->mailXsl(
     Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормыВФорматеHTML')
     )
     ->mailFromFieldName('email')
     ->process();
     }
      
     $Form_Controller_Show
     ->xsl(
     Core_Entity::factory('Xsl')->getByName('ОтобразитьФормуВМодальномОкне')
     )
      ->show();
?>

Подключаем в макете скрипт jquery.cookie.min.js:

<script src="/js/jquery.cookie.min.js"></script>

Проверяем куки:

<script>
$(document).ready(function($) {
if ($.cookie('was') == null) {
// Покажем всплывающее окно
setTimeout(function(){$('#popupModal').modal('show');}, 36000);
}
// Запомним в куках, что посетитель к нам уже заходил
$.cookie('was', 'value', { expires: 2, path: '/' });
});
</script>

JavaScript / jQuery . jquery.cookie.min.js

<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);
        });
    });

Строка поиска <input type="number">

<form>
<input type="number">
<input type="submit">
</form>

Поле <input type="number"> не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.

Количество товара

1. увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения;

2. сообщение об ошибке при вводе букв и дробных чисел;

3. минимальное значение 1 шт.

<form><input type="number" min="1" value="1"> шт</form>

Чётные положительные целые числа

<form><input type="number" step="2" min="2"></form>

Нечётные положительные целые числа

<form><input type="number" step="2" min="1"></form>

Круглые числа

<form><input type="number" step="10"></form>

Десятичная дробь с плавающей запятой

<form><input type="number" step="any"></form>

Денежный формат цены: «рубли,копейки» с двумя знаками после запятой ₽

<form><input type="number" step="0.01" min="0" placeholder="0,00"> ₽</form>

Ограничить количество символов в поле до 5

<form><input type="number" min="-9999" max="99999"></form>

Уменьшить длину <input type=number>

Атрибуты minlength, maxlength  и size не работают.

Необходимое количество символов в поле определяется атрибутами min, max и step: 

<!-- Достаточно выделить место на 6 символов -->
<input type="number" min="0" max="100" step="0.01"/>

Указать ширину в CSS (свойство width):

<style>
#dva {
width: 6em;
}
</style>
<input type="number" min="0" max="100" step="any" id="dva"/>

Стрелки у <input type=number>

Чтобы стрелочки были изначально, а не только при :hover и :focus в Chrome

<style>
#pyat::-webkit-inner-spin-button,
#pyat::-webkit-outer-spin-button  {
opacity: 1;
}
</style>
<input type="number" id="pyat"/>

Убрать стрелки

<style>
.raz {
-moz-appearance: textfield;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<input type="number" class="raz"/>

Стилизация стрелок «вверх»/«вниз» CSS

<style>
#raz {
position: relative;
display: inline-block;
}
#raz input {
font-size: 1em;
-moz-appearance: textfield;
}
#raz input::-webkit-inner-spin-button {
display: none;
}
#raz span {
position: absolute;
}
@supports (clip-path: polygon(50% 30%, 10% 90%, 90% 90%)) {
#raz input {
padding-right: 1em;
}
#raz span {
right: 0;
width: 1em;
height: 50%;
background: rgb(70,70,70);
cursor: pointer;
}
#raz span:hover {
background: red;
}
#raz span:nth-of-type(1) {
top: 0;
clip-path: polygon(50% 30%, 10% 90%, 90% 90%);
}
#raz span:nth-of-type(2) {
bottom: 0;
clip-path: polygon(50% 70%, 10% 10%, 90% 10%);
}
}
</style>
<span id="raz">
<input type="number" value="0">
<span onclick="this.previousElementSibling.stepUp()"></span>
<span onclick="this.previousElementSibling.previousElementSibling.stepDown()"></span>
</span>

Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования

- +

 <style>
.raz {
all: unset;
-moz-appearance: textfield;
width: 3em;
text-align: center;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<button type="button" onclick="this.nextElementSibling.stepDown()">-</button>
<input type="number" min="0" max="100" value="1" readonly class="raz">
<button type="button" onclick="this.previousElementSibling.stepUp()">+</button>

Вместо <input type="number"> использовать <input type="text">

Виртуальная клавиатура с дробно-числовым вводом

Атрибут inputmode  плохо поддерживается браузерами.

<input inputmode="decimal">

На IOS (iPhone) если атрибут patternимеет значение [0-9]* или \d*, то на мобильном телефоне будет дана цифровая клавиатура.

Для отправки формы, поле должно содержать только цифры

<form><input inputmode="decimal" pattern="-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?"></form>

Функционал с JavaScript

При наборе не числа value возвратит пустое значение. Браузер может позволить/вынудить пользователя набрать число с запятой «20,5», но value примет значение с точкой «20.5», искл., IE.

 value (строка) =""; valueAsNumber (число) ="";

Запретить ввод букв

<input type="number" id="check" step="any"/>
<script>
document.getElementById('check').onkeydown = function (e) {
return !(/^[А-Яа-яA-Za-z ]$/.test(e.key)); // IE > 9
}
</script>

Только одна точка или одна запятая

<input type="number" step="any" id="shest2"/>

<script>
document.getElementById('shest2').onkeydown = function (e) {
if (e.currentTarget.value.indexOf(".") != '-1' || e.currentTarget.value.indexOf(",") != '-1') {
return !(/[.,]/.test(e.key));
}
}
</script>

Ограничить ввод двумя знаками после запятой

Цифры, вносимые после 2-го символа после запятой, сразу обрезаются, дабы не совершать лишних телодвижений.

<input type="number" oninput="up(this)" step="0.01"/>

<script>
function up(e) {
if (e.value.indexOf(".") != '-1') {
e.value=e.value.substring(0, e.value.indexOf(".") + 3);
}
}
</script>

Обрезать последний лишний символ

<input type="number" step="any" id="shest1"/>

<script>
document.getElementById('shest1').oninput = function () {
if (this.value.length > 7) this.value = this.value.substr(0, 7); // в поле можно ввести только 7 символов
}
</script>

Разделение цифр пробелом

Наберите любое многозначное число

<input oninput="this.nextElementSibling.innerHTML = new Intl.NumberFormat('ru').format(this.valueAsNumber)" type="number">
<output> </output>

<button type="button" class="button" data-bs-toggle="modal" data-bs-target="#basicModal" >
         <i class="fa fa-phone"></i> <span>Заказать звонок</span>
</button>

Добавить в Макет

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content">
          <div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button> </div>
        <div class="modal-body">

      <?php
        // add ФОРМА ЗАКАЗАТЬ ЗВОНОК
        $oForm = Core_Entity::factory('Form', 5);  // Заменить id формы
        $Form_Controller_Show = new Form_Controller_Show($oForm);
       if (!is_null(Core_Array::getPost($oForm->button_name)))
          {
         $Form_Controller_Show
         ->values($_POST + $_FILES)
         // 0 - html, 1- plain text
         ->mailType(1)
         ->mailXsl(
            Core_Entity::factory('Xsl')->getByName('ПисьмоКураторуФормы')
         )
         ->mailFromFieldName('mail@spartika.ru')
         ->process();

        // Отправляем письмо-подтверждение пользователю
        $Form_Controller_Show1 = clone $Form_Controller_Show;
        $sEmail = Core_Array::get($Form_Controller_Show1->values, 'email');
        if (Core_Valid::email($sEmail)){
            ob_start();
            $Form_Controller_Show1
                ->xsl(
                    Core_Entity::factory('Xsl')->getByName($Form_Controller_Show1->mailType == 0 ? 'ПисьмоПодтверждениеПользователюФормыВФорматеHTML' : 'ПисьмоПодтверждениеПользователюФормы')
                )
                ->show();
            $sMailText = ob_get_clean();
            if (mb_strpos($sMailText, 'ERROR TRUE') === FALSE){
                $subject = 'Вами была заполнена форма обратного звока на сайте  jvern.club';// Тема письма отредактировать
                // При текстовой отправке нужно преобразовать HTML-сущности в символы
                $Form_Controller_Show->mailType == 1 && $sMailText = html_entity_decode(strip_tags($sMailText), ENT_COMPAT, 'UTF-8');
                $oCore_Mail = Core_Mail::instance()
                    ->to($sEmail)
                    ->from(EMAIL_TO)
                    ->subject($subject)
                    ->message(trim($sMailText))
                    ->contentType($Form_Controller_Show->mailType == 0 ? 'text/html' : 'text/plain')
                    ->header('X-HostCMS-Reason', 'Form');
                // Массив содержащий пути прикрепленных файлов и их имена
                $aForm_Fields = $oForm->Form_Fields->findAll();
                foreach ($aForm_Fields as $oForm_Field){
                    if ($oForm_Field->type == 2){// File
                        $value = Core_Array::get($Form_Controller_Show->values, $oForm_Field->name);
                        if (!is_null($value)){
                            if (is_array($value) && $value['size'] > 0){
                                $oForm_Fill_Fields = Core_Entity::factory('Form_Fill_Field');
                                $oForm_Fill_Fields->queryBuilder()
                                    ->where('form_field_id', '=', $oForm_Field->id)
                                    ->where('value', '=', $value['name'])
                                    ->limit(1);
                                $aForm_Fill_Fields = $oForm_Fill_Fields->findAll();
                                if (isset($aForm_Fill_Fields[0])){
                                    $oCore_Mail->attach(array(
                                        'filepath' => $aForm_Fill_Fields[0]->getPath(),
                                        'filename' => $value['name']
                                    ));
                                }
                            }
                        }
                    }
                }

                $oCore_Mail->send();
            }
        }
        // END add
              }
                $Form_Controller_Show
                  ->xsl(
                  Core_Entity::factory('Xsl')->getByName('ОтобразитьФорму')
                 )
                  ->show();
              ?>
        </div>
    </div>
  </div>
</div>

XSL

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);
}
?>