Redirecting Hubspot form to different urls depending on property selected.

Develop, Build & Integrate APIs & Integrations
1

Hi all, I’ve been crawling through forums to try to redirect a Hubspot form to a url based on the ‘country_region’ property selected, however my own attempts at embedding the code on our wordpress site have failed. Could anyone please review what I have below and let me know if there is something I’ve missed?I have 2 potential hypothesis as to where I’m going wrong:

  1. I copied the code from this blog however I’m not sure if it was intended to be embedded on external websites: Customization of form submission redirects
  2. The form was originally set up to redirect to a thank you page and every time I test this it still redirects me back to the original thank you page or thank you message - I’m not sure if it is possible to override this.

Appreciate any guidance this community can provide.

<div id="formTarget">

</div>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "8867209",
 formId: "e486c69a-7203-49c4-89c4-5a17461ac09e",
 target: "#formTarget",
 onFormSubmit: function($form) {

 var ukLink = "https://www.yahoo.com";
 var europeLink = "https://www.google.com";
 var selectedCountry = $('select[name="country_region"]').val();

 if (selectedCountry == "United Kingdom") {
 window.top.location.href = ukLink
 } else {
 window.top.location.href = europeLink
 } 

 }
 });
</script>

Appreciate any help that can be provided.

Thank you,
Ciara

2

Can you turn off the form’s redirect? I’ve done this before, but never with the redirect feature being on in HubSpot.

3

Hi Lee,

Thanks for your reply. I have not been able to remove the redirect from the form - it won’t let me save it without either having a thank you message or redirect. Can I ask how you saved a form without a redirect or thank you message?

Right now I have it set to ‘thank you message’, but I’ve not had success with either ‘thank you message’ or redirect.

Thanks,

Ciara

4

I’d put the thank you message on there for sure. What happens when you submit with the thank you message (can you provide a link to your page)? Are there any errors in your browser console?

5

Hi Lee,

I don’t believe it’s a browser issue as I’ve tried a few different browsers and incognito mode. When I submit the form with the thank you message, all that happens is that the thank you message displays, and I am not redirected to either of the urls that I have specified in the embed code. I’m sorry - I’m not able to provide a link to this page as it is on our test site which is password protected.

Kind regards,

Ciara

6

I’m not saying it’s a browser issue, but the browser log can indicate issues with your code. Try doing console.log(selectedCountry) and make sure that has the value you expect. Try doing a console.log(‘sometjhing’) in the if/else statements to see which is actually running.

Try redirecting without any logic just to make sure that works. Isolate where the problem actually is.

onFormSubmit: function($form){
 window.location = 'https://google.com'
}

Example, try to get this working.

7

Thanks Lee, I got the following message:

[] Unsupported context key: onFormSubmit

warn @ v2.js?pre=1:1

Does that mean I should look for an alternative to onFormSubmit for this?

Kind regards,

Ciara

8

Do you have Marketing Hub or CMS Hub Pro or Enterprise. The docs indicate this may only work with those tiers:
These options are only available for forms created using the marketing form builder in Marketing Hub and CMS Hub Professional or Enterprise subscriptions.

9

Hi Lee,

Yes we have Maketing Hub Enterprise.

Appreciate any other suggestions you may have.

Thank you,

Ciara

10

That’s odd. I would reach out to support. I don’t understand why it doesn’t like the onFormSubmit.

11

Thanks, I did already and they advised me to post in this forum as they don’t deal with custom code!

12

Weird. ok, when I get a moment I’ll try to dig deeper and see if what I can see. It’s just odd because you are using totally standard stuff.

13

Appreciate it

14

Why does your JS code have ?pre=1 on it. How are you generating your embed code? Try removing that.

15

Thanks Lee, I removed that and the error message from the Console (regarding onFormSubmit) has disappeared, however the form still redirects to the thank you message no matter what country I select. The latest version of the embedded code is:

<div id=“formTarget”>

</div>
<!--[if lte IE 8]>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2.js”></script>
<![endif]-->
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “8867209”,
formId: “e486c69a-7203-49c4-89c4-5a17461ac09e”,
target: “#formTarget”,
onFormSubmit: function($form) {
console.log(“form is submitted already”);
jQuery(‘.hubspot_form_outer_class’).hide();
var ukLink = “https://www.yahoo.com”;
var europeLink = “https://www.google.com”;
var selectedCountry = $(‘select[name=“country_region”]’).val();
if (selectedCountry == “United Kingdom”) {
window.top.location.href = ukLink
} else {
window.top.location.href = europeLink
}
}
});
</script>

Kind regards,

Ciara

16

Are you seeing the “form is submitted already” in the browser console? What errors are you seeing in your browser console? I embedded your code on a test page of mine and it redirected to google just fine.

17

Hi Lee,

I am seeing the following 2 errors in the broswer console after I submit the form:

v2.js:1 There was an error when running your onFormSubmit function from hbspt.forms.create
runCustomerCallbackFunction @ v2.js:1

v2.js:1 TypeError: $ is not a function
at onFormSubmit ((index):311:31)
at Object.runCustomerCallbackFunction (v2.js:1:422851)
at t.submitForm (v2.js:1:540228)
at v2.js:1:538744
at l (v2.js:1:152736)
at v2.js:1:153401
at Array.u (v2.js:1:156860)
at o (v2.js:1:152109)

I tried in incognito again and still had the same result. Hopeful to hear that the redirect worked on your page but not sure what’s going wrong on my site.

Appreciate any other insights you may have into the error codes.

Thank you,

Ciara

18

$ is jQuery. It looks like from your code you are not using that variable. Try changing the ‘$’ to ‘jQuery’.

A refernce to why that might be the case on your website:

19

Thank you so much - that got it working in the sense that now it redirects to google after I submit the form instead of the thank you page, however I’m still having the issue where it won’t redirect to yahoo based on the selected country being United Kingdom - can I please ask you for further assistance with this?

Below is the latest version of this code:

<div id=“formTarget”>

</div>
<!--[if lte IE 8]>
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2.js”></script>
<![endif]-->
<script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/v2.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “8867209”,
formId: “e486c69a-7203-49c4-89c4-5a17461ac09e”,
target: “#formTarget”,
onFormSubmit: function(jQueryform) {
console.log(“form is submitted already”);
jQuery(‘.hubspot_form_outer_class’).hide();
var ukLink = “https://www.yahoo.com”;
var europeLink = “https://www.google.com”;
var selectedCountry = jQuery(‘select[name=“country_region”]’).val();
if (selectedCountry == “United Kingdom”) {
window.top.location.href = ukLink
} else {
window.top.location.href = europeLink
}
}
});
</script>

I have tried switching out “United Kingdom” for other countries to see if the space was causing the issue but it is still not redirecting - all form submissions now go through to Google only.

Thanks again,

Ciara

20

What does console.log(selectedCountry) show?