I need help with transferring form field values from a HubSpot form to the page that loads after form submission. My goal is to use these values to populate fields in another form on the redirect page automatically.
I’ve tried a couple of approaches but neither worked properly. First, I attempted to save the form data in browser cookies, but that didn’t work out. Then I found a JavaScript solution that’s supposed to add the form data to the redirect URL as query parameters, but I can’t get it functioning correctly.
Here’s the script I’m trying to use:
// Auto-append form field data to redirect URL
// This allows using form values on the thank you page
(function() {
var jq = jQuery;
var addDataToUrl = function (targetUrl, formData) {
var params = {};
jq.each(formData, function (index, field) {
if (field.name !== "hs_context") {
params[field.name] = field.value;
}
});
if (targetUrl.indexOf('?') > -1) {
return targetUrl + "&" + jq.param(params);
} else {
return targetUrl + "?" + jq.param(params);
}
};
jq(function () {
jq("body").on("submit", "form.hs-form", function (event) {
var currentForm = jq(this);
var submitUrl = currentForm.attr("action");
var contextField = jq("input[name='hs_context']", currentForm);
var contextData = JSON.parse(contextField.val());
contextData.redirectUrl = addDataToUrl(contextData.redirectUrl, currentForm.serializeArray());
contextField.val(JSON.stringify(contextData));
});
});
})();
What am I missing here? Has anyone successfully implemented this type of data transfer between HubSpot forms and redirect pages?
Had the same issue a few months ago. The problem was serializeArray() - it doesn’t capture checkboxes and radio buttons properly when they’re not selected. I ditched jQuery’s serialization and just looped through the form fields with vanilla DOM instead. Also heads up - HubSpot forms have hidden fields that mess things up. I filtered out anything starting with ‘hs_’ (except the context field) and that cleaned it right up. Your script looks good, but add a small delay before you modify the context. HubSpot needs a beat to finish its own processing first.
Had the same issue last year - timing was definitely the problem. Your script’s probably trying to modify hs_context before HubSpot fully loads the form. I switched to using the HubSpot Forms API onFormSubmit callback instead, which fires at exactly the right moment. You can grab the form data and modify the redirect URL right in that callback. Just prevent the default submission, update the context with your query parameters, then let the form submit normally. Also check if jQuery’s actually loaded when your script runs - HubSpot forms don’t always guarantee it’s there. I also had good luck using sessionStorage instead of cookies for storing temporary data between pages.
check your console for errors first - that’s usually the culprit. I’ve seen this break when jQuery isn’t loaded or there’s a script conflict. drop some console.log statements in your functions to see if they’re firing at all. also, hubspot changes their form structure sometimes, so double-check your selectors. try ‘form[data-form-id]’ instead of ‘form.hs-form’ and see if that works.
Your script looks fine, but you’ve got a timing issue. HubSpot forms load async, so your event handler’s either attaching before the form exists or after HubSpot’s already set up its own handlers.
I’ve hit this exact problem before. What worked for me was wrapping the script in a window.addEventListener for the ‘message’ event - you can listen for HubSpot’s form events since they fire specific postMessage events during the form lifecycle.
Another reliable approach is using the global hsFormCallback function. Just define it before the HubSpot embed code loads, and it’ll get called when forms are ready. Then you can safely attach your submit handler.
One more thing - double-check that your redirect URL is actually set in the HubSpot form settings. If there’s no redirectUrl in the context object to begin with, your script won’t have anything to modify.