Hey folks, I’m stuck on a tricky issue. I want to send the data from a HubSpot form to the page it redirects to after submission. The goal is to use this data to fill out fields in a custom form on the new page automatically.
I’ve tried a few things:
Storing the data in a cookie (no luck)
Using a script I found online to add the data to the redirect URL (didn’t work)
Has anyone figured out how to do this? I’m pretty lost here and could use some help. If you’ve got any ideas or have done something similar before, I’d really appreciate your input!
Here’s a basic example of what I’m trying to do:
function sendFormData(formData) {
const redirectUrl = 'https://example.com/thank-you';
const urlWithData = addDataToUrl(redirectUrl, formData);
window.location.href = urlWithData;
}
function addDataToUrl(url, data) {
const params = new URLSearchParams(data);
return `${url}?${params.toString()}`;
}
Any suggestions would be awesome. Thanks in advance!
hey emmad, i’ve dealt with this before. have u tried using sessionStorage? it’s like a temporary storage that persists during page navigation. u could store the form data there before redirecting, then retrieve it on the new page. just remember to clear it after use to avoid data sticking around.
I’ve encountered this challenge before, and I found a solution that worked well for me. Instead of relying on cookies or URL parameters, I decided to use the browser’s localStorage to handle data transfer between pages.
On the form submission page, I stringify the form data and store it in localStorage. Then, on the redirected page, I check localStorage for the data and use it to pre-fill the necessary fields. After the data is used, it’s cleared from localStorage to prevent stale data issues.
This approach is straightforward and avoids potential security concerns associated with exposing data in URLs. It works well for typical form data sizes, keeping in mind localStorage’s size limit of roughly 5-10MB.
Have you considered using HubSpot’s hidden fields feature? It’s a built-in solution that might solve your problem without extra coding. You can set up hidden fields in your HubSpot form to capture the data you need, then use HubSpot’s form submission workflows to pass that data to your redirect page. This method is secure and doesn’t rely on client-side storage or URL parameters. To implement this, you’d create hidden fields in your HubSpot form, populate them with the required data (either dynamically or statically), and then set up a custom redirect URL in HubSpot that includes these field values as parameters. On your redirect page, you can then access these parameters to pre-fill your custom form. This approach leverages HubSpot’s native functionality and should be more reliable than custom JavaScript solutions. It’s worth exploring if you haven’t already.
I’ve faced a similar challenge and found success using AJAX to handle the form submission. Instead of relying on the standard form submit, you can intercept it with JavaScript, send the data to your server asynchronously, and then handle the redirect manually.
Here’s the gist of how it works:
Capture the form submission event
Serialize the form data
Send it to your server via AJAX
On successful submission, store the data in a server-side session
Redirect the user to the thank you page
On the thank you page, retrieve the session data and use it to populate your form
This method keeps sensitive data off the client-side and gives you more control over the process. It’s a bit more complex to set up initially, but it’s secure and flexible. Plus, it provides a smoother user experience without page reloads.
Just remember to handle errors gracefully and clear the session data after use to keep things tidy.
yo emmad, have u tried using the postMessage API? it lets u send data between windows. u could open the redirect page in a new window, send the form data with postMessage, and then have the new page listen for that message. it’s pretty slick and avoids messin with urls or storage. just make sure to handle security right!