I need help transferring form field values from a HubSpot form to the page it redirects to after someone submits it. My goal is to use this data to automatically populate fields in another form on the destination page.
I’ve tried a couple of approaches but can’t get them working. First, I attempted using cookies to store the form data, but that didn’t work out. Then I found a JavaScript solution that’s supposed to add the form data as URL parameters to the redirect link, but I’m having trouble implementing it.
Here’s the code I’m trying to use:
(function() {
var jQuery = $;
var addDataToUrl = function (targetUrl, formData) {
var params = {};
jQuery.each(formData, function (index, field) {
if (field.name !== "hs_context") {
params[field.name] = field.value;
}
});
if (targetUrl.indexOf('?') > -1) {
return targetUrl + "&" + jQuery.param(params);
} else {
return targetUrl + "?" + jQuery.param(params);
}
};
jQuery(document).ready(function () {
jQuery("body").on("submit", "form.hs-form", function (event) {
var formElement = jQuery(this);
var submitUrl = formElement.attr("action");
var contextField = jQuery("input[name='hs_context']", formElement);
var contextData = JSON.parse(contextField.val());
contextData.redirectUrl = addDataToUrl(contextData.redirectUrl, formElement.serializeArray());
contextField.val(JSON.stringify(contextData));
});
});
})();
Any suggestions on what might be going wrong or alternative methods to achieve this?
first, check if your form has a redirect URL set in hubspot settings. I had this exact issue - turns out the form wasn’t configured to redirect anywhere, so contextData.redirectUrl was null. Also try wrapping your code in a timeout like setTimeout(function(){…}, 100). hubspot sometimes needs a moment to process things.
Had this exact headache a few months back. HubSpot’s form handler is probably overriding your hs_context changes. Here’s what worked for me: catch the form submission earlier and store your redirect URL separately before HubSpot gets to it. Add event.preventDefault() at the start of your submit handler, modify the context data, then manually trigger submission. Also check if your jQuery selector is actually finding the form - HubSpot generates forms with different class names depending on how they’re embedded. I switched to ‘form[data-form-id]’ instead of the hs-form class. Watch out for AJAX submissions too - some HubSpot forms skip traditional form events completely.
Your JavaScript looks solid, but HubSpot forms are notorious for timing issues. I’ve hit this exact problem before - HubSpot’s handlers often intercept the form submission process before your code can run.
Here’s what actually worked for me: ditch the URL parameters and use sessionStorage instead. It’s way more reliable than cookies and won’t mess up your URLs. Submit the form, store your data in sessionStorage, then grab it on the redirect page to populate form two.
Alternatively, tap into HubSpot’s Forms API with window.addEventListener to catch the message event HubSpot fires during processing. Gives you much better control over timing.
One more thing - verify jQuery’s actually loaded when your script runs. HubSpot loves to conflict with different jQuery versions.
I encountered a similar issue recently where timing impacted the behavior of HubSpot forms. Your script appears to be structured correctly, but it’s crucial to ensure that it executes after the HubSpot form finishes loading. I found success by incorporating a slight delay, though utilizing the HubSpot form events API is often more effective. By listening for the onFormSubmit event, you gain greater control over the timing of your data manipulation. Additionally, confirm that your redirect URL is properly configured in the HubSpot form settings; if it’s missing, contextData.redirectUrl will be undefined, leading to silent failures in your script. It may also be beneficial to add console.log statements to debug and check the values you’re receiving from the form data and context before the redirection occurs.