Skip to Content

Redirect a HubSpot form to a thank you page based on a form field

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: March 2, 2023)

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();

Note that HubSpot's 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: 

The internal value of a HubSpot property

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.

Note: when you're using the above, be sure to set the form to "inline message" as it will not work if it's been set to "redirect to a thank you page".

←  Previous Article

Comparison between HubSpot's CMS and the new CMS Hub / Themes

Next Article  →

Get HubSpot posts that contain all tags (Tag A AND Tag B AND Tag C)

Contact

Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS