Unique Thank You page based on form checkbox

SOLVE
Occasional Contributor

I’m trying to configure a HubSpot form to redirect to a URL if the “I’m a current customer” field is checked. I also want the same form to redirect to a different URL if the field is unchecked.

 

How would I make the redirectURL into a conditional statement based on whether or not a box is checked?

 

Example:

 

If

I’m a current customer [is checked]

Then

Redirect to ‘google.com’

 

 

Else If

I’m a current customer [is NOT checked]

 

Redirect to ‘thank-you-page’

 

This is what I tried but unfortunately did not yield results.

 

<!--[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: "#######",
	formId: "########",
	onFormSubmit: function($form) {
			var choice = $('input[value="current_giving_customer"]').prop('checked', true).change();
			if (choice == 'true') {
				window.location = "https://google.com/";
			} else if (choice == 'false'){
				window.location = "https://npr.org";
			} 
		} 
});
</script>

 

 

 

Thanks for your help!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Top Advisor | Gold Partner

@priscillam - You're on the right track. Just a few tweaks to your code. See the $form being passed through the callback function?

1. You should use that element to find the inputs of the form.  eg. $form.find()

2. 

$('input[value="current_giving_customer"]')

This is incorrect, you want to find input by name or id

$('input[name="current_giving_customer"]')

 3. I don't think it's good practice to evaluate a checked against the string 'true'; it should be just true

 

 

Try this code instead:

<!--[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: "#######",
	formId: "########",
	onFormSubmit: function($form) {
            if($form.find('input[name="current_giving_customer"]').prop('checked')){
                window.location.href = "https://google.com/";
            }else{
                window.location.href = "https://npr.org";
            }
} }); </script>

If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

9 Replies 9
Community Superstar

_hubspot-button-accept-as-solution-gif-v00.gif

 

Q: Redirect to External URL Based on Form Field value?

 

Short A: Not currently native HubSpot functionality.

 

Longer A:

This quesiton has been asked / answered a few times to varying degrees. You may find the following threads helpful.

 

Note: some of the threads contain solutions whose functionality may now depend on your HubSpot plan.

 

- see Redirect to External URL Based on Form Field

- see Customize Form - Redirect based on checkbox value

 

Always happy to help you build on HubSpot.

 

Best,
Frank


hubspot-solutions-signature-mfrankjohnson-v05.png

www.MFrankJohnson.com

Help find this post quickly ... accept this solution now.

Hope that helps.

 

Best,
Frank

 

MFrankJohnson-dot-com-HubSpot-Community-banner-gif-v20190817

Top Contributor

@priscillam Your conditional statements are wrong since it's comparing choice to a string.

For a checkbox, conditional statements are like this,
 

 

<!--[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: "#######",
	formId: "########",
		css: "",
		onFormSubmit: function($form) {
			var choice = $('input[name="test_checkbox"]:checked').val();
			if (choice) {
    				window.location = "https://google.com/";
    		} else {
    			window.location = "https://npr.org";
    		} 
		} 
		

});
</script>

 

I've also created a test post for the same. You can check here :- https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Top Contributor

Hi @priscillam,

Your logic is correct but if conditional statement is wrong. Choice is getting compared to string and not true/false value.

<!--[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: "xxxxxxxxxxxxxxxxxxxxxxxx",
		onFormSubmit: function($form) {
			var choice = $('input[name="test_checkbox"]:checked').val();
			if (choice) {
    				window.location = "https://google.com/";
    		} else {
    			window.location = "https://npr.org";
    		} 
		} 
		

});
</script>


You can change the checkbox name in the above script to your checkbox name and it should work fine.

Test post I created for the same :- https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Top Contributor

Hi @priscillam,

Your logic is correct but if conditional statement is wrong. Choice is getting compared to string and not true/false value.

<!--[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: "xxxxxxxxxxxxxxxxxxxxxxxx",
		onFormSubmit: function($form) {
			var choice = $('input[name="test_checkbox"]:checked').val();
			if (choice) {
    				window.location = "https://google.com/";
    		} else {
    			window.location = "https://npr.org";
    		} 
		} 
		

});
</script>


You can change the checkbox name in the above script to your checkbox name and it should work fine.

Test post I created for the same :- https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Top Contributor

Hi @priscillam,

Your logic is correct but if conditional statement is wrong. Choice is getting compared to string and not true/false value.

<!--[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: "xxxxxxxxxxxxxxxxxxxxxxxx",
onFormSubmit: function($form) {
var choice = $('input[name="test_checkbox"]:checked').val();
if (choice) {
window.location = "https://google.com/";
} else {
window.location = "https://npr.org";
}
}

});
</script>

You can change the checkbox name in the above script to your checkbox name and it should work fine.

Test post I created for the same :- https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Highlighted
Top Contributor

Hi @priscillam,

Your logic is correct but if conditional statement is wrong. Choice is getting compared to string and not true/false value.

<!--[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: "xxxxxxxxxxxxxxxxxxxxxxxx",
onFormSubmit: function($form) {
var choice = $('input[name="test_checkbox"]:checked').val();
if (choice) {
window.location = "https://google.com/";
} else {
window.location = "https://npr.org";
}
}

});
</script>

You can change the checkbox name in the above script to your checkbox name and it should work fine.

Test post I created for the same :- https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Top Advisor | Gold Partner

@priscillam - You're on the right track. Just a few tweaks to your code. See the $form being passed through the callback function?

1. You should use that element to find the inputs of the form.  eg. $form.find()

2. 

$('input[value="current_giving_customer"]')

This is incorrect, you want to find input by name or id

$('input[name="current_giving_customer"]')

 3. I don't think it's good practice to evaluate a checked against the string 'true'; it should be just true

 

 

Try this code instead:

<!--[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: "#######",
	formId: "########",
	onFormSubmit: function($form) {
            if($form.find('input[name="current_giving_customer"]').prop('checked')){
                window.location.href = "https://google.com/";
            }else{
                window.location.href = "https://npr.org";
            }
} }); </script>

If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Occasional Contributor

God Bless you! Smiley Happy This works brilliantly and I appreciate your quick help. 

 

All that was missing was an extra curly bracket to close the "onFormSubmit" section. Posting the working solution for anyone else out there. Smiley Happy

 

<!--[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: "#######",
	formId: "##############",
	onFormSubmit: function($form) {
            if($form.find('input[name="current_giving_customer"]').prop('checked')){
                window.location = "https://google.com/";
            }else{
                window.location = "https://npr.org";
            }
        }
});
</script>
Occasional Contributor

Hello again! I was wondering if this code snippet still works for you? I created a second landing page and used this code template to make a new redirect on submit when a box is checked. However, it is not redirecting. So I tried this out on the original LP and noticed that it no longer redirects when the check box is checked. Is anyone available to try this code out and/or help me debug? Thanks!

Reply
0 Upvotes