Redirecting Hubspot form to different urls depending on property selected.

[CMagee]

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: https://www.inbounddesignpartners.com/blog/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

[LeeBartelme]

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

[CMagee]

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

[LeeBartelme]

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.

[CMagee]

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

[LeeBartelme]

$ 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:

https://api.jquery.com/jquery.noconflict/

[CMagee]

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

[LeeBartelme]

What does console.log(selectedCountry) show?

[CMagee]

console.log(selectedCountry) shows:

VM1149:1 Uncaught ReferenceError: selectedCountry is not defined
at <anonymous>:1:13
(anonymous) @ VM1149:1

Sincerely appreciate your patience with this.

[LeeBartelme]

Did you put the console log after you assigned it?

[CMagee]

I'm sorry I don't understand the question - I input the console log before and after submitting the form and got the same error message each time - the only difference was the VM numbers (e.g. the message was

VM1494:1 Uncaught ReferenceError: selectedCountry is not defined
at <anonymous>:1:13
(anonymous) @ VM1494:1 after I had submitted the form).

Kind regards,

Ciara

[LeeBartelme]

var selectedCountry = jQuery('select[name="country_region"]').val();
console.log(selectedCountry) 

Is the log after the variable assignment?

[CMagee]

Hi Lee, 

I'm still not sure I understand. I copied what you sent into the code, so the latest version 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(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();
var selectedCountry = jQuery('input[name="country_region"]').val();
console.log(selectedCountry)

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

}
});
</script>

However I still got the same error message when I searched for console.log(selectedCountry) in the Console:
VM497:1 Uncaught ReferenceError: selectedCountry is not defined
at <anonymous>:1:13

Kind regards,

Ciara

[LeeBartelme]

Weird try .value instead of .val()

[CMagee]

Thanks, I tried that, so the latest version of the code is below - however it still did not redirect and is showing the same error message when I searched for console.log(selectedCountry) in the Console.

<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"]').value;
console.log(selectedCountry)

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

}
});
</script>

Thanks,

Ciara

[LeeBartelme]

I used your exact code and it redirected to the eurpoe page when Ireland was selected. There is nothing wrong with the code you've provided. There must be something wrong with your jQuery implementation or something.

Until you can get jQuery to assign the value to selectedCountry, I think you'll have issues. Try using vanilla JS.

https://gomakethings.com/how-to-get-and-set-the-value-of-a-select-menu-with-vanilla-js/

// Get the select menu
var selectedCountry = document.querySelector('select[name="country_region"]').value;

I would think the above would work.

[CMagee]

Hi Lee, 

The issue that I am having now is that it redirects to the europe page no matter what country is selected, would you please try to submit the form using the country 'United Kingdom'?

I'll look into the other options you suggested in the meantime.

Thanks,

Ciara

[LeeBartelme · Accepted solution]

<div id="formTarget">&nbsp;</div>
<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) {

var ukLink = "https://google.com";
var europeLink = "https://yahoo.com";
var selectedCountry = jQueryform.find('[name="country_region"]').val();
console.log(selectedCountry);

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

}
});
</script>

The code here runs on your page but the form is on an iFrame. To reference the form fields you have to use the passed in jQueryFrom argument which contacts the data from the iframe about the submitted form.

[CMagee]

Thank you so much - that did the trick!

I sincerely appreciate all of your time and help with this - thank you.

All the best,

Ciara

[LeeBartelme]

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

[CMagee]

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