Question

我正在尝试为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';
})

当我按下提交按钮时，我在控制台中收到以下错误

阻止表单提交至＆＃34; ＆＃34;因为表格的框架是沙箱和'允许形式＆＃39;未设置权限。

如你所见，我有

沙箱=＆＃34;允许-形式＆＃34;

设置在I框架中，但它不起作用。我该如何解决这个错误？

Answer 1

使用Hubspot上的iFrame表单遇到相同的问题，并遇到相同的JS错误。发现它与使用HS Design工具进行实时预览有关。

在顶部的下拉菜单中，有“带有显示选项的实时预览”，然后是“没有显示选项的预览”。是“带显示选项的预览”选项，使其成为“沙盒”，如果没有，请尝试使用。希望这对某人有帮助。

Answer 2

有时，当您单击应用程序中的链接时，打开的选项卡将禁用javascript /沙盒。

关闭标签页，然后在一个新的标签页中重新打开相同的URL，

Answer 3

不要在 html 中设置 allow-form 属性，而是在 .js 中使用

el.setAttribute('sandbox', 'allow-forms');

这是因为框架本身被沙盒化，但在提交表单之前调用了脚本，这触发了框架的提交，但由于用户无法提交，它不会调用 iframe 属性来尊重那里设置的属性

我的表单提交被阻止了，因为框架是沙盒并且“允许 - 形式”＃39;权限未设置

3 个答案: