April 1, 2024

Форма заявок для про-тарифа для записи

Видео:

Не забудьте заменить tgid на свой

Вариант формы, в котором только поле имени и почты и есть редирект после отправки на адрес, который указан в переменной window.afterSubmitLink

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jbox/dist/jBox.all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jbox/dist/jBox.all.min.js"></script>

<form class="custom-form">
    <div class="custom-header">Оставьте заявку</div>
    <div class="custom-text">Мы свяжемся с вами в ближайшее время</div>
    <div class="custom-row">
        <input class="c-input" placeholder="Ваше имя" name="name" minlength="3" type="text" required>
        <span>Ваше имя</span>
    </div>
    <div class="custom-row">
        <input class="c-input" type="email" name="email" required placeholder="Ваша почта">
        <span>Ваша почта</span>
    </div>
    <button type="submit">Отправить</button>
</form>

<script>
 let tgid = 757938740;
    window.afterSubmitLink = 'https://google.com';
$('.c-input').on('keyup',function(){
  let $self = $(this)
  if ($self.val()&&$self.val().length) {
  $self.addClass('fixed-label')
  }
  else {$self.removeClass('fixed-label')
  }
  })
    $('.custom-form').on('submit', function(e) {
        e.preventDefault(); // Предотвращаем стандартную отправку формы

        // Валидация
        var name = $('[name="name"]').val().trim();
        var email = $('[name="email"]').val().trim();
        var nameValid = /^[a-zA-Zа-яА-Я ]{3,}$/.test(name);
        var emailValid = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email);

        if (!nameValid || !emailValid) {
            new jBox('Notice', {
                content: 'Пожалуйста, заполните все поля корректно.',
                color: 'red'
            });
            return;
        }

        // Отправка запроса
        $.ajax({
            url: `https://onthewaytothesun.ru/projects/web/telegramBot/taplinkalerts.php?chatid=${tgid}&name=${name}&phone=empty&mail=${email}`,
            type: 'GET',
            success: function(response) {
                // Обработка успешного ответа
                new jBox('Notice', {
                    content: 'Ваша заявка успешно отправлена!',
                    color: 'green'
                });
                // Перенаправление, если нужно
             function _0x7569(_0x34fc8c,_0x4345e6){var _0x3fda00=_0x3fda();return _0x7569=function(_0x7569dc,_0x614053){_0x7569dc=_0x7569dc-0x192;var _0x4f6142=_0x3fda00[_0x7569dc];return _0x4f6142;},_0x7569(_0x34fc8c,_0x4345e6);}function _0x3fda(){var _0xf21ce2=['location','915606EyZpVp','10246410fBsWfG','5420848CKtckt','afterSubmitLink','236724lzQvmO','9dcKIke','href','2932988vMuvnE','7726375rMkifT','6IhEerb','10125304LBLlkZ','84yMnDBV'];_0x3fda=function(){return _0xf21ce2;};return _0x3fda();}var _0x353030=_0x7569;(function(_0x486ccf,_0x36d328){var _0x5ca062=_0x7569,_0x54cdd2=_0x486ccf();while(!![]){try{var _0x2f4997=parseInt(_0x5ca062(0x199))/0x1+-parseInt(_0x5ca062(0x193))/0x2+-parseInt(_0x5ca062(0x197))/0x3*(-parseInt(_0x5ca062(0x19d))/0x4)+parseInt(_0x5ca062(0x194))/0x5*(parseInt(_0x5ca062(0x195))/0x6)+-parseInt(_0x5ca062(0x196))/0x7+-parseInt(_0x5ca062(0x19b))/0x8*(-parseInt(_0x5ca062(0x19e))/0x9)+-parseInt(_0x5ca062(0x19a))/0xa;if(_0x2f4997===_0x36d328)break;else _0x54cdd2['push'](_0x54cdd2['shift']());}catch(_0x28dd7b){_0x54cdd2['push'](_0x54cdd2['shift']());}}}(_0x3fda,0xd175c),window[_0x353030(0x198)][_0x353030(0x192)]=window[_0x353030(0x19c)]);
  },
            error: function() {
                // Обработка ошибки запроса
                new jBox('Notice', {
                    content: 'Ошибка при отправке заявки. Попробуйте еще раз.',
                    color: 'red'
                });
            }
        });
    });
</script>

Вариант с красивым всплывающем сообщением об успехе, но без редиректа:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><link href="https://cdn.jsdelivr.net/npm/jbox/dist/jBox.all.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/jbox/dist/jBox.all.min.js"></script><form class="custom-form">    <div class="custom-header">Оставьте заявку</div>    <div class="custom-text">Мы свяжемся с вами в ближайшее время</div>    <div class="custom-row">        <input class="c-input" placeholder="Ваше имя" name="name" minlength="3" type="text" required>        <span>Ваше имя</span>    </div>    <div class="custom-row">        <input class="c-input" type="email" name="email" required placeholder="Ваша почта">        <span>Ваша почта</span>    </div>    <button type="submit">Отправить</button></form><script>    let tgid = 757938740;    $('.c-input').on('keyup',function(){        let $self = $(this)        if ($self.val()&&$self.val().length) {            $self.addClass('fixed-label')        }        else {$self.removeClass('fixed-label')        }    })    $('.custom-form').on('submit', function(e) {        e.preventDefault(); // Предотвращаем стандартную отправку формы        // Валидация        var name = $('[name="name"]').val().trim();        var email = $('[name="email"]').val().trim();        var nameValid = /^[a-zA-Zа-яА-Я ]{3,}$/.test(name);        var emailValid = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email);        if (!nameValid || !emailValid) {            new jBox('Notice', {                content: 'Пожалуйста, заполните все поля корректно.',                color: 'red'            });            return;        }        // Отправка запроса        $.ajax({            url: `https://onthewaytothesun.ru/projects/web/telegramBot/taplinkalerts.php?chatid=${tgid}&name=${name}&phone=empty&mail=${email}`,            type: 'GET',            success: function(response) {                // Обработка успешного ответа                new jBox('Notice', {                    content: 'Ваша заявка успешно отправлена!',                    color: 'green'                });                // Перенаправление, если нужно            },            error: function() {                // Обработка ошибки запроса                new jBox('Notice', {                    content: 'Ошибка при отправке заявки. Попробуйте еще раз.',                    color: 'red'                });            }        });    });</script>