Untitled

Show Thank You Message Without a Follow-Up Landing Page

Anonymous
Not applicable

Typically, when you use Marketo forms, you create two landing pages – one to place the form on and one to redirect to after the form is completed. However, in some cases, you may not want to have two separate but very similar landing pages to maintain. You can actually use the same landing page for the form and for the thank you message using the Forms 2.0 JavaScript API.

To do this, first create your registration landing page and form and place the form on the landing page as you would normally. Then, add an HTML element to the page. In this element, we will add some code that activates at the moment the form is submitted. It will then hide the form and reveal a hidden <div> that contains the thank you message.

Your JavaScript should look like this:

<script src="//<host>/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>

You will want to edit the two highlighted sections. The first should reference your Marketo instance (e.g. “//app-sj06.marketo.com/js/forms2/js/forms2.js”) and the second should contain the thank you text that you want to display once the form is completed.

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 any form field boxes that overlap with the thank you message.

Untitled

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.

1570
10
10 Comments
Sarah_Greig2
Level 3

We use these on our landing pages and it works fine.

But we've just put the submit text layer  on top of a form and another layer and the display text won't display. Is this because of having 3 layers?

Sarah

Anonymous
Not applicable

Can you clarify what the layers are for each element?

Sarah_Greig2
Level 3

In the same area there is:

Square Shape Layer (placed underneath the form)

Form Layer

Java Script Layer (thank you text on submit)

Anonymous
Not applicable

I'm not the best with assets, but I think it should work as long as you either put the layers in order like this: Square, JavaScript, then Form or you can also make the square a hidden div as well, just like the form, so that both elements disappear after the form is submitted.

Anonymous
Not applicable

What if I am not using a Marketo landing page, and rather embedding the code on the side bar of the wordpress page? I have a button that brings up a form in a lightbox, which means I want a thank you message to display in a lightbox too, not on a sidebar. Do you know how this can be done?

SanfordWhiteman
Level 10 - Community Moderator

I'm already helping you on the other thread.  Please don't cross-post on old discussions as it leads to duplicate work.

Nora_Mendenhall
Level 2

Is there any script for a thank you message in an embedded form on a website? Is this even possible. I apologize for the naiveté!

SanfordWhiteman
Level 10 - Community Moderator

Of course, it's totally possible! The Forms API works equally well with embedded forms (or even better, in certain ways).

Nora_Mendenhall
Level 2

That is so good and so bad to hear! Good because thats the answer I wanted to hear, bad because I have no idea how to implement it! My depth of html knowledge is how to change colors . Thank you again for any help.

SanfordWhiteman
Level 10 - Community Moderator

Kristin's code above works for embedded forms, though. So you need to create a <div> with your Thank You message (just as with a Marketo LP) and the code will reveal it instead of redirecting.