Include form fields as redirect URL parameters on an embedded form
SOLVE
I need to embed a HS form on an external (not CoS) website. And when the user submits the form, the redirect URL needs to include form fields as parameters.
Is this possible?
We figured out a way of doing this on a CoS landing page using a native HS form, but it was pretty tricky. In this case, I need to embed the form on an external page rather than use a CoS page.
What I’m trying to accomplish is capture the lead’s info (name, company, email) and then pass that info off to a scheduling app which can use parameters to pre-fill a scheduling form so the user doesn’t have to re-enter their info. And I want to do it through a HS form first so that we capture the lead and source information in HS. If we did it straight in the scheduling app then we could create a lead using Zapier but without Source info.
Every other form app I’ve used has been able to do this. Still surprised HS can’t do it off the shelf. But I hope someone has a creative workaround. Thanks.
Include form fields as redirect URL parameters on an embedded form
SOLVE
You could achieve this by using the onFormSubmit callback and switching the form to use an inline message instead of a redirect (explained below).
hbspt.forms.create({
portalId: 'xxxxxxxx',
formId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
inlineMessage: 'Your submit message here',
onFormSubmit: function($form){
setTimeout( function() {
var formData = $form.serialize();
window.location = "http://www.yoururl.com?" + formData;
}, 250 ); // Redirects to url with query string data from form fields after 250 milliseconds.
}
});
Because you have access to the jQuery $form object inside the onFormSubmit listener you can serialize the forms data and append it to a url to redirect to after the form is submitted. This only works if you have the inlineMessage set and disable the redirectUrl for the form.
Try setting your setTimeout to something higher than 100 milliseconds and see if that helps. I haven't had or seen this issue before - and in theory it shouldn't because the onFormSubmit is processed after the form is validated and request is sent.
My theory is that if you redirect too quickly it may terminate the XHR request over to HubSpot's servers. I haven't actually tested this issue myself yet though - let me know what you find.
Include form fields as redirect URL parameters on an embedded form
SOLVE
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.
Include form fields as redirect URL parameters on an embedded form
SOLVE
@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.
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 🙂 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');}
}
}
});
Include form fields as redirect URL parameters on an embedded form
SOLVE
@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).
Actually - you'll have problems with that - because HubSpot doesn't pass the $form argument to that callback like it does for onFormSubmit (this is very dumb and I had a lengthy chat w/ HubSpot support about it).
I would reccomend using onFormSubmit over onFormSubmitted - or if you plan on using onFormSubmitted - you'll need to "cache" the $form in a global variable which would mean setting it via onFormSubmit and then referencing it in the onFormSubmitted callback.
Include form fields as redirect URL parameters on an embedded form
SOLVE
Hi @derekcavaliero - when i embed this code onto my site (after adjusting the code with my portal ID, etc, the form doesn't even appear on my page. Any advice?
Include form fields as redirect URL parameters on an embedded form
SOLVE
I built off of Derek's answer because I needed to use the built in landing pages, I was not using the form embed. The following worked for me.
<script>
//code for redirecting to brew ninja signup flow after they enter their email
$(document).ready(function() {
setTimeout(function() {
var form = $('[data-form-id=xxx-xxx-xx-your-form-id]');
form.submit(function() {
var email = $('[data-form-id=xxx-xxx-xx-your-form-id]').find('[name=email]').val();
setTimeout(function() {
window.location.href = 'https://yoursite.com?email=' + email;
}, 500);
});
}, 500);
});
</script>