JS File Not Triggering Delay After Submitting Form
SOLVE
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.
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?
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:
JS File Not Triggering Delay After Submitting Form
SOLVE
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):
JS File Not Triggering Delay After Submitting Form
SOLVE
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):
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:
JS File Not Triggering Delay After Submitting Form
SOLVE
@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.