Sant Singh Rathaur

Display thank you message in the same landing page..

Blog Post created by Sant Singh Rathaur on Sep 18, 2019

You don't want to create additional thank you page for your marketing initiatives? Are you looking for the custom solution to display thank you message in the same landing page? If yes then I can surely help you with this piece of code as when I was looking for the solution, someone helped me with it...

 

It's a tricky yet very simple process to achieve this. You just need to put a piece of custom Marketo API in the head section of your landing page and a <div> section in the body of the landing page.

 

I will tell you the solution for both free form and guided landing page.

 

Freeform landing page:

 

In the freeform landing page, you just need to add one snippet in your page. So, just drag HTML element in your freeform landing page (make sure to set proper width and also position that HTML element in the page where you want to show the thank you message. In this element just put the below code:

 

<script src="Add source of your Marketo instance/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';

 

//Below two lines are optional as per my requirement

 document.getElementById('form-header').style.visibility = 'hidden';

 document.getElementById("innercontent").style.height = "1000px";

 

//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; "><h1 style="color:#ffffff; text-align:center; line-height:55px;"><span style="font-size:45px;">Thanks for registering.</span><br/> Enjoy the evening! </h1>

</div>

 

Note: Update the source of your Marketo instance at the beginning of javascript code and update thank you messaging as per your requirement. 

 

Guided landing page:

 

In the guided landing page, you would need to place one snippet in your head section and another snippet in the body of your landing page .

 

Snippet 1 (Add this in the head section of your page):

 

<script src="Add source of your Marketo instance/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';

 

//Below two lines are optional as per my requirement

 document.getElementById('form-header').style.visibility = 'hidden';

 document.getElementById("innercontent").style.height = "1000px";

 

//return false to prevent the submission handler from taking the lead to the follow-up URL.

 

  return false;

  });

 });

</script>

 

 

Snippet 2 (add this in the body section of landing page):

 

<div id="confirmform" style="visibility:hidden; "><h1 style="color:#ffffff; text-align:center; line-height:55px;"><span style="font-size:45px;">Thanks for registering.</span><br/> Enjoy the evening! </h1>

</div>

 

Note: Update the source of your Marketo instance at the beginning of javascript code and update thank you messaging as per your requirement. 

 

Hope this will be helpful.

 

 

With Best regards,

 

Sant Singh Rathaur

Connect me on LinkedInhttps://www.linkedin.com/in/sant-singh-rathaur/ 

Outcomes