I have been attempting to hack Hubspot's embed form in order to display an inline thank you while opening a document in a new tab. I've gotten it to work on Desktop with the below code; however, executing this code on mobile redirects the page to https://forms.hubspot.com/uploads/form/... with an HTTP ERROR 400 Problem accessing /uploads/form/... Reason:
HTTP method GET is not supported by this URL
Here is my javascript:
<script src="//js.hsforms.net/forms/current.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script>
hbspt.forms.create({
portalId: '<!-- portalid -->',
formId: '<!-- formid -->',
onFormReady: function(){
jQuery('form').validate({
errorPlacement: function(error, element) {},
submitHandler: function(form, e) {
e.preventDefault();
window.open('<!-- link -->', '_blank');
form.submit();
jQuery(entireForm)
var entireForm = jQuery('#hsForm_<!-- formid -->');
window.setTimeout(function() {
entireForm.html('<h3>Thank you for downloading the Quick Guide! The document should open in a new window shortly.</h3>');
}, 1000);
}
});
}
});
</script>
I have been able to fix the mobile problem by duplicating the form and displaying different forms for different widths (example: if (screen.width <= 800) { } ) and then using Hubspot's redirectUrl: ''; to redirect to the page instead of opening the page in a new window.
But there must be an easier way! Any help would be much appreciated. (I apologize in advance for any formatting errors--first time posting on stack!)