Моя отправка формы блокируется, потому что фрейм находится в «песочнице», а разрешение «allow-forms» не установлено. - PullRequest
Новая
       10

Моя отправка формы блокируется, потому что фрейм находится в «песочнице», а разрешение «allow-forms» не установлено.

0 голосов
/ 16 мая 2018

Я пытаюсь создать пользовательскую форму и отправку сообщения для Hubspot.

У меня есть следующий код

HTML 

<head>
<script src="prezzi-form-submit.js"></script>
</head>
<body>

  <form class='form-inline' id='my-custom-form'>
    <div class="form-group">
      <input type='email' class='form-control' placeholder='Your email address' required>
    </div>
    <button class="btn btn-primary" type='submit'>Sign up</button>
  </form>

  <!-- Actual form that gets submitted to HubSpot -->
  <div class="hidden" id='hubspot-form'>
    <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
    <script>
      hbspt.forms.create({
        portalId: 'my-portal-id',
        formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
        onFormReady: function($form) {
          $form.attr('target', 'hubspot-iframe');
        }
      });
    </script>

    <!-- iFrame that data will get submitted to. This hack stops the page redirect. -->
    <iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms"></iframe>
  </div>
</body>

JS (prezzi-form-submit.js) 

// // Send form data to HubSpot from the client.
function submitToHubSpot(data) {
  var $form = $('#hubspot-form form'),
      k;

  // Loop through each value and find a matching input.
  // NOTE: Doesn't support checkbox/radio.
  for (k in data) {
    $form.find("input[name='" + k + "']").val(data[k]);
  }

  $("form input:submit").trigger("click");
}

// Here's how you'd use this.
$('#my-custom-form').on('submit', function() {
  var formData = {};
  $(this).serializeArray().forEach(function(data) {
    formData[data.name] = data.value;
  });

  submitToHubSpot(formData);

  // We sent the data. Now do whatever else you want.
  alert('Gee, thanks Jonathan! Now I can focus on onboarding my customers with Appcues!');
  window.location.href = 'http://appcues.com';
})

Когда я нажимаю кнопку отправки, в консоли появляется следующая ошибка

Заблокированная отправка формы в "", потому что рамка формы помещена в "песочницу" и разрешение 'allow-forms' не установлено.

Как видите, у меня есть

песочница = "Allow-форма"

установлено в кадре I, но оно не работает. Как я могу исправить эту ошибку?

Ответы [ 2 ]

0 голосов
/ 17 июля 2019

Иногда, когда вы щелкаете ссылку из приложения, на открытой вкладке будет отключен / отключен javascript.

Закройте вкладку и снова откройте тот же URL-адрес в новой вкладке, это может работать.

0 голосов
/ 27 февраля 2019

Столкнулся с той же проблемой с формой iFrame в Hubspot и получил ту же ошибку JS. Обнаружено, что это связано с предварительным просмотром в реальном времени с помощью инструмента HS Design.

В раскрывающемся меню вверху отображается «Предварительный просмотр в реальном времени с параметрами отображения», а затем «Предварительный просмотр без параметров отображения». Это выбор «Предварительный просмотр с параметрами отображения», который делает его «песочницей», попробуйте тот, без которого. Надеюсь, это кому-нибудь пригодится.

...