topic Re: Unique Thank You page based on form checkbox in CMS Development

Unique Thank You page based on form checkbox

priscillam — Tue, 11 Sep 2018 21:18:55 GMT

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:

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!

Re: Unique Thank You page based on form checkbox

MFrankJohnson — Wed, 12 Sep 2018 00:00:42 GMT

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

www.MFrankJohnson.com

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

Re: Unique Thank You page based on form checkbox

Anonymous — Wed, 12 Sep 2018 05:25:38 GMT

@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=2432204&tc_deviceCategory=desktop&template_layout_id=6165858760

Re: Unique Thank You page based on form checkbox

Anonymous — Wed, 12 Sep 2018 05:30:28 GMT

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=2432204&tc_deviceCategory=desktop&template_layout_id=6165858760

Re: Unique Thank You page based on form checkbox

Anonymous — Wed, 12 Sep 2018 05:31:50 GMT

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>

Re: Unique Thank You page based on form checkbox

Anonymous — Wed, 12 Sep 2018 06:27:27 GMT

Hi @priscillam,

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

<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=2432204&tc_deviceCategory=desktop&template_layout_id=6165858760

Re: Unique Thank You page based on form checkbox

Anonymous — Wed, 12 Sep 2018 09:22:43 GMT

Hi @priscillam,

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

});
</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=2432204&tc_deviceCategory=desktop&template_layout_id=6165858760

Re: Unique Thank You page based on form checkbox

tjoyce — Thu, 13 Sep 2018 11:19:48 GMT

@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()

$('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 😄

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

Drop by and say Hi to me on slack.

Re: Unique Thank You page based on form checkbox

priscillam — Wed, 12 Sep 2018 23:17:33 GMT

God Bless you! 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. 🙂

<!--[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>

Re: Unique Thank You page based on form checkbox

priscillam — Tue, 06 Nov 2018 18:55:35 GMT

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!

Re: Unique Thank You page based on form checkbox

MAJafri — Thu, 08 Apr 2021 20:43:01 GMT

What if I have a dropdown and based on what item is selected decides which link.

Will it be same for .prop('checked')