Displaying Form Thank You Message on Original Landing Page

Anonymous
Not applicable

I once had a customer who wantedto be able to add the form’s thank you message within the form so that they only needed one landing page instead of having to have a second landing page for the thank you message.

In order to make this work properly, we took the following steps:

  • Created the form
  • Created the landing page
  • Placed the form on the landing page
  • Created an HTML element on the landing page and pasted in the code below. This code does the following:
    • Adds an onSuccess handler that hides the form when it is submitted successfully and then gets a hidden div on the page and unhides it
    • Creates the div that is hidden by default and contains the thank you message

Here is the example script. You will need to replace the yellow highlighted “app-sj01” with your pod and the yellow highlighted element in the div with the text you want to see.

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.js"></script>

<script>

MktoForms2.whenReady(function (form){

  //Add an onSuccess handler

   form.onSuccess(function(values, followUpUrl){

    //get the form's jQuery element and hide it

    form.getFormElem().hide();

    document.getElementById('confirmform').style.visibility = 'visible';

    //return false to prevent the submission handler from taking the lead to the follow up url.

    return false;

  });

});

</script>

<div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong.</p></div>

The text will display on the landing page in the exact position where you place the HTML element, so be sure you edit that in the property sheet. You should also make sure the layer of your HTML element is smaller than the layer for your form. By default, both will be put at Layer 15, so you will be safe if you make your HTML element Layer 14. If you don’t do this, you won’t be able to type in the form field boxes.

It is not necessary to change the follow-up type on the form or on the landing page, as the JavaScript will overwrite those settings.

20234
21
21 Comments
Anonymous
Not applicable

Hi there,

thank you for this really valuable explanation. I created dozens of TY Pages, but to be honest the work in doing that costs a "clone" time.
So i did not see the real vlaue for your customer. Was there a specific reason for requesting that? But sometimes this doesn´t matter

Jason_Hamilton1
Level 8 - Champion Alumni

Helpful as always Kristen!

Anonymous
Not applicable

I think for them it was more of a management issue; they wanted to have less landing pages to update if something in their design or formatting changed.

But yes, I would agree sometimes the requests are more of a theoretical 'can we do this' than a real need to do it. This is probably one of those situations

Christina_Dahle
Level 1

How do you find your unique pod? I'm not sure what I should be replacing that first highled section with...

Anonymous
Not applicable

Look at the URL when you log into your Marketo instance. It should start with app-AA##.

Grégoire_Miche2
Level 10

Hi Kristen Carmean​,

Have you tried to use a Marketo Text variable or Marketo Text Element to fill out the text of the configform div ?

-Greg

Anonymous
Not applicable

No, I haven't. If you try it, let me know how it works!

Rachel_Bosley1
Level 2

I just tried this using a guided landing page, and it worked like a charm! Thanks so much.

Anonymous
Not applicable

This worked perfectly, thank you very much!

Eva_Yu
Level 3

This works great!

Anyone knows how to do this on a guided landing page? Since I cannot add a HTML element on it, is it possible to add to the template?