Skip to Content

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

Sometimes you may want to use a conditional redirect to send visitors to different thank you pages based on an answer they've selected 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.

As of June 2025, HubSpot has two types of forms: 

  1. Legacy Forms: require custom scripts for the conditional redirect
  2. New Form Editor: can be redirected directly in the form editor

Below you'll find instructions for each type.

Sample Data: The Test Form Field

For testing purposes, I've created a custom contact property called "Favourite Fruit" used in all of the examples below. It's a "Dropdown Select" type and has three options: Pineapple, Bananas and Grapes.

For the code snippets below, it's important to know the internal name for your property (favourite_fruit in this example):

contact-property-internal-name

And the internal name for each property option (Pineapple, Banana, Grapes in this example):

contact-property-options

In our examples, when the form is submitted, the user will be redirected to the Wikipedia page for the fruit they've selected.

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

 

1. Legacy Forms

For legacy forms, you can use HubSpot's onFormSubmit event to detect when the form is submitted, find a particular field and update the URL based on the answer.

These will be different depending on whether your form is:

  1. On a HubSpot website
  2. An embedded form on a non-HubSpot website.

1a. Legacy Form on a HubSpot Website - Form Event Listener

The script to detect form submission event looks like this: 

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";
        }
      }
    }

  }
});

The script detects the "onFormSubmit" event, loops 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.

In our example, we're using a condition to look for the field's internal name (favourite_fruit), and check which value (Pineapple, Bananas, Grapes) was selected.

Live Demo
 

1b. Legacy Form embedded on a non-HubSpot website - Embedded Form Event

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 so that you can use the code above.

Alternatively, when you're embedding your for you can adjust the script to include the onFormSubmit logic:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: '123456',
    formId: 'abcdef12-12345fff-9876a1b2c3',
    region: "na1",
    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.
    }
  });
</script>

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: the form submit event listener in the embed code above uses jQuery form object as the argument ( onFormReady($form) ) so you need to use jQuery on your website for this to work.

 

2. New Forms Editor

The new forms editor has it's own logic tools that you can use to redirect the form on submission. 

For example, when I add the "Favourite Fruit" field to the form, I can: 

  1. Click into the "Logic" tab
  2. Select the condition (e.g. "If field Favourite Fruit is any of Pineapple")
  3. Select the action (e.g. "Then redirect to (on form submit) a HubSpot page")

new-forms-conditional-redirect

 

Other Field Types

In our example we've used a dropdown select field, but you can adjust the logic above to check other field types.

Number Field - Checks if number is within a certain range:

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"] == "number") {

        if (event.data.data[item]["value"] <= 50) {
          window.location = "https://en.wikipedia.org/wiki/Tomato";
        }
        if (event.data.data[item]["value"] >= 51 && event.data.data[item]["value"] <= 100) {
          window.location = "https://en.wikipedia.org/wiki/Pepper";
        }
        if (event.data.data[item]["value"] >= 101 && event.data.data[item]["value"] <= 500) {
          window.location = "https://en.wikipedia.org/wiki/Zuchinni";
        }
        if (event.data.data[item]["value"] >= 501) {
          window.location = "https://en.wikipedia.org/wiki/Carrot";
        }


      }
    }

  }
});

Live Demo

←  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