Hubspot Form – Custom Dynamic Redirect

There isn’t an out-of-box functionality that allows you to set different redirect actions based on values from a form submission with a Hubspot form.

However, some easy javascript code inserted in the header of your site can allow you to easily do that.

To get this behavior, its pretty simple.

1. Figure out what form fields would determine the dynamic links, and what links what responses should redirect to
2. Update this JS file to reflect (lines 31-35 in the example file; shown below in full too)
3. Add the JS to the header HTML of any page the form is on.
4. Switch the behavior of the form to “show thank you message” (and the text that is in there actually doesn’t matter— its just that HS requires it)
5. Profit

Script can be downloaded here, or its pasted below for your perusal:

<script>
	function fieldsArrayToObject( fieldsArray ) {
		var valueCounter = {};
		var fields = {};
		for ( var i = 0; i < fieldsArray.length; i++ ) {
			var field = fieldsArray[i];
		
			if ( valueCounter.hasOwnProperty(field.name) ) {
				valueCounter[field.name]++;
			} else {
				valueCounter[field.name] = 1;
			}
		}
		for ( var i = 0; i < fieldsArray.length; i++ ) {
			var field = fieldsArray[i];
			if ( !fields.hasOwnProperty(field.name) ) {
				fields[field.name] = (valueCounter[field.name] > 1) ? [] : '';
			}
			if ( fields[field.name].constructor === Array ) {
				fields[field.name].push(field.value);
			} else {
				fields[field.name] = field.value;
			}
		}
		return fields;
	}
	window.addEventListener('message', function(event) {
		if (event.data.type !== 'hsFormCallback') return;
		if (event.data.eventName === 'onFormSubmit') {
			var fields = fieldsArrayToObject(event.data.data);
			if (fields.form_test___which_website_ == "Google") {
				var redirect = 'https://google.com';
			} 
			if ((fields.form_test___which_website_ == "Hubspot")) {
				var redirect = 'https://hubspot.com';
			}
			window.location.href = redirect;
		}
	});
</script>

Little context for helping figure out the form. The entire first half (up to the “window.addEventListener” part) is just setting up a function that searches for all form properties across all the page. The second half is finding the specific one we’re interested in, and modifying the “onFormSubmit” behavior based on the value in there at the time of the form submit.

In this example, there are only two possible options to this drop-down, either “Google” or “Hubspot”. You’ll want to adjust these values to whatever your drop-down option (or this can work for a number field, or really any kind of field), and then you’ll want to set the actual redirect (the next line down, “var redirect = ‘https://google.com'” to whatever place you want the form to go.

Hope this helps, let me know if you have any questions (you can just use the form below, or email to marketing@areveo.com)!

For more information, or to schedule a discovery call to see how Areveo can drive value for your brand, reach out below!