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.
.png)