I'm trying to build a custom form and submission post for Hubspot.
I have the following code
HTML
<head> <script src="prezzi-form-submit.js"></script> </head> <body> <form class='form-inline' id='my-custom-form'> <div> <input type='email' class='form-control' placeholder='Your email address' required> </div> <button type='submit'>Sign up</button> </form> <!-- Actual form that gets submitted to HubSpot --> <div id='hubspot-form'> <script charset="utf-8" src="//"></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" 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 = ' }) When I press the submit button, I get the following error in the console
Blocked form submission to " " because the form's frame is sandboxed and the 'allow-forms' permission is not set.
As you can see I have the
sandbox="allow-forms"
set in the I frame but it isn't working. How can I fix this error?
23 Answers
Sometimes when you click a link from an application, the tab opened will have javascript disabled/sandboxed.
Close the tab and reopen the same URL in a fresh tab, it might work.
2Ran into the same problem with an iFrame form on Hubspot and got the same JS error. Discovered it has to do with the live preview using the HS Design tool.
In the drop down at the top there's the "Live preview with display options" then the "Preview without display options". It's the "preview with display options" selection that makes it "Sandboxed", try the one without. Hope this is helpful for someone.
Instead of setting the allow-form attribute in the html, set it within the .js using
el.setAttribute('sandbox', 'allow-forms'); It is because the frame itself is being sandboxed but the script is being called prior to the form being submitted which triggers submission of the frame but since the user wouldn't be able to submit, it wont call the iframe properties to respect the attribute set there
