Show Thank You Message Without a Follow-Up Landing Page

December 19, 2014 | by

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:

You will want to edit the host name and thank you message in the code sample. 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.

For more information about Marketo Forms API, please check out the developer documentation.