Hi,
I’m hoping someone on here can help me. I’m new developing in Hubspot CMS and I’m still learning my way around the Hubspot Form API items and have run into a issue. I’m building a module where I’m pulling the ?email=john@example.com from the website parameters and have it pull into the “email” field within the hubspot form. Once the email field is filled in with the email address, I need the form to automatically submit. If I’m not able to automatically submit the form once the email field is filled in, how do I implement a timer after the page load (2 seconds). We don’t want to customer submitting the submit button if possible. We want to make them opting out of email seemlessly. I’ve been researching for days on a solution and I can’t seem to find one that I can utilize to help me resolve this issue I am having. Any help anyone can provide would be greatly appreciated. Below is my code
<script>
// Get the email parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get(‘email’); // Set the email field value in the HubSpot form
document.querySelector(‘email’).value = email; // Submit the form
document.querySelector(‘hsForm_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’).submit();
</script>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/embed/v2.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “xxxxxxx”,
formId: “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,
onFormSubmit: function($form) {
sessionStorage.setItem(“email”, $form.find(‘input[name=“email”]’).val());
}
});
</script>
Thank you
Hello, @CD20623
Use this code to auto-submit the form after 2 seconds.
<script>
// Get the email parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get('email');
// Set the email field value in the HubSpot form
document.querySelector('email').value = email;
// Create a timer that will auto-submit the form after 2 seconds
const timer = setTimeout(() => {
// Submit the form
document.querySelector('hsForm_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx').submit();
}, 2000);
</script>
By this code you will first get the email parameter from the URL and set the value of the email field in the HubSpot form. Then, it will create a timer that will auto-submit the form after 2 seconds. Once the timer expires, the form will be submitted automatically.
Hi - Thank you for responding to my post. Unfortuntely, it didn’t work. The email address pulls into the email field, but the timer to auto-submit isn’t working. Below is my updated code. I feel like I am missing something that is so simple.
<script>
// Get the email parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get(‘email’);
// Set the email field value in the HubSpot form
document.querySelector(‘email’).value = email;
// Create a timer that will auto-submit the form after 2 seconds
const timer = setTimeout(() => {
// Submit the form
document.querySelector(‘hsForm_cfb7136a-c031-48aa-95c0-3544183770eb’).submit();
}, 2000);
</script>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/embed/v3.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “xxxxxxx”,
formId: “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,
inlineMessage: “”,
onFormSubmit: function($form) {
sessionStorage.setItem(“email”, $form.find(‘input[name=“email”]’).val());
}
});
</script>
Hey @CD20623,
The code is good, the issue is that by default HubSpot loads forms within an iframe. As a result of this your code is unable to find a reference to the form and the submit() function is not being called.
The fix is easy thankfully. If you go to the form within HubSpot and into the “Style & Preview” tab you should see the option to “Set as raw HTML form”. With this enabled the form is loaded as part of the DOM and the code will work.
More information on this setting can be found here. It’s typically used when you want to add your own styling to the form so it’s more inline with your external sites branding.
One thing to keep in mind is that it’s only available on Marketing or CMS Professional or Enterprise subscriptions. If you don’t have that there is no way to achieve what you’re looking to do with a native HubSpot form. You would need to use the Forms API and take total control over the markup and logic.
I hope that helps!
Hi - I did this about an hour ago and it’s still not working. When I view in the browser, the page loads, but the form within the module doesn’t submit.
Is this a hubspot hosted page (website or landing page) or an external page on your own site? and when you view the console are you getting any errors returned?
It’s a hubspot hosted page with a hubspot form.
Ok one second, I’m going to record a short video for you and let me know what your thoughts are.
