Include form fields as redirect URL parameters on an embedded form

Develop, Build & Integrate APIs & Integrations
41

were you able to figure this out?

42

Hi Teun - where do I put this code?

43

I do not have the redirectUrl as part of the form’s hs_context value. Do you know if this has changed, or if there is something I need to do in order to have it as part of the value?

** Update **

I found where I could get the redirectUrl off of the event data. Thought I’d share this script. It goes through the form and appends all non-hidden form fields as query params to the redirect url. Thought it might be useful for someone else running into the same issue I did.

window.addEventListener('message', (event) => {
 if (event.data.type === 'hsFormCallback') {
 if (event.data.eventName === 'onFormSubmitted') {
 if (event?.data?.data?.redirectUrl && event?.data?.id) {
 const redirectUrl = new URL(event.data.data.redirectUrl);
 const formId = `hsForm_${event.data.id}`;
 const form = document.getElementById(formId);
 if (form) {
 Array.from(form.elements)
 .filter(
 (input) =>
 input.type !== 'hidden' &&
 input.type !== 'submit',
 )
 .forEach((field) =>
 redirectUrl.searchParams.append(
 field.name,
 field.value,
 ),
 );

 window.location = redirectUrl.toString();
 }
 }
 }
 }
});
44

Hey, @HeatherT! Thank you very much for sharing what worked for you :raising_hands: — Jaycee

45

@HeatherT thanks for sharing your solution - where would add the above script?

I’ve been testing the solutions above and I’ve created a simple HubSpot Form embedded on our website that redirects to a HubSpot Scheduling page on successful completion.

Speech Analytics Platform for CX | Chattermill (pass: 1234567)

However, I can’t get the values for email, first name and last name to append to the url.

I have no technical expertise of HTML or scripts, hence why I’m a bit lost.

Thanks in advance for any help!

46

@GMirazchiev3

I took a quick look. For some reason the value for “redirectUrl” is blank.

I’m not sure why the value for “redirectUrl” is blank. For my setup - I’ve added the redirect url in the form under “What should happen if a visitor submits this form” > where I’ve selected an “External link…”

I’m not sure if Hubspot does something different if it is an internal link???

To help troubleshoot you can add a bunch of console logs to see what is going on :slightly_smiling_face: Since the page is redirecting you’ll lose the console.logs. But in chrome developer tools you can go to the settings and select “preserve log” - so you can continue to see the logs after you’ve redircted to the new page.

And just place the script in the head or in the body within <script></script> tags. It doesn’t matter where

Here’s the script with some console logs added

window.addEventListener('message', (event) => {
 if (event.data.type === 'hsFormCallback') {
 console.log(event.data.eventName);
 if (event.data.eventName === 'onFormSubmitted') {
 for (const [key, value] of Object.entries(event?.data?.data)) {
 console.log(`${key}: ${value}`);
 }
 console.log(`REDIRECT URL: ${event?.data?.data?.redirectUrl}`);

 if (event?.data?.data?.redirectUrl && event?.data?.id) {
 const redirectUrl = new URL(event.data.data.redirectUrl);
 const formId = `hsForm_${event.data.id}`;
 const form = document.getElementById(formId);
 if (form) {
 Array.from(form.elements)
 .filter(
 (input) =>
 input.type !== 'hidden' &&
 input.type !== 'submit',
 )
 .forEach((field) =>
 redirectUrl.searchParams.append(
 field.name,
 field.value,
 ),
 );
 window.location = redirectUrl.toString();
 }
 } else {console.log('Do not have a redirect url or id');}
 }
 }
});
47

@HeatherT thanks for this - I originally had set the form settings to display an inline message and added the redirecturl in the embed code (as someone in this thread suggested).

I have now updated the form and done the same as you: I’ve added the redirect url in the form under “What should happen if a visitor submits this form” > where I’ve selected an “External link…” and added the url there.

I’ve also added the code you sent over to the page - thanks for sharing it.

However, the form data is still not appended to the redirect url, but instead a submissionID is appended (?submissionGuid=2e7ac3a9-0a94-4c79-8530-18e5f6a1e405).

Do you have any idea why this is?

Thanks again for your help so far.