title: My form submission get blocked because the frame is sandboxed and the 'allow-forms' permission is not set
body: <p>I'm trying to build a custom form and submission post for Hubspot. </p>
  
  <p>I have the following code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="prezzi-form-submit.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;form class='form-inline' id='my-custom-form'&gt;
      &lt;div class="form-group"&gt;
        &lt;input type='email' class='form-control' placeholder='Your email address' required&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-primary" type='submit'&gt;Sign up&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;!-- Actual form that gets submitted to HubSpot --&gt;
    &lt;div class="hidden" id='hubspot-form'&gt;
      &lt;script charset="utf-8" src="//js.hsforms.net/forms/current.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        hbspt.forms.create({
          portalId: 'my-portal-id',
          formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
          onFormReady: function($form) {
            $form.attr('target', 'hubspot-iframe');
          }
        });
      &lt;/script&gt;
  
      &lt;!-- iFrame that data will get submitted to. This hack stops the page redirect. --&gt;
      &lt;iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JS (prezzi-form-submit.js)</strong></p>
  
  <pre><code>// // 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';
  })
  </code></pre>
  
  <p>When I press the submit button, I get the following error in the console</p>
  
  <blockquote>
    <p>Blocked form submission to " " because the form's frame is sandboxed
    and the 'allow-forms' permission is not set.</p>
  </blockquote>
  
  <p>As you can see I have the </p>
  
  <blockquote>
    <p>sandbox="allow-forms"</p>
  </blockquote>
  
  <p>set in the I frame but it isn't working.
  How can I fix this error?</p>