Blog, Website & Page Publishing

Eleven11
Top Contributor

Need Dynamic Thank-you Page

SOLVE

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.

2 Accepted solutions
22Eighteen
Solution
Contributor

Need Dynamic Thank-you Page

SOLVE

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

 

View solution in original post

0 Upvotes
rdecker
Solution
Member

Need Dynamic Thank-you Page

SOLVE

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>

 

View solution in original post

14 Replies 14
ECimolini
Participant

Need Dynamic Thank-you Page

SOLVE

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

0 Upvotes
kvlschaefer
Community Manager
Community Manager

Need Dynamic Thank-you Page

SOLVE

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
0 Upvotes
rdecker
Solution
Member

Need Dynamic Thank-you Page

SOLVE

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
Participant

Need Dynamic Thank-you Page

SOLVE

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

0 Upvotes
SMcGarrigle
Member

Need Dynamic Thank-you Page

SOLVE

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

 

 

Picture1.png

 

jjokinen
Contributor

Need Dynamic Thank-you Page

SOLVE

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

0 Upvotes
ancaban
Participant

Need Dynamic Thank-you Page

SOLVE

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

0 Upvotes
gdunal
Participant

Need Dynamic Thank-you Page

SOLVE

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

0 Upvotes
AlexMackrill
Participant | Elite Partner
Participant | Elite Partner

Need Dynamic Thank-you Page

SOLVE

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)

0 Upvotes
Eleven11
Top Contributor

Need Dynamic Thank-you Page

SOLVE

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. 

0 Upvotes
WhitakerTy
Member

Need Dynamic Thank-you Page

SOLVE

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.

0 Upvotes
edjusten
HubSpot Employee
HubSpot Employee

Need Dynamic Thank-you Page

SOLVE

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


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Eleven11
Top Contributor

Need Dynamic Thank-you Page

SOLVE

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
Solution
Contributor

Need Dynamic Thank-you Page

SOLVE

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

 

0 Upvotes