Contact

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

    Difficulty Level: Advanced. This post assumes a strong understanding of HubSpot tools and technical knowledge. Insutructions are given as guidelines and may require additional customisation.

    Sometimes you may want to redirect 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();

    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.

    Last Updated: May 27, 2020

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Not using HubSpot yet?

    HubSpot offers a free CRM as well as Marketing, Sales and Services tools (with free options too!) and a powerful CMS. Learn more here.

    Note, as a HubSpot affiliate I will get a commission if you click on the link above and end up purchasing an upgraded version. No pressure though!

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.