Update pages.html
Browse files- pages.html +128 -44
pages.html
CHANGED
@@ -463,45 +463,99 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
|
|
463 |
</script>
|
464 |
|
465 |
<script>
|
466 |
-
// Создаем
|
467 |
-
editor.
|
468 |
-
|
469 |
-
|
470 |
-
|
471 |
-
|
472 |
-
<
|
473 |
-
|
474 |
-
|
475 |
-
|
476 |
-
|
477 |
-
|
478 |
-
|
479 |
-
|
480 |
-
|
481 |
-
|
482 |
-
|
483 |
-
|
484 |
-
|
485 |
-
|
486 |
-
|
487 |
-
|
488 |
-
|
489 |
-
|
490 |
-
|
491 |
-
|
492 |
-
|
493 |
-
|
494 |
-
|
495 |
-
|
496 |
-
|
497 |
-
|
498 |
-
|
499 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
500 |
</div>
|
501 |
-
|
502 |
-
|
503 |
-
|
504 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
505 |
});
|
506 |
|
507 |
// Добавляем возможность настройки каждого элемента формы
|
@@ -530,9 +584,15 @@ editor.DomComponents.addType('form-input', {
|
|
530 |
label: 'Required',
|
531 |
changeProp: true,
|
532 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
533 |
],
|
534 |
},
|
535 |
-
'script-props': ['id', 'placeholder', 'required'],
|
536 |
},
|
537 |
});
|
538 |
|
@@ -552,7 +612,7 @@ editor.DomComponents.addType('form-select', {
|
|
552 |
{
|
553 |
type: 'text',
|
554 |
name: 'options',
|
555 |
-
label: 'Options',
|
556 |
changeProp: true,
|
557 |
},
|
558 |
{
|
@@ -561,9 +621,15 @@ editor.DomComponents.addType('form-select', {
|
|
561 |
label: 'Required',
|
562 |
changeProp: true,
|
563 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
564 |
],
|
565 |
},
|
566 |
-
'script-props': ['id', 'options', 'required'],
|
567 |
},
|
568 |
});
|
569 |
|
@@ -586,9 +652,15 @@ editor.DomComponents.addType('form-checkbox', {
|
|
586 |
label: 'Required',
|
587 |
changeProp: true,
|
588 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
589 |
],
|
590 |
},
|
591 |
-
'script-props': ['id', 'required'],
|
592 |
},
|
593 |
});
|
594 |
|
@@ -641,9 +713,15 @@ editor.DomComponents.addType('form-button', {
|
|
641 |
label: 'Redirect',
|
642 |
changeProp: true,
|
643 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
644 |
],
|
645 |
},
|
646 |
-
'script-props': ['id', 'text', 'avp', 'grups', 'redirect'],
|
647 |
},
|
648 |
});
|
649 |
|
@@ -676,9 +754,15 @@ editor.DomComponents.addType('privacy-policy-link', {
|
|
676 |
label: 'Open in new window',
|
677 |
changeProp: true,
|
678 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
679 |
],
|
680 |
},
|
681 |
-
'script-props': ['id', 'href', 'newWindow'],
|
682 |
},
|
683 |
});
|
684 |
|
|
|
463 |
</script>
|
464 |
|
465 |
<script>
|
466 |
+
// Создаем новый тип компонента для формы
|
467 |
+
editor.Components.addType('custom-form', {
|
468 |
+
model: {
|
469 |
+
defaults: {
|
470 |
+
// HTML-код формы
|
471 |
+
content: `
|
472 |
+
<div class="container">
|
473 |
+
<form id="contactForm">
|
474 |
+
<h4>КЛУБ-ПРАКТИК. 255 техник для психолога - 2024</h4>
|
475 |
+
<div class="form-group name-field">
|
476 |
+
<label for="name">Имя</label>
|
477 |
+
<input type="text" id="name" class="name" required>
|
478 |
+
</div>
|
479 |
+
<div class="form-group email-field">
|
480 |
+
<label for="email">Почта</label>
|
481 |
+
<input type="email" id="email" class="email" required>
|
482 |
+
</div>
|
483 |
+
<div class="form-group phone-field">
|
484 |
+
<label for="phone">Телефон</label>
|
485 |
+
<input type="tel" id="phone" class="phone" required>
|
486 |
+
</div>
|
487 |
+
<div class="form-group options-field">
|
488 |
+
<label for="options">Выберите тариф</label>
|
489 |
+
<select id="options" class="options" required>
|
490 |
+
<option value="" disabled selected>Тариф</option>
|
491 |
+
<option>БИЗНЕС - 69 970р.</option>
|
492 |
+
<option>PREMIUM - 89 970р.</option>
|
493 |
+
<option>VIP - 149 990р.</option>
|
494 |
+
</select>
|
495 |
+
</div>
|
496 |
+
<div class="form-check newsletter-field">
|
497 |
+
<input type="checkbox" id="newsletter" class="newsletter" required>
|
498 |
+
<label for="newsletter">Согласие на email рассылку</label>
|
499 |
+
</div>
|
500 |
+
<div class="form-group privacy-policy-link">
|
501 |
+
<a href="#" id="privacyPolicyLink" class="privacyPolicyLink">Политика конфиденциальности</a>
|
502 |
+
</div>
|
503 |
+
<button type="submit" id="submit-button" class="btn-primary submit-button">ПЕРЕЙТИ К ОПЛАТЕ</button>
|
504 |
+
</form>
|
505 |
+
<div id="privacyModal" class="modal">
|
506 |
+
<div class="modal-content">
|
507 |
+
<span class="close">×</span>
|
508 |
+
<iframe src="https://riverpsy.com/policy" frameborder="0"></iframe>
|
509 |
+
</div>
|
510 |
+
</div>
|
511 |
</div>
|
512 |
+
`,
|
513 |
+
// Скрипт для обработки отправки формы
|
514 |
+
script: function(props) {
|
515 |
+
const form = this.querySelector('#contactForm');
|
516 |
+
form.addEventListener('submit', function(event) {
|
517 |
+
event.preventDefault();
|
518 |
+
const formData = new FormData(form);
|
519 |
+
const data = new URLSearchParams(formData).toString();
|
520 |
+
if (!props.submitUrl) {
|
521 |
+
console.error('Submit URL is not defined');
|
522 |
+
return;
|
523 |
+
}
|
524 |
+
fetch(props.submitUrl, {
|
525 |
+
method: 'POST',
|
526 |
+
headers: {
|
527 |
+
'Content-Type': 'application/x-www-form-urlencoded'
|
528 |
+
},
|
529 |
+
body: data
|
530 |
+
})
|
531 |
+
.then(response => response.json())
|
532 |
+
.then(data => {
|
533 |
+
console.log('Success:', data);
|
534 |
+
})
|
535 |
+
.catch((error) => {
|
536 |
+
console.error('Error:', error);
|
537 |
+
});
|
538 |
+
});
|
539 |
+
},
|
540 |
+
// Свойства, которые будут передаваться в скрипт
|
541 |
+
'script-props': ['submitUrl'],
|
542 |
+
// Настройки для изменения URL отправки
|
543 |
+
traits: [
|
544 |
+
{
|
545 |
+
type: 'text',
|
546 |
+
name: 'submitUrl',
|
547 |
+
label: 'Submit URL',
|
548 |
+
changeProp: true
|
549 |
+
}
|
550 |
+
]
|
551 |
+
}
|
552 |
+
}
|
553 |
+
});
|
554 |
+
|
555 |
+
// Создаем блок для компонента формы
|
556 |
+
editor.Blocks.add('custom-form-block', {
|
557 |
+
label: 'Custom Form',
|
558 |
+
content: { type: 'custom-form' },
|
559 |
});
|
560 |
|
561 |
// Добавляем возможность настройки каждого элемента формы
|
|
|
584 |
label: 'Required',
|
585 |
changeProp: true,
|
586 |
},
|
587 |
+
{
|
588 |
+
type: 'text',
|
589 |
+
name: 'class',
|
590 |
+
label: 'Class',
|
591 |
+
changeProp: true,
|
592 |
+
},
|
593 |
],
|
594 |
},
|
595 |
+
'script-props': ['id', 'placeholder', 'required', 'class'],
|
596 |
},
|
597 |
});
|
598 |
|
|
|
612 |
{
|
613 |
type: 'text',
|
614 |
name: 'options',
|
615 |
+
label: 'Options (comma separated)',
|
616 |
changeProp: true,
|
617 |
},
|
618 |
{
|
|
|
621 |
label: 'Required',
|
622 |
changeProp: true,
|
623 |
},
|
624 |
+
{
|
625 |
+
type: 'text',
|
626 |
+
name: 'class',
|
627 |
+
label: 'Class',
|
628 |
+
changeProp: true,
|
629 |
+
},
|
630 |
],
|
631 |
},
|
632 |
+
'script-props': ['id', 'options', 'required', 'class'],
|
633 |
},
|
634 |
});
|
635 |
|
|
|
652 |
label: 'Required',
|
653 |
changeProp: true,
|
654 |
},
|
655 |
+
{
|
656 |
+
type: 'text',
|
657 |
+
name: 'class',
|
658 |
+
label: 'Class',
|
659 |
+
changeProp: true,
|
660 |
+
},
|
661 |
],
|
662 |
},
|
663 |
+
'script-props': ['id', 'required', 'class'],
|
664 |
},
|
665 |
});
|
666 |
|
|
|
713 |
label: 'Redirect',
|
714 |
changeProp: true,
|
715 |
},
|
716 |
+
{
|
717 |
+
type: 'text',
|
718 |
+
name: 'class',
|
719 |
+
label: 'Class',
|
720 |
+
changeProp: true,
|
721 |
+
},
|
722 |
],
|
723 |
},
|
724 |
+
'script-props': ['id', 'text', 'avp', 'grups', 'redirect', 'class'],
|
725 |
},
|
726 |
});
|
727 |
|
|
|
754 |
label: 'Open in new window',
|
755 |
changeProp: true,
|
756 |
},
|
757 |
+
{
|
758 |
+
type: 'text',
|
759 |
+
name: 'class',
|
760 |
+
label: 'Class',
|
761 |
+
changeProp: true,
|
762 |
+
},
|
763 |
],
|
764 |
},
|
765 |
+
'script-props': ['id', 'href', 'newWindow', 'class'],
|
766 |
},
|
767 |
});
|
768 |
|