已设置sandbox="allow-forms"仍无法提交HubSpot自定义表单，如何解决？

Let's walk through fixing that sandbox permission error step by step—even though you added allow-forms to your iframe, there are a few missing pieces in your setup:

1. Fix the iFrame Sandbox Permissions #

The error happens because your sandboxed iframe needs more than just allow-forms to handle the form submission properly. Update your iframe tag to include additional permissions that let it receive and process the form data:

<iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms allow-same-origin allow-top-navigation"></iframe>

• allow-same-origin: Lets the iframe share the same origin as your main page, so form data can be passed correctly.
• allow-top-navigation: Prevents restrictions on post-submission navigation (if HubSpot tries to redirect after submission).

2. Fix How You Trigger the HubSpot Form Submission #

Your current code uses $("form input:submit").trigger("click"); which targets all submit buttons on the page—this is unreliable and can cause unexpected behavior. Instead, directly target the HubSpot form and call its submit() method:

function submitToHubSpot(data) {
  var $hubSpotForm = $('#hubspot-form form');
  // Map your custom form data to HubSpot form fields
  for (var k in data) {
    $hubSpotForm.find("input[name='" + k + "']").val(data[k]);
  }
  // Submit the HubSpot form directly
  $hubSpotForm.submit();
}

3. Ensure the Form Target is Set Correctly #

Sometimes the onFormReady callback runs before the HubSpot form is fully initialized, so the target attribute doesn't stick. Add a small delay to make sure the form is ready:

hbspt.forms.create({
  portalId: 'my-portal-id',
  formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
  onFormReady: function($form) {
    setTimeout(function() {
      $form.attr('target', 'hubspot-iframe');
    }, 100);
  }
});

4. Add a Name Attribute to Your Custom Input #

Your email input doesn't have a name attribute—this means serializeArray() can't capture the field name, so your formData object will be empty. Update your HTML input to match the field name in your HubSpot form (usually email for email fields):

<input type='email' class='form-control' placeholder='Your email address' required name='email'>

Why This Works #

• The expanded sandbox permissions give the iframe all the access it needs to handle the submission without browser restrictions.
• Directly calling submit() on the HubSpot form is more reliable than triggering a button click, as it avoids unintended side effects.
• The delay ensures the HubSpot form is fully loaded before setting the target.
• The name attribute lets your custom form data map correctly to HubSpot's form fields.

After making these changes, test your form again—you should no longer see the sandbox error, and your data will submit to HubSpot as expected.

内容的提问来源于stack exchange，提问作者Matteo Boscolo