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.

8524
17
17 Comments
Level 10 - Community Moderator

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

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?

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.

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?

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.

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?

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.