Need Dynamic Thank-you Page

Marketing & Content Hub Blog, Website & Page Publishing
12

I have been working on this problem for a few hours now and there seems to be only one working solution that is an actual solution to the original request:

  • onFormSubmit
    does not work. You can set up redirects that way and they will work.
    The problem is that the form submission will not always be saved into the Hubspot database.
    The reason is that onFormSubmit is executed after form validation and before the data is submitted to Hubspot.
    At that point you have two things running: a data submit request to Hubspot and and page redirect to a thank you page.
    If the data submission is fast enough it will be saved. If it is not the redirect will open another page before the form data was submitted.
  • onFormSubmitted
    This would be the correct callback event to use for a redirect because it is executed after all form data was submitted to Hubspot.
    But any window.location.href will be overridden by the original thank you page redirect you configured in the hubspot form editor.
  • inlineMessage
    with this parameter you can define a “Thank you” message that will replace the actual form after the user submits it. No redirects to any thank you page will occur. Even if one is configured in Hubspot.
    Combining this with “onFormSubmitted” will make it possible to redirect to any page you want based on any logic you execute in the “onFormSubmitted” event.
    The problem now is that the form was replaced by the thank you message and you cannot access it anymore. So you still can’t put any redirect logic to work.
  • onFormReady
    this will be executed after form creation is finished and the form is ready on the page.
    At this point you can add event handlers to any form field and save data to a variable when the form field changes.
    When you have saved the form field’s data you need for your redirect logic you can then use it later in the onFormSubmitted event.

So that’s it. A working solution to the dynamic thank you page problem.

The code example checks if a input fields value is bigger than 9000. Adjust to your needs.
Set up all the variables at the top of the code snippet. And load jQuery from your local webserver (security!)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://js.hsforms.net/forms/v2.js"></script>
<script>
 var testPortalId = 'XXXXXXX';
 var testFormId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX';
 var testInputFieldName = 'demo-formfield';
 var testRedirectUrl = 'https://www.demo.com/url1';
 var testRedirectUrlCondition1 = 'https://www.demo.com/url1';
 var testRedirectUrlCondition2 = 'https://www.demo.com/url2';
 var testInputFieldElement;

 function testFormChange(conditionValue) {
 if (parseInt(conditionValue) > 9000) {
 testRedirectUrl = testRedirectUrlCondition1;
 }
 else {
 testRedirectUrl = testRedirectUrlCondition2;
 }
 }

 hbspt.forms.create({
 portalId: testPortalId,
 formId: testFormId,
 inlineMessage: 'Thank you!',
 onFormReady: function() {
 testInputFieldElement = document.querySelector('#hsForm_'+testFormId+' input[name="'+testInputFieldName+'"]');
 testFormChange(testInputFieldElement.value);

 testInputFieldElement.addEventListener("change", function() {
 testFormChange(testInputFieldElement.value);
 });
 },
 onFormSubmitted: function() {
 window.location.href = testRedirectUrl;
 }
 });
</script>