Using the redirectUrl property on forms


#1

We’re trying to use the same HubSpot form in several places on our website, having it redirect to different landing pages. After much googling I found the redirectUrl property, but what I’ve tried so far doesn’t seem to work. Does anyone have experience using this property?

Here’s where I read about it: http://developers.hubspot.com/docs/methods/forms/advanced_form_options

And here’s how I’m trying to use it:

<!--[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: 'PORTAL_ID',
		formId: 'FORM_ID',
		redirectUrl: 'http://google.com'
	});
</script>

The form has NO redirect URL OR inline message defined in the HubSpot UI.

Not only does the redirectUrl property not work, the onFormSubmit callback doesn’t seem to work either. Does anyone know what we might be doing wrong?

<!--[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: '2026394',
		formId: 'ca5ff16c-b03f-4b3d-82bc-778d543df114',
		redirectUrl: 'http://google.com',
		onFormSubmit: function ($form) {
			console.dir($form);
			alert('SUBMIT');
			window.open('http://google.com');
		}
	});
</script>

Nothing gets alerted or consoled.


Is it possible to use redirectUrl when submitting a form into HubSpot using POST method?
#2

Ok so the problem was in fact that the form didn’t have a redirect url OR inline message defined in the Hubspot UI. Seems one (at least inline message - I haven’t tried the other) is needed for the redirectUrl or onFormSubmit properties to work.

Bonus question though: Is there any way to open the redirectUrl in a new window? Using onFormSubmit and window.open doesn’t work because popup blocker :confused:


#3

Hi @_al

I’m not seeing any problems with that embed code, using a test for that doesn’t have a redirect or inline message set. Do you have an example page I could look at where you’re seeing that behavior?

We don’t have an option to make the redirect open in a new window, but you can do that by adding the target="_blank" attribute to the <form> tag after the form loads, either using the onFormReady or onFormSubmit options in the embed code.


#4

Thanks. The redirectUrl refused to open before we added an inline thank you message. In fact, nothing at all happened when submitting the form before we added an inline thank you message. We never tried with a redirect URL in the HubSpot UI. That’s no longer a problem though as we still want the thank you message anyway.

Adding target="_blank" onFormReady doesn’t work unfortunately because Chrome blocks the popup. I assume this is because the redirectUrl occurs in a callback function rather than onsubmit?


#5

Do you have an example page I could take a look at? I’m testing this with a form that doesn’t have an inline thank you message or a redirect URL set in the UI, and the redirectUrl I’m setting in the embed code is still working for my test.

The redirect URL works as part of the <form> action, not as a separate function. During the form submission, if a redirectUrl is set, the form will return a 302 response with the Location header set to the redirectUrl (if there is no redirectUrl, or an inline message is set, the submission returns a 204 response).


#6

You know what, when creating an isolated test page this does in fact work (the redirectUrl is picked up even though the form lacks an inline thank you message). Not sure why it didn’t work on the actual site. Perhaps I misspelled redirectUrl or something silly like that.

Anyway, this isn’t really a problem as we do want to show a thank you message anyway. The problem we’re having now is that we’d like to open the redirectUrl in a new tab.

<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>HubSpot Form</title>
		<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
	</head>
	<body>
		<!--[if lte IE 8]>
			<script charset="utf-8" type="text/javascript" src="http://js.hsforms.net/forms/v2-legacy.js"></script>
		<![endif]-->
		<script charset="utf-8" type="text/javascript" src="http://js.hsforms.net/forms/v2.js"></script>
		<script>
			hbspt.forms.create({
				css: '',
				portalId: '2026394',
				formId: 'cd6f950b-85d7-490d-957c-224d16c59f2b',
				redirectUrl: 'http://google.com',
				onFormReady: function (form) {
					form.attr('target', '_blank');
				}
			});
		</script>
	</body>
</html>

#7

Do you have that code on a test page where I could look at this? When I use that code on a test portal the form opens a new tab to google.com when I hit the submit button.


#8

No we only have the site locally for now. But this Pen doesn’t work for me either: http://codepen.io/anon/pen/RROpKJ

Perhaps you’ve allowed popups from Hubspot or something?