DmitrMakeev commited on
Commit
3058730
·
verified ·
1 Parent(s): 25fb569

Update pages.html

Browse files
Files changed (1) hide show
  1. pages.html +128 -44
pages.html CHANGED
@@ -463,45 +463,99 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
463
  </script>
464
 
465
  <script>
466
- // Создаем блок формы
467
- editor.Blocks.add('custom-form', {
468
- label: 'Custom Form',
469
- content: `
470
- <div class="form-container container">
471
- <form id="contactForm" class="conForm">
472
- <h4>КЛУБ-ПРАКТИК. 255 техник для психолога - 2024</h4>
473
- <div class="form-group name-field">
474
- <label for="name">Имя</label>
475
- <input type="text" id="name" class="name" required>
476
- </div>
477
- <div class="form-group email-field">
478
- <label for="email">Почта</label>
479
- <input type="email" id="email" class="email" required>
480
- </div>
481
- <div class="form-group phone-field">
482
- <label for="phone">Телефон</label>
483
- <input type="tel" id="phone" class="phone" required>
484
- </div>
485
- <div class="form-group options-field">
486
- <label for="options">Выберите тариф</label>
487
- <select id="options" class="options" required>
488
- <option value="" disabled selected>Тариф</option>
489
- <option>БИЗНЕС - 69 970р.</option>
490
- <option>PREMIUM - 89 970р.</option>
491
- <option>VIP - 149 990р.</option>
492
- </select>
493
- </div>
494
- <div class="form-check newsletter-field">
495
- <input type="checkbox" id="newsletter" class="newsletter" required>
496
- <label for="newsletter">Согласие на email рассылку</label>
497
- </div>
498
- <div class="form-group privacy-policy-link">
499
- <a href="#" id="privacyPolicyLink" class="privacyPolicyLink">Политика конфиденциальности</a>
 
 
 
 
 
 
 
 
 
 
 
500
  </div>
501
- <button type="submit" id="submit-button" class="btn-primary submit-button">ПЕРЕЙТИ К ОПЛАТЕ</button>
502
- </form>
503
- </div>
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">&times;</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