Form Redirect to multiple thank you pages code

Highlighted
Regular Contributor

I am trying to make a setup for one of my forms on a Hubspot landing page that is 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?

 

If I am trying to accomplish this with a form that I use on Hubspot and I am not embedding on a template is it still possible? I am assuming I would just need to use custom html instead of a form module on the template to accomplish this?

 

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>
5 Replies 5
Regular Advisor | Silver Partner

Hey @Kselby 

 

Without running your code my instinct is to be wary of the "redirectUrl" property in the form customisation. I'm not sure of the order the events fire in so you may need to set the "redirectUrl" property with your "onFormSubmit" method.

 

Here's how to customised the Form Embed Code if anyone else is curious:
https://developers.hubspot.com/docs/methods/forms/advanced_form_options

 

Are you embedding the Form in a HubSpot COS page or another site?

If you're using the HubSpot COS you can create a new Module, with the Embed Code, then drop that into the page. If you are embedding the form in a module I would also take advatage of the "target" property and wrap your form in a div and set an ID for targeting.

 

Have fun

Mike

Regular Contributor

Thank you for the reply Mike, this helps a lot! I am a bit of a newbie with writing this type of code, what exactly do you mean by setting the "redirectUrl" property in the "onFormSubmit" method? Do I move the "redirectUrl" line somewhere else? 

 

I created a new module with this code placed within it. I placed it in the JS section in the module, I assume this is correct? 

Reply
0 Upvotes
Regular Advisor | Silver Partner

Yes, making a new module would be the way to go.

 

I expect a bit of experimentation to see how you change the Redirect URl Parameter.

 

It may work to set a varible and add an event listener to the checkbox which changes the URL when the checkbox is clicked.

 

var myRedirectUrl = "https://url1.com";
...
portalId: "xxxxxxxx",
formId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
redirectUrl: myRedirectUrl,
...

Have fun

Mike

Regular Contributor

This is what I have right now, but the URL is not changing when I check the box for some reason. Do you know why this won't work? Thanks!

 

<!--[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>
  var form_url = "";
  $('#answer_yes_no-67e9288d-4ce8-4199-a896-e5912b9f6db4').click(function() {
    var answer = $('#answer_yes_no-67e9288d-4ce8-4199-a896-e5912b9f6db4').val();
			if (answer.is(':checked')) {
				form_url = 'https://www.test.com';
        console.log(form_url);
			} else {
				form_url = 'https://www.test.com/product';
        console.log(form_url);
		} 
  });
	hbspt.forms.create({
		portalId: "xxxxxx",
	formId: "xxxxxxxxxxxxxxxxxxx",
		redirectUrl: form_url,
	});
</script>
Reply
0 Upvotes
Regular Advisor | Silver Partner

Hmmm... that's what I would have done.

 

What if you keep the variable and add the method from your first post.

 

...
redirectUrl: form_url,
onFormSubmit: function($form) {
    var answer = $('input[name=“answer_yes_no”]).val();
    if (answer:checked) {
         form_url  = 'http://www.page-1.com';
    } else {
         form_url  = 'http://www.page-2.com/product‘;
 } 
...

Haven't had time to test it but it's worth a shot.

Any joy?

Mike

Reply
0 Upvotes