Ability to redirect to multiple thank you page based on form response

On a form, there is a field with two different responses, which helps to determine the ideal customer. It is very important to have the feature to redirect a visitor to separate thank you pages based on the response. To B2B customers, we sell our products directly but to B2C customers, we redirect them to e-commerce channels (such as eBay or Amazon). In this case, both the types of customers are important. We can use one landing page and form to target both types of audiences to promote the product but redirect them to the relevant offer/content based on the response.

 

HubSpot updates
37 Replies
FORCINGMETO
New Contributor

I don't understand your question - 

anders_grove
Regular Contributor

Hi, see example using select below:

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

 

FORCINGMETO
New Contributor

Yeah, and it works well. Do you have an issue with it? 

MFall
New Contributor

Make sure that you DON'T tell hubspot to redirect to another page on the "Options" tab of the form builder. Instead, Diplay a thank you message, write something like "Thank you for submitting the form. You will be redirected shortly." and then you shouldn't have any redirect issues on the window.location piece.

 

 

luribeiro
New Contributor

I cant believe we dont have this feature yet Smiley Sad

 

Kselby
Regular Contributor

@anders_grove I am trying to make your setup but for a single checkbox field. When someone checks the box they are directed to one page, and when they don't they are directed to a different page. The issue I am running into is the form does not let me edit the embed code. Where do I place the code?

 

Here is the code I have, does this look correct?

 

<!--[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: "xxxxxxxxxxxxxxxxxxxxxxxxx",
		sfdcCampaignId: "xxxxxxxxxxxxx”,
		onFormSubmit: function($form) {
			var answer = $('input[name=“answer_yes_no”]).val();
			if (answer:checked) {
				window.location = 'http://www.page-1.com';
			} else {
				window.location = 'http://www.page-2.com/product‘;
		} 
	});
</script>
EDG1
Occasional Contributor

I was surprised to learn this wasn't already a basic level of functionality when it is with other platforms.  Please add this in asap. 

Woodsy
Top Contributor

Is there a way of adapting @anders_grove code for two sets of radio buttons that covers the various permutations of input?

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

 

ljschwabtx
New Contributor

Anyone know why when using this code that the object hubspt.forms is not being recognized? 

ChandlerW
Occasional Contributor

Heck yeah, this worked for us!

 

We ask for Number of Employees in our forms so we can route leads to the right team.

Here's how ours turned out:

 

<!--[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",
    onFormSubmit: function($form) {
        if($form.find('input[name="numberofemployees"]').val() >= 1 && $form.find('input[name="numberofemployees"]').val() < 8) {
            window.location.href = "https://www.google.com/search?q=smb";
        }else if ($form.find('input[name="numberofemployees"]').val() >= 8 && $form.find('input[name="numberofemployees"]').val() < 26){
            window.location.href = "https://www.google.com/search?q=mm";
        }else {
            window.location.href = "https://www.google.com/search?q=ent";
        }
    }
});
</script>