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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Edit host with your Marketo instance info <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> //Edit thank you message text. <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 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.
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.