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.

18102
21
21 Comments
SanfordWhiteman
Level 10 - Community Moderator

Yes, of course you can add <script> tags to the template.

Diana_Thompson
Level 1

I am adding the following script to our site:

<script src="//app-ab23.marketo.com/js/forms2/js/forms2.min.js"></script><form id="mktoForm_1193"></form><script>MktoForms2.loadForm("//app-ab23.marketo.com", "360-XJZ-500", 1193);</script>
<div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong.</p></div>

The email is added to the list as expected. However the page reloads on submission and the success message is not displayed. How can I fix this?

SanfordWhiteman
Level 10 - Community Moderator

Please highlight your code using the Advanced Editor's syntax highlighter so it's readable.

As far as I can see above, you never overrode the onSuccess behavior.

Diana_Thompson
Level 1

I'm new to Marketo. Did a quick search and couldn't find anything that looks relevant for "Marketo Advanced Editor's syntax highlighter." Here's a copy from my test editor.

marketo-highlight.png

Is there documentation for the `onSuccess` behavior in the Marketo context?

SanfordWhiteman
Level 10 - Community Moderator

The Syntax Highlighter is a feature of the software that runs the Community platform (Jive), not a feature of Marketo itself.

You find it in the formatting menu:

pastedImage_1.png

pastedImage_3.png

In your case you'd choose "JavaScript" from the Language dropdown.

Diana_Thompson
Level 1

I'm not seeing the editor you captured the screenshot of. I see bold, italic, bullet list, etc. One row. Not the TinyMCE layout like you have.

Can't you just help me based on what I've already provided?

SanfordWhiteman
Level 10 - Community Moderator

As a visually impaired person, I can't hunt for subtle typos or mistakes if something isn't presented in a readable fashion.

Here's your code highlighted using the syntax highlighter in the editor menu.

<script src="//app-ab23.marketo.com/js/forms2/js/forms2.min.js"></script><form id="mktoForm_1193"></form><script>MktoForms2.loadForm("//app-ab23.marketo.com", "360-XJZ-500", 1193);</script>
<div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong.</p></div>

As noted above, this is just the regular Forms 2.0 embed code followed by some HTML. You have not included the custom JavaScript from this very blog post, so naturally there won't be any custom behavior.

droller13
Level 1

How can i make this work on a non-marketo landing page? 

 

This is my landing page - the form lives at the bottom, after it is filled out I want a simple thank you message to appear: https://www.akumina.com/employee-experience-academy-video-library/

 

I tried adding this code to my site but when i did so i saw no thank you message and the page refreshed, then the form disappeared (but no thank you message was there)

<script src=“//app-MYPOD.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>Thanks for reaching out!<br />You'll hear from us soon.</strong.</p></div>

 

SanfordWhiteman
Level 10 - Community Moderator

First, the code you pasted has a syntax error. (The curly quote is not valid to set an HTML attribute.) But you don't need the <script> that loads forms2.min.js here at all. You're already loading it on your page, so that <script> can be removed.

 

The other inline <script> and the <div> after it need to be placed after the line that loads forms2.min.js, which is line 345 of the document:

2021-03-03 17_50_57-view-source_https___www.akumina.com_employee-experience-academy-video-library_.png

 

Next, you need to resolve the conflict between the onSuccess listener you have in https://www.akumina.com/s/68dad9.js and this one. You don't want both.

Aledml
Level 1

Silly question, but does this keep the UTMs after submission? For instance, we have 1 link that we use for conference leads. We want to add this message but then be able to refresh and load the next contact, while still maintaining the UTM info...