JS File Not Triggering Delay After Submitting Form

Alex_ · ‎Jun 23, 2020

Hello,

I posted this question in the Marketing Hub community, but that might've been the wrong place to ask this question so I'm trying my luck here.

I've created a JS file in the Design Manager tool and am trying to attach it to a landing page within the Header/Footer HTML section, but it seems that the landing page isn't accepting it.

What I'm trying to do, is to add a delay to the page so when the form is submitted, the Thank You page is delayed long enough for the contact to be created and a dynamic property on the Thank You page is populated with the information given.

Here is the JS:

<script>
jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
    hbspt.forms.create({
        portalId: "XXXX",
        formId: "XXXXXXXXXXXXXXXXXXX",
        onFormSubmit: function($form) {
            setTimeout(function() {
                window.location = "{{ thank-you-page-link }}";
            }, 50000);
        }
    });
});
</script>

The landing page template itself is an HTML file and not a WYSIWYG-style template, so there's no area that I can add the JS file. I've tried adding it to both the Head and Footer of the landing page builder with the following:

<!-- start Main.js Do Not Remove -->
<script src='{{ public_URL }}'></script>
<!---End Main.js-->

As of now, I'm stuck; does anyone out there have an idea of what I can do to get this thing to start working?

daveroma · ‎Jun 26, 2020

Hi @Alex_ - CC @sharonlicari

First check the Network tab to make sure your JS file is loading:

Once you're sure the JS file containing your script is being loaded onto the page - you'll want to wrap your script in jQuery's document ready function which will ensure the script fires once the DOM is completely loaded - see below:

<script>
$(function() {
  
  console.log('The DOM is ready!');

  jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
    hbspt.forms.create({
      portalId: "XXXX",
      formId: "XXXXXXXXXXXXXXXXXXX",
      onFormSubmit: function($form) {
        setTimeout(function() {
          window.location = "{{ thank-you-page-link }}";
        }, 50000);
      }
    });
  });
});
</script>

I added a console.log() in there so you can open dev console and if you see a console log message you'll know the script is actually firing.

Let me know how you make out.

Dave Roma,
HubSpot CMS Developer

Build a revenue generating website on HubSpot without a developer using The Generator Theme

View solution in original post

Alex_ · ‎Jun 26, 2020

I believe I've solved it!

I ended creating a seperate module and adding the code you gave me, @daveroma, (with a slight tweak) to the module.js section (thank you for the inspiration, @WendyGoh!), copy-and-pasted the usage snippet code right underneath the <body> tag and - BAM - it worked!

The only difference is that I removed the redirectURL in the form and added an inline message. So now, instead of a delay right after the submit, the inline message appears and the new JS fires to the thank you page after a slight delay.

Here's the slightly adjusted code (replaced the onFormSubmit with onFormSubmitted):

$(function() {
  
  console.log('The DOM is ready!');

  jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
    hbspt.forms.create({
      portalId: "XXXXXXX",
      formId: "XXXXXXXXXXXXXXXXXXXXXXXX",
      onFormSubmitted: function($form) {
        setTimeout(function() {
          window.location = "{{ your-link-here }}";
        }, 2000);
      }
    });
  });
});

Again, thank you all for your help; I honestly couldn't have done this without y'all!

View solution in original post

Alex_ · ‎Jun 26, 2020

I believe I've solved it!

I ended creating a seperate module and adding the code you gave me, @daveroma, (with a slight tweak) to the module.js section (thank you for the inspiration, @WendyGoh!), copy-and-pasted the usage snippet code right underneath the <body> tag and - BAM - it worked!

The only difference is that I removed the redirectURL in the form and added an inline message. So now, instead of a delay right after the submit, the inline message appears and the new JS fires to the thank you page after a slight delay.

Here's the slightly adjusted code (replaced the onFormSubmit with onFormSubmitted):

$(function() {
  
  console.log('The DOM is ready!');

  jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
    hbspt.forms.create({
      portalId: "XXXXXXX",
      formId: "XXXXXXXXXXXXXXXXXXXXXXXX",
      onFormSubmitted: function($form) {
        setTimeout(function() {
          window.location = "{{ your-link-here }}";
        }, 2000);
      }
    });
  });
});

Again, thank you all for your help; I honestly couldn't have done this without y'all!

daveroma · ‎Jun 29, 2020

Hey @Alex_

Glad you were able to use the code I gave you!

If my answer helped you solve your problem please mark it as the accepted answer and let me know if you have any other questions.

Thanks!

Dave Roma,
HubSpot CMS Developer

Build a revenue generating website on HubSpot without a developer using The Generator Theme

daveroma · ‎Jun 26, 2020

Hi @Alex_ - CC @sharonlicari

First check the Network tab to make sure your JS file is loading:

Once you're sure the JS file containing your script is being loaded onto the page - you'll want to wrap your script in jQuery's document ready function which will ensure the script fires once the DOM is completely loaded - see below:

<script>
$(function() {
  
  console.log('The DOM is ready!');

  jQuery.getScript("//js.hsforms.net/forms/v2.js", function() {
    hbspt.forms.create({
      portalId: "XXXX",
      formId: "XXXXXXXXXXXXXXXXXXX",
      onFormSubmit: function($form) {
        setTimeout(function() {
          window.location = "{{ thank-you-page-link }}";
        }, 50000);
      }
    });
  });
});
</script>

I added a console.log() in there so you can open dev console and if you see a console log message you'll know the script is actually firing.

Let me know how you make out.

Dave Roma,
HubSpot CMS Developer

Build a revenue generating website on HubSpot without a developer using The Generator Theme

Alex_ · ‎Jun 26, 2020

@daveroma - This is frustrating. The console log shows up so that means the script is firing... but anywhere that I stick the JS doesn't seem to work.

I've tried adding the JS file to the form module in the Linked files section; no dice.

I've tried adding the code as you have it below to the module.js section of the form module; no dice.

I've created a custom module with only adding the code to the module.js section and adding the usage snippet to the HTML template right below the <body> tag; no dice.

I've even tried adding it to the landing page itself in the builder in the Footer section using the public URL for the JS file; no dice.

I don't know what to do but I feel like I'm missing something that's letting this work because it's seemingly a simple thing to do - add a delay when submitting a form.

I really appreciate the help with this. I don't think I've been this frustrated since watching the last episode of Lost.

sharonlicari · ‎Jun 26, 2020

Hey @Alex_

Thank you for the information provided.I'll tag a few experts that can share their experience with you.

Hey @daveroma @BenSBM @david_eic any thoughts you would like to share with @Alex_ ?

Thanks & Happy Friday

Sharon

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !

CMS Development