Need Dynamic Thank-you Page

[Eleven11]

I know that it's bad practice to use smart content on a thank you page, but I need a way to redirect users to a thank you page based on a form selection. 

When someone requests a demo, they indicate how many clients they have. If they have less than 10 clients, they don't qualify for our program. 10 or more and we want them to be able to schedule right away with a meetings link. Are there any solutions besides building a custom form with the API? I can't be the only one wanting to send visitors to two different thank-you pages based on their submissions.

[22Eighteen · Accepted solution]

I agree, this would be a great feature.  @Eleven11 could you "trust" your leads?  Meaning, on the Thank You page have two different boxes with different messages?  For example

Box 1

Under 10 employees?

Thank you for your interest.

Our software is best suited to companies with over 10 employees. We are unfortunately unable to provide a live demo at this time.  Here's a link to a pre-recorded demo.

Here's another link to ....content  And here's a link to our ....pricing

But hey, sometimes we're wrong. After reviewing this content if you believe our software is right for your business please email us at letmein@oururl.com

Box 2

10+ Employees

Thank you.  Please use this link to schedule a time for a live one-on-one demonstration

Meeting link.

This wouldn't replace your need to send follow-up emails.  But this thank you page will inform the lead's expectations.  You could also create a workflow to determine who is assigned the lead based on # employees.  So if someone with under 10 employees does end up clicking the link anyway - at least it could be a more junior person the lead would be assigned to and that more junior person could move the meeting to their calendar.

Alternatively, you could possibly use a Hubl if statement to populate content on your Thank you page.  https://designers.hubspot.com/docs/hubl/if-statements

[ECimolini]

I would really this functionality too. We currently use Chilipiper which costs us extra $$ and implementation headaches.

[kvlschaefer]

Hi @ECimolini,

Thank you for feedback.

I would highly recommend you to please post this product suggestion at our ideas forum.

Our product team, who monitors the forum regularly, can read your specific use case and understand why this would be a useful functionality or change. It also helps other customers facing the same issue to advocate for its implementation on your behalf by upvoting on the thread as well.  

Thank you,

Kristen

[rdecker · Accepted solution]

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>

[illestMaestro]

OMG thank you for posting this. So long I've wanted a breakdown of how the JS responds per stage for a dynamic TY

[SMcGarrigle]

So I've found a work around for this, create a custom module in Hubspot and use the following code. I don't know how to link the code without screen grabbing it on here. Inset this code into the custom module, then insert the module into the page you want. This will only redirect based upon the value of one field. you can replicate the ELSE IF section of the code if there are more than 3 options.

To change the code replace where I have put in Capital letters:

NAME1
NAME2

NAME3

OPTION

These 4 above are up to you to decide and are merely for referencing for the code to work so as long as they are the same above and below then that's all that matters

WEBSITE1 

WEBSITE2

WEBSITE3

These are the web addresses you want the page to re-direct to depending on selection

NAME OF DEPENDENT FIELD

Go to you form and right click on it, click inspect and find out the true name of the value you want to redirect based upon. E.g    How_Much_Is_Your_Budget?

Make sure this is copied exactly how it appears in the inspector.

FIELDVALUE1
FIELDVALUE2

FIELDVALUE3

Make sure these are copied exactly how it appears in your form for the values is the field we have named above, e.g £1-£2 include the spaces if you have any in the field so it might be £1 - £2

Obviously make sure you update your portal id and form id also at the top where the XXXXX are

[jjokinen]

We're trying to accomplish the same thing as well. Would be interested in hearing if anyone's found any solution for this.

[ancaban]

I need something similar: a dynamic thank you page based on IP country.

If the contact completes the form and is from the US, in the thank you page has to appear the US SDR meeting link. If they are from other coutnries, show the Internatoinal SDR meeting link.

Any solutions?

Thanks

[gdunal]

I was wondering if you found a solution for this, I'm trying to accomplish the same. 

[AlexMackrill]

I also think this would be a really critical enhancement. Out of interest why do say it's not best practice to use smart content on Thank You pages? (This is what we currently do in the same use case)

[Eleven11]

The reason is because if the smart content is dependent on a form being submitted on the previous page, HubSpot likely will not have time to process the form submission so your smart content on the thank you page might not display properly. If it isn't dependent on the form submission data, then you'll be fine. But if it depends on a property that is updated on the form or on a list/workflow that needs to run first, that won't happen before the TY page loads. 

[WhitakerTy]

We have had a similar problem, we pass a guid into a hidden field formname_submission_guid and then on the thank you page as a query string variable and use the form submission endpoint in the API to gather the data from THAT form submission. The data appears to be available instantaneously within that API endpoint. We did fnd a delay in the contacts property getting updated.

[edjusten]

Hi @Eleven11  At this time, it's not possible to send a contact to a different TY page based on the form submission. But if you could later your conversion path a bit, you can do something similar. 

Rather than redirecting to a TY page, change your landing page to show an in-line thank you message, something to the effect of Thank you for submitting, we'll send you a message with further instructions in 10 minutes.

You can then build a workflow that sends an email based on the particular property. One can contain a calendar link, while the other can state the reasons the contact doesn't qualify. 

It's not a perfect solution, but accomplishes your goals. 

Thank you, 

Ed Justen

[Eleven11]

This is essentially what we are already doing, but I'm trying to increase meetings scheduled.

We get a lot of people requesting demos, but far fewer clicking the link in the email. Why not let them schedule right away on the thank you page is our thinking. 

 I just don't want those who aren't qualified based on their form submission to be able to schedule. Looks like the API is the only way to go here. Just trying to avoid that if there's another way. 

[22Eighteen · Accepted solution]

I agree, this would be a great feature.  @Eleven11 could you "trust" your leads?  Meaning, on the Thank You page have two different boxes with different messages?  For example

Box 1

Under 10 employees?

Thank you for your interest.

Our software is best suited to companies with over 10 employees. We are unfortunately unable to provide a live demo at this time.  Here's a link to a pre-recorded demo.

Here's another link to ....content  And here's a link to our ....pricing

But hey, sometimes we're wrong. After reviewing this content if you believe our software is right for your business please email us at letmein@oururl.com

Box 2

10+ Employees

Thank you.  Please use this link to schedule a time for a live one-on-one demonstration

Meeting link.

This wouldn't replace your need to send follow-up emails.  But this thank you page will inform the lead's expectations.  You could also create a workflow to determine who is assigned the lead based on # employees.  So if someone with under 10 employees does end up clicking the link anyway - at least it could be a more junior person the lead would be assigned to and that more junior person could move the meeting to their calendar.

Alternatively, you could possibly use a Hubl if statement to populate content on your Thank you page.  https://designers.hubspot.com/docs/hubl/if-statements