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.
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.
I’m pretty sure this is because your form is loading in an iframe.
I see that you have one of the new “themes” enabled here in the form editor’s Style & preview tab. This causes the form to render in an iframe, so I’d recommend reverting to the “old theme” if you need to customize the embed code.
Can you see any reason why this modifying the HubSpot form embed script this way would interfere with how HubSpot receives the data upon submission?
For whatever reason, when I use this method on a Firefox browser the contact is not passed back to HubSpot. Chrome and Safari both function as intended. The default (non-modified) script works fine in Firefox. All are standard browsers with default configurations, *not* in incognito.
<!--[if lte IE 8]>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2-legacy.js”></script>
<![endif]-->
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2.js”></script>
<script>
hbspt.forms.create({
portalId: “xxxxxxxx”,
formId: “xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx”,
inlineMessage: ‘Just a moment please’,
onFormSubmit: function($form){
setTimeout( function() {
var formEmail = $form.find(‘input[name=“email”]’).val();
window.location = “https://www.xxxxx.com/xxxx/?email=” + encodeURIComponent( formEmail );
}, 100 ); // Redirects to url with query string data from form fields after 100 milliseconds.
}
});
</script>
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.
@derekcavaliero I am trying to get this solution to work. Your snippet has come the closest to solving our issue however what happens with this code it redirects the page to a 404. Basically it pulls ALL the form data i think when we really only need to pull the email
So the URL string is full of parameters and at some point near the end of that screen it breaks the link.
If you only need to pass 1 value through - simply dig into the form and get the value manually using the $form jQuery collection parameter in the onFormSubmit callback:
onFormSubmit($form){
var email = $form.find('input[name="email"]').val();
var redirectBase = 'https://www.google.com';
window.location = redirectBase + '?email=' + email;
}
the reason your URL is breaking is because my previous script had a flaw. There are better ways to go about it - but for simple 1 parameter redirect logic - the above is as simple as it gets.
Hi @derekcavaliero ! New Hubspot user here, and I’m a bit stuck, but it sounds like this code is pretty much exactly what I need. We’re capturing some basic data in a Hubspot form (on a HS landing page) and then would like to redirect to a Calendly booking page with email and name embedded in the URL so Calendly can grab it.
I’ve tried just setting the form redirect link to be
(as this article states) but that doesn’t seem to work, so I guess I need your code somewhere… the trouble is, I’m not sure where! Do I need a new custom module to add the javascript to the landing page? Would it go above or below the form itself?
Appreciate any insight! Thank you for this thread!
If you’re using a hubspot hosted page with a default HubSpot form module, you’ll need to use the global onFormSubmit callback as such:
<script>
function fieldsArrayToObject( fieldsArray ) {
var valueCounter = {};
var fields = {};
for ( var i = 0; i < fieldsArray.length; i++ ) {
var field = fieldsArray[i];
if ( valueCounter.hasOwnProperty(field.name) ) {
valueCounter[field.name]++;
} else {
valueCounter[field.name] = 1;
}
}
for ( var i = 0; i < fieldsArray.length; i++ ) {
var field = fieldsArray[i];
if ( !fields.hasOwnProperty(field.name) ) {
fields[field.name] = (valueCounter[field.name] > 1) ? [] : '';
}
if ( fields[field.name].constructor === Array ) {
fields[field.name].push(field.value);
} else {
fields[field.name] = field.value;
}
}
return fields;
}
window.addEventListener('message', function(event) {
if (event.data.type !== 'hsFormCallback') return;
if (event.data.eventName === 'onFormSubmit') {
var fields = fieldsArrayToObject(event.data.data);
var redirect = 'https://calendly.com/highwayed/info-session?firstname=' + fields.firstname + '&lastname=' + fields.lastname + '&email=' + fields.email;
window.location.href = redirect;
}
});
</script>
A few notes:
You need to make sure the form module on the page is set to show an inline message and not redirect when submitted. Otherwise this may not function properly
There is a utility method/function in the example above that formats the form field data from an array of objects into a single object of key:value pairs which is a much more sensible format (HubSpot doesn’t format it this way naturally which is kind of a pain).
You would need to add this into the page settings in either the Header or Footer HTML under “Advanced Settings”
Hi @derekcavaliero , thank you for helping all of us for 6 YEARS! I put this code into the footer and it seems to work even though I’m not using an inline thanks message. Should I use an inline message anyways just to be safe?
If I don’t have to use an inline message then maybe I could update the code to use the form’s redirecturl like this?..
var redirect = fields.redirecturl + '?firstname=.....
This would be nice, because then I can simply paste the same code in the footer of all my pages
Hi Derek,
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 and I do not receive any error messages. Advice on what I’m doing wrong?
Hi @derekcavaliero ,
how can we modify this code within the Hubspot platform please ?
I would love to apply this redirect behavior to a Hubspot form used within a Hubspot landpage !
I tried applying the code on a custom module (module.js) but it doesn’t seem to work !
Thank you
Thank you so much for posting. Can you explain a little as to where we put this code? Do we add it to the embed code we get from the form? Or do we add somewhere on the non-hubspot landing page where we embed the form? Appreciate any additinal guaidance. Thanks!
Hi @Lloyd_Silver,
Another way to do this is by re-running the hbspt.forms.create method of the embed code on change to each field and recreating the redirectUrl, appending each field. This changes the context and rebuilds the form on each call. @derekcavaliero 's method is probably better, but there are multiple ways to proceed.
In your JS, recall that entire method on change to each field, creating a redirectUrl like:
redirectUrl:‘https://www.domain.com/page?firstname=Lloyd’. Be sure to include the ‘target’ node so the embed code knows where to rebuilt the form each time.
1. I’m not sure to really understand how to use target:’#target-node-for-form-build’
2. I tried the dynamic query string (as i saw in HS knowledge) but it didn’t work neither and i’ve the feeling it’s because of the “?” which is inside the URL.
