Passing page ID from LP to TY page, through HubSpot form

[Craig]

One of our clients is looking to utilise a single thank you page for all of their landing pages.

The motivation behind this is to save time and reduce complexity for marketers, and to reduce likelihood of inconsistency. So a marketer creates a LP for an offer, tags with necessary categories / business areas / content types (we have developed a tagging custom module using HubDB for this), but then they do not need to create a thank you page.

The ideal idea is that the TY page is passed the ID of the referring LP. However, at the very least the post data would give me something to look up the referring page via the API. From there, the TY page would grab relevant related content etc.

**FYI - the form MUST be a HubSpot form. The landing pages already have a Form module and replacing with custom HTML forms is not an option. **

According to this page the following variable should contain the POST data:

{{ request.post_dict }} 

However, all it contains is the submission GUID. Seeing as there is no form submissions API, I have nothing to look up to try to grab related content etc.

Any ideas anyone?

[tjoyce · Accepted solution]

@Craig - That seems a bit over-engineered for just a thank you page.

What I normally do is:

1. Build out your "thank you" page with all possible options but hide the options

2. Convert your HubSpot module forms to embed codes. Use the onFormSubmit callback to set a local storage variable

3. On the thank you page js, read the local storage variable to show the message that relates to that submission while leaving the others hidden

**Your LP**

  hbspt.forms.create({
    portalId: '<your portal id>',
    formId: '<your form id>',
    css: '',
    onFormSubmit: function($form){
        var thanksMSGTrigger = $form.find('input').val() //this is just example code
        localStorage.setItem("thanks-msg", thanksMSGTrigger);
    }
  });

**Your Thank You Page**

<style>
    .message{display:none;}
</style>
<div class="thanks-messages">
    <div class="message thanks-message-1">Thank you A</div>
    <div class="message thanks-message-2">Thank you B</div>
    <div class="message thanks-message-3">Thank you C</div>
</div>

<script>
    var msgIndex = localStorage.getItem("thanks-msg");
    if(msgIndex == '1') {$('.thanks-message-1').show()}
    if(msgIndex == '2') {$('.thanks-message-2').show()}
    if(msgIndex == '3') {$('.thanks-message-3').show()}
</script>

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Craig]

Hi @tjoyce thanks for the reply.

Changing the forms to embed code isn't really an option. It means the guys editing/creating the pages don't get to simply choose a form, add different options ie workflows / campaigns. Plus they'd need to add the callback themselves or we'd have to create modules for every form with the callback already included.

However, I guess I could use the callback separately and not within the embed code, and use localStorage (totally overlooked this option, so thanks for that!).

See any issues with that?

[tjoyce]

Hi @Craig - I totally understand why you would want to keep the form module instead of embed code. Here's some examples of using the formsubmit outside the scope of the embed code.

https://integrate.hubspot.com/t/how-to-track-form-submission-events-in-javascript/1741

[Craig]

thanks @tjoyce I've used the global events before - my only concern was that as they are non-blocking, can it be guaranteed that the localStorage var gets set before the page redirects?

[tjoyce]

Ah, good question.

Perhaps, you could change your form to not redirect, and instead to a thank you message. And have your js function handle the redirect to the thank you page?

[Craig]

Actually that's a good idea @tjoyce as they will all be going to the same URL anyway. In fact doing it this way I could send a querystring if I wanted instead.

Thanks for the asisstance here!

[tjoyce]

@Craig - good point on the query string!

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.