About Teletype
Join
@onthewaytothesun
May 13, 2023

Своя форма заявок для pro-тарифа

Видео:

Если у вас стоит jQuery в настройках аккаунта, перед вставкой скрипта формы удалите из него вот эту первую строчку:

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></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://one-way.dev/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>

Код стилизации:

<style>
  :root {
--one-color:#54595E;
}
@font-face {
    font-family: 'Graphik LCG';
    src: url('GraphikLCG-Regular.otf');
    src: local('GraphikLCG-Regular'), local('GraphikLCG-Regular'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Regular.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Medium.otf');
    src: local('GraphikLCG-Medium'), local('GraphikLCG-Medium'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Medium.otf');
    src: local('GraphikLCG-Medium'), local('GraphikLCG-Medium'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Bold.otf');
    src: local('GraphikLCG-Bold'), local('GraphikLCG-Bold'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Bold.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
.custom-form {
  display:flex;
  flex-direction:column;
  background: #FFFFFF;
border: 1px solid #D1D1D1;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
border-radius: 8px;
  padding: 2em 1.5em;
}
.custom-header {
  font-family: 'Graphik LCG';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 28px;
color: var(--one-color)!important;
margin-bottom:10px;
}
.custom-text {
  font-family: 'Graphik LCG';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color:var(--one-color)!important;
  margin-bottom:25px;
}
.custom-form .c-input {
  background: #FFFFFF;
border: 1px solid #D1D1D1;
border-radius: 8px;
  margin-bottom:15px;
  padding:13px 16px;
}
input[name="terms"] {
  display:none;
}
.custom-form label:not(.error) {
  padding-left:28px;
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: var(--one-color)!important;
  position:relative;
  cursor:pointer;
  margin-bottom:20px;
}
.custom-form label:not(.error)::before {
  color:transparent;
  transition:.1s;
  content:'✓';
  position:absolute;
  left:0;
  background: var(--one-color)!important;
width:17px;
  height:17px;
border: 1.66917px solid #4F4F4F;
border-radius: 5.00752px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2em;
}
.custom-form input:checked~label::before {
  color:white;
}
.custom-form label a {
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: var(--one-color)!important;
  text-decoration:underline;
}
  .error {
color: #FA2B3D!important;
}
.custom-form button {
  background: var(--one-color)!important;
border-radius: 8px;
  border:none;
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
padding:1em;
color: #F5F5F5;
  cursor:pointer;
}
.toast {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: #FFFFFF;
border: 1px solid #DEE2E6;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 20px 20px rgba(0, 0, 0, 0.08);
border-radius: 8px;
  padding: 36px 40px;
  width:350px;
}
.toast .close {
  position:absolute;
  top:16px;
  right:20px;
  cursor:pointer;
}
.toast div {
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #54595E;
  display:flex;
  align-items:flex-start;
}
.toast div svg {
 background: #F5F5F5;
border-radius: 8px;
  margin-right:15px;
  min-width:56px;
}

</style>

Коды формы:

<form class="custom-form">
<div class="custom-header">Оставьте заявку</div>
<div class="custom-text">Мы свяжемся с вами в ближайшее время</div>
 <input title="Введите имя" class="c-input" placeholder="Ваше имя" name="name" minlength="3" type="text" required>
  <input title="Введите корректный email" class="c-input" type="email" name="email" required placeholder="Ваша почта">
  <input title="Введите корректный номер телефона" class="c-input" type="phone" placeholder="Ваш номер телефона" name="phone" required>
<input name="terms" id="agree" title="Поставьте галочку согласия" type="checkbox" required><label for="agree">Принимаю <a href="#" target="_blank">условия</a> обработки персональных данных</label>
<button class="disabled" type="submit">Отправить</button>
</form>

Код маски для российских номеров

<script>
document.addEventListener("DOMContentLoaded", function () {
    var eventCalllback = function (e) {
        var el = e.target,
        clearVal = el.dataset.phoneClear,
        pattern = el.dataset.phonePattern,
        matrix_def = "+7(___) ___-__-__",
        matrix = pattern ? pattern : matrix_def,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = e.target.value.replace(/\D/g, "");
        if (clearVal !== 'false' && e.type === 'blur') {
            if (val.length < matrix.match(/([\_\d])/g).length) {
                e.target.value = '';
                return;
            }
        }
        if (def.length >= val.length) val = def;
        e.target.value = matrix.replace(/./g, function (a) {
            return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
        });
    }
    var phone_inputs = document.querySelectorAll('.c-input[name="phone"]');
    for (let elem of phone_inputs) {
        for (let ev of ['input', 'blur', 'focus']) {
            elem.addEventListener(ev, eventCalllback);
        }
    }
});
</script>

Форма с редиректом на ваш адрес

Сама форма. Найдите в ней строчку (16 строчка) window.afterSubmitLink = 'https://google.com'; и измените ссылку на свою

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<form class="custom-form">
<div class="custom-header">Оставьте заявку</div>
<div class="custom-text">Мы свяжемся с вами в ближайшее время</div>
 <input class="c-input" placeholder="Ваше имя" name="name" minlength="3" type="text" required>
  <input class="c-input" type="email" name="email" required placeholder="Ваша почта">
  <input minlength="3" class="c-input" type="phone" placeholder="Ваш номер телефона" name="phone" required>
<input name="terms" id="agree" type="checkbox" required><label for="agree">Принимаю <a href="#" target="_blank">условия</a> обработки персональных данных</label>
<button class="disabled" type="submit">Отправить</button>
</form>


<script>
  let tgid = 757938740;
  window.afterSubmitLink = 'https://google.com';
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js',function(){
  $(".custom-form").each(function(){
  	$(this).validate({
   rules: {
 terms: {
required:true,
},
  
    },
  messages : {
  terms: {
required: "Поставьте галочку согласия",
},
name: {
  required: "Имя должно иметь минимум 3 буквы",
minlength: "Имя должно иметь минимум 3 буквы"
},
 email: {
    email: "Введите почту",
    required: "Введите корректную почту"
  },
phone: {
required: "Не заполнено поле телефона",
minlength: "Телефон должен иметь минимум 3 буквы"
}
}
  });

  })



})

$(()=>{
 
  setTimeout(()=>{
  
  	$(".custom-form").each(function(index){
  		let form = $(this)
  form.find($('input[name="terms"]')).attr('id','agree-'+index)
  form.find($('input[name="terms"]+label')).attr('for','agree-'+index)
  		 form.find($('input[name="terms"]')).change(function(){
if ($(this).is(':checked')) {form.find($('.custom-form button')).removeClass('disabled')}
  else {form.find($('.custom-form button')).addClass('disabled')}
})
  		
  	form.submit(function(e) {
  		e.preventDefault();

let name = encodeURIComponent(form.find($('.c-input[name="name"]')).val());
let phone = encodeURIComponent(form.find($('.c-input[name="phone"]')).val());
let email = encodeURIComponent(form.find($('.c-input[name="email"]')).val());
var actionUrl = `https://onthewaytothesun.ru/projects/web/telegramBot/taplinkalerts.php?chatid=${tgid}&name=${name}&phone=${phone}&mail=${email}`;
  setTimeout(()=>{
  if (form.valid()) {
                             
$.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {

          $('body').append(`
<div class="toast"><svg class="close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="12" fill="#E5E5E5"/>
<path d="M12 10.8891L15.8891 7L17 8.11094L13.1109 12L17 15.8891L15.8891 17L12 13.1109L8.11094 17L7 15.8891L10.8891 12L7 8.11094L8.11094 7L12 10.8891Z" fill="#4F4F4F"/>
</svg>
  <div>
    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 39.6667C31.2216 39.6667 34.1383 38.3609 36.2495 36.2496C38.3608 34.1383 39.6666 31.2217 39.6666 28C39.6666 24.7784 38.3608 21.8617 36.2495 19.7505C34.1383 17.6392 31.2216 16.3334 28 16.3334C24.7783 16.3334 21.8617 17.6392 19.7504 19.7505C17.6392 21.8617 16.3333 24.7784 16.3333 28C16.3333 31.2217 17.6392 34.1383 19.7504 36.2496C21.8617 38.3609 24.7783 39.6667 28 39.6667Z" fill="#F5F5F5" stroke="#4F4F4F" stroke-width="2" stroke-linejoin="round"/>
<path d="M23.3333 28L26.8333 31.5L33.8333 24.5" stroke="#4F4F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg><p>Если ваш браузер не поддерживает переадресацию, <a class="after-link" href="${window.afterSubmitLink}">перейдите по сылке</a></p>
  </div>
</div>
`);
  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)]);
  $('.toast .close').click(function(){
 $('.toast').remove()
})
        }
    });
  }
     },1000)
  	})	
  	})

  })
})


</script>

Стилизация:

<style>
  :root {
--one-color:#54595E;
}
@font-face {
    font-family: 'Graphik LCG';
    src: url('GraphikLCG-Regular.otf');
    src: local('GraphikLCG-Regular'), local('GraphikLCG-Regular'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Regular.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Medium.otf');
    src: local('GraphikLCG-Medium'), local('GraphikLCG-Medium'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Medium.otf');
    src: local('GraphikLCG-Medium'), local('GraphikLCG-Medium'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
   font-family: 'Graphik LCG';
    src: url('GraphikLCG-Bold.otf');
    src: local('GraphikLCG-Bold'), local('GraphikLCG-Bold'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Bold.woff') format('woff'),
        url('https://onthewaytothesun.ru/static/GraphikLCG-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
.custom-form {
  display:flex;
  flex-direction:column;
  background: #FFFFFF;
border: 1px solid #D1D1D1;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
border-radius: 8px;
  padding: 2em 1.5em;
}
.custom-header {
  font-family: 'Graphik LCG';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 28px;
color: var(--one-color)!important;
margin-bottom:10px;
}
.custom-text {
  font-family: 'Graphik LCG';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color:var(--one-color)!important;
  margin-bottom:25px;
}
.custom-form .c-input {
  background: #FFFFFF;
border: 1px solid #D1D1D1;
border-radius: 8px;
  margin-bottom:15px;
  padding:13px 16px;
}
input[name="terms"] {
  display:none;
}
.custom-form label:not(.error) {
  padding-left:28px;
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: var(--one-color)!important;
  position:relative;
  cursor:pointer;
  margin-bottom:20px;
}
.custom-form label:not(.error)::before {
  color:transparent;
  transition:.1s;
  content:'✓';
  position:absolute;
  left:0;
  background: var(--one-color)!important;
width:17px;
  height:17px;
border: 1.66917px solid #4F4F4F;
border-radius: 5.00752px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2em;
}
.custom-form input:checked~label::before {
  color:white;
}
.custom-form label a {
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: var(--one-color)!important;
  text-decoration:underline;
}
  .error {
color: #FA2B3D!important;
}
.custom-form button {
  background: var(--one-color)!important;
border-radius: 8px;
  border:none;
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
padding:1em;
color: #F5F5F5;
  cursor:pointer;
}
.toast {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: #FFFFFF;
border: 1px solid #DEE2E6;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 20px 20px rgba(0, 0, 0, 0.08);
border-radius: 8px;
  padding: 36px 40px;
  width:350px;
}
.toast .close {
  position:absolute;
  top:16px;
  right:20px;
  cursor:pointer;
}
.toast div {
font-family: 'Graphik LCG';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #54595E;
  display:flex;
  align-items:flex-start;
}
.toast div svg {
 background: #F5F5F5;
border-radius: 8px;
  margin-right:15px;
  min-width:56px;
}

</style>

Валидатор:

<script>
document.addEventListener("DOMContentLoaded", function () {
    var eventCalllback = function (e) {
        var el = e.target,
        clearVal = el.dataset.phoneClear,
        pattern = el.dataset.phonePattern,
        matrix_def = "+7(___) ___-__-__",
        matrix = pattern ? pattern : matrix_def,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = e.target.value.replace(/\D/g, "");
        if (clearVal !== 'false' && e.type === 'blur') {
            if (val.length < matrix.match(/([\_\d])/g).length) {
                e.target.value = '';
                return;
            }
        }
        if (def.length >= val.length) val = def;
        e.target.value = matrix.replace(/./g, function (a) {
            return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
        });
    }
    var phone_inputs = document.querySelectorAll('.c-input[name="phone"]');
    for (let elem of phone_inputs) {
        for (let ev of ['input', 'blur', 'focus']) {
            elem.addEventListener(ev, eventCalllback);
        }
    }
});
</script>
@onthewaytothesun
May 13, 2023, 20:52
0 views
2 reactions
0 replies
0 reposts