Customize Form - Redirect based on checkbox value

haylinds
Member

Trying to figure out how to customize this form embed so that if the checkbox is selected, the user is redirected to Thank You Page #1 on form submit. If unchecked, the user is redirected to Thank You Page #2.

 

Struggling on manipulating the embed code, but this is what I have so far (my logic behind it, if nothing else):

 <!--[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({
            css: '',
            portalId: 'HUB ID HERE',
            formId: 'GUID-GOES-HERE',
            redirectUrl: {{redirect}},
            onFormReady:  function ($form) {
                var box = $("#preferred_agent_toolkit_checkbox-GUID-GOES-HERE").change(function() {
                    if($('#preferred_agent_toolkit_checkbox-GUID-GOES-HERE').prop('checked')) {
                        alert('checked');
                        {% set redirect = 'http://google.com' %}
                    } else {
                        {% set redirect = 'http://yahoo.com' %}
                    }
                }
            },
            onFormSubmit: function ($form) {
            }
        });

    </script>

I know the whole "redirect" variable isn't correct code, but how would I do this? Thanks in advance!

10 Replies 10
haylinds
Member

An update to trying to figure this out. Still could use some help.

I'm attempting to replace the name of the input with the redirect values I want. The following still redirects me to the default redirectUrl despite checking the checkbox BUT my console logs reflect the replacement. Any ideas?

    <!--[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({
            css: '',
            portalId: '259915',
            formId: 'my_guid',
            redirectUrl: 'http://google.com',
            onFormReady: function ($form) {
                $("input[name=preferred_agent_toolkit_checkbox]").change(function () {
                    if($("input[name=preferred_agent_toolkit_checkbox]").prop('checked')) {
                        var new_hs_context = $("input[name=hs_context]").val();
                        console.log('checked', new_hs_context);
                        new_hs_context = new_hs_context.replace("http://google.com", "http://www.yahoo.com");
                        new_hs_context = new_hs_context.replace("http://google.com", "http://www.yahoo.com");
                        console.log('checked after replace', new_hs_context);
                        $("input[name=hs_context]").val(new_hs_context);
                    } else {
                        var new_hs_context = $("input[name=hs_context]").val();
                        console.log('not checked', new_hs_context);
                        new_hs_context = new_hs_context.replace("http://google.com", "http://www.cnn.com");
                        new_hs_context = new_hs_context.replace("http://google.com", "http://www.cnn.com");

                        console.log('not checked after replace', new_hs_context);
                        $("input[name=hs_context]").val(new_hs_context);
                    }
                });
            }
        });
    </script>

 

0 Upvotes
emanur
Participant

I'm facing the exact same issue. In my case I want to redirect based on a radio select value. 

 

My specific use case is that my visitors click on a "free demo" CTA and then have 3 options for the demo (watch a video now, book a demo or start a trial) . Currently I have to take them to a dedicated page and then on to one of 3 landing pages. 3 submits is excessive!

 

Should I conclude that as there have been no replies, there is no way of doing this? It's a bit disappointing if that's the case. 

0 Upvotes
stevesitehub
Member

I'm trying to do the same thing as the above post. I want to send different PDFs to users based on their Checkbox selection. Is this possible?

anders_grove
Contributor | Elite Partner

A crude, but working example;

 

<!--[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: "xxxxxxx",
		formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
		css: "",
		onFormSubmit: function($form) {
			var choice = $('input[name="redirect_choice"]:checked').val();
			if (choice == 'Redirect 1') {
				window.location = 'http://www.example-1.com';
			} else if (choice == 'Redirect 2'){
				window.location = 'http://www.example-2.com';
			} else if (choice == 'Redirect 3'){
				window.location = 'http://www.example-3.com';
			}
		} 
	});
</script>

 

 

0 Upvotes
acaffa1
Participant

Hi! I'm trying to implement something like this and can basically only copy/paste other people's code since I have no Java experience. Does anyone have a working example of this? 

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner

@anders_grove is provides the example I would (though I like to access my form values via serialization as opposed to manually digging into specific DOM elements).

 

In addition to what he suggests - I would also disable the default redirect via adding an inlineMessage property to your form settings. That way - you don't run into "race conditions" where the default hubspot redirect may occur before the onFormSubmit callback runs (this shouldn't happen - but I generally like to safegaurd myself and explicitly set things when I customize redirect locations.

 

That also can let you put a default message in that says, "Thank you, please wait while we process your request..." or something to that effect - if for whatever reason the script hangs.

Derek Cavaliero
Director, Design/Development

WebMechanix
www.webmechanix.com
Albo
Participant

@anders_grove @derekcavaliero 

 

Would either of you happen to have any tips for implementing this within a form on a HubSpot landing page?

 

The built-it form module doesn't appear to allow adding JS. Also, It would seem that when instead try to use an embed script within a rich text module, it gets rejected if it contains any JS. Customer service said that rich text modules don't allow for JS.

 

Any tips would be most appreciated!

 

 

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner

@Albo you could download the legacy "Custom HTML" module from the marketplace - or - simply create your own custom module where you hard-code the form javascript as needed for the situation you're in. 

Derek Cavaliero
Director, Design/Development

WebMechanix
www.webmechanix.com
Albo
Participant

@derekcavaliero the legacy module is great! Thank you for pointing that out. I wonder why it's not included by default.

awolally
Participant

Hi there, I'm also trying to redirect to a different thank you page based on a checkbox value (checkbox value indicates the product type they are requesting a demo of). Our SEO contractor needs this to do conversion tracking.

 

We use wordpress as our CMS. There are 4 product options and visitors can select one or as many as all of the checkboxes.

 

I don't have coding experience ... Anyone know if this code would work for us in the above scenario? 

 

 

0 Upvotes