Sometimes you may want to use a conditional redirect to send users to different thank you pages based on the answer they've provided on your form.
For example, you might have a dropdown field asking them what location they are based in and you can redirect them to a specific Meetings link with a sales rep in their region based on that answer.
HubSpot Form Events
You can use HubSpot's onFormSubmit event to detect when the form was submitted, find a particular field and update the URL based on the answer.
There are two ways to use events: using an event listener or setting the event when you use the form embed code.
Form Event Listener
The event to detect form submission looks like this:
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
// Your code here
}
});
Within that event, you can loop through event.data.data to see what the user submitted on the form, using event.data.data[item]["name"] to get each form field's internal value and event.data.data[item]["value"] to see what the user entered in that form field.
Embedded Form Event
The event in an embedded form looks like this:
hbspt.forms.create({
portalId: '123456',
formId: 'abcdef12-12345fff-9876a1b2c3',
onFormSubmit: function($form) {
// Your code here
}
});
Within this event you can use JavaScript or jQuery to find the field value, using a selector like var myField = $form.find('input[name="FieldID"]').val();
onFormSubmit function uses the jQuery $form, so you'll need to have jQuery enabled on your page for this to work.Redirect based on the answer to a select/dropdown field
Let's say we have a field called "Favourite Fruit" with the answers "Bananas" and "Apples" and we want to redirect to the relevant Wikipedia page based on their answer.
Find the field's internal values
The first thing we want to do is find the field's internal values - these are found under the property information here:
Set up your code
Pages on the HubSpot CMS
On the HubSpot CMS, you can create an event listener using the "Form Event Listener" above to detect when the form has been submitted, find a value and update the redirect URL:
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
for (item in event.data.data) {
if (event.data.data[item]["name"] == "favourite_fruit") {
if (event.data.data[item]["value"] == "Pineapple") {
window.location = "https://en.wikipedia.org/wiki/Pineapple";
}
if (event.data.data[item]["value"] == "Bananas") {
window.location = "https://en.wikipedia.org/wiki/Banana";
}
if (event.data.data[item]["value"] == "Grapes") {
window.location = "https://en.wikipedia.org/wiki/Grape";
}
}
}
}
});
What the above does is loop through all event.data.data items (each field), finds the one with the internal name "favourite_fruit", then checks the value. If it's Pineapple, it changes the URL (using window.location) to "https://en.wikipedia.org/wiki/Pineapple". If it's Bananas, it changes the URL (using window.location) to "https://en.wikipedia.org/wiki/Banana"... etc.
External sites with an embedded form
Because embedded forms are used within an iframe, the above code will not work. One option is to use set the "render as HTML" option in the style section of your form to prevent it from appearing in an iframe.
Alternatively, use the "Embedded Form Event" above to add your code, like this:
hbspt.forms.create({
portalId: '123456',
formId: 'abcdef12-12345fff-9876a1b2c3',
onFormSubmit: function($form) {
var favouriteFruit = $form.find('select[name="favourite_fruit"]').val();
setTimeout( function() {
if ( favouriteFruit == "Pineapple" ) {
window.location.href = "https://en.wikipedia.org/wiki/Pineapple";
}
if ( favouriteFruit == "Bananas" ) {
window.location.href = "https://en.wikipedia.org/wiki/Banana";
}
if ( favouriteFruit == "Grapes" ) {
window.location.href = "https://en.wikipedia.org/wiki/Grape";
}
}, 500 ); // Waits 1/2 second to redirect.
}
});
The above finds the form select element with name "favourite_fruit" (the internal vale above) and gets it's value. It waits for 1/2 second and, based on that value, it will redirect to the relevant Wikipedia page.