Javascript - Hubspot Form Inline Thank You On Mobile

421 views Asked by At

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!)

0

There are 0 answers