[How-to] Hide Form After Submission for Marketo Forms in Unbounce

third-party
community-sourced

#1

Hello hello,

If you are like me, you like to embed Marketo forms directly onto Unbounce pages so that the Marketo tracking pixel fires when the form is completed. A downside of this is that it renders Unbounce’s lightboxes useless.

However, I found a way to hide a marketo form after it is submitted and stay on the same page. This is good for us to use at a live event, where we just want to send people an email with whatever they signed up for, rather than take them to separate content.


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


So here is the process;

  1. Create a box in Unbounce.
  2. Embed the Marketo form code as a custom HTML object in unbounce.
  3. Create another custom HTML object. Eventually, you will place this right behind the form code you have already embedded, essentially hiding it.
  4. In this custom HTML object, add this code:
   //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>

(If you can see this page, it has more info: http://developers.marketo.com/blog/show-thank-you-message-without-a-follow-up-landing-page/ )

  1. Remove any comments from the code above, e.g.
    //Edit host with your Marketo instance info
    //Edit thank you message text.

  2. Make sure that form code is in front of the confirmation code. I have this in action on this page: http://trylibris.photoshelter.com/visual-content-cheat-sheet-for-ncmpr/

One major downside I have found is that you cannot really stylize the confirmation message, so it is limiting if you wanted to include links and images, which would be helpful if I wanted to use this for a different user experience.

Thoughts? Comments?


Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


#2

Thanks! This is really useful. Will Marketo be able to capture the leads inferred city from API?

Thanks!
Kim