Customize your Marketo forms even further using these 2 advanced Marketo form techniques. Learn how to pop up a lead generation form after 2 minutes and how to open a Marketo hosted form on click.
Pop Up form after x Number of Minutes
Copy and paste the HTML section of the form embed code into the HTML of your document. It doesn’t matter where you place it on the page.
|
1 2 |
<script src="//app-sjh.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1212"></form> |
Copy and paste this javascript in your document. This will pop up the form after 2 seconds
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> setTimeout(function() { MktoForms2.loadForm("//app-sjh.marketo.com", "889-JZN-200", 1212, function (form){ MktoForms2.lightbox(form).show(); form.onSuccess(function(values, followUpUrl){ // Hide the form after submission form.getFormElem().hide(); var list = document.getElementsByClassName("mktoModal"); for(var i = list.length - 1; 0 <= i; i--) if(list[i] && list[i].parentElement) list[i].parentElement.removeChild(list[i]); //return false to prevent the submission handler from taking the lead to the follow up url. return false; }); }); }, 120000); </script> |
Replace 120000 with the how much time (in milliseconds) until the form should pop up.
Also replace “889-JZN-200”, 1212 with the ID’s of your form. You can grab this information from the embed code that is provided by Marketo (shown in the screenshot below).
Pop Up a Form on Click
Copy and paste the HTML section of the form embed code into the HTML of your document. It doesn’t matter where you place it on the page.
|
1 2 |
<script src="//app-sjh.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1212"></form> |
Copy and paste this javascript in your document.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> $("#popup-link").click(function(e){ e.preventDefault(); MktoForms2.loadForm("//app-sjh.marketo.com", "889-JZN-200", 1212, function (form){MktoForms2.lightbox(form).show(); // Hide the form and display a thank you message form.onSuccess(function(form){ formElem = this.formElem[0]; formParent = formElem.parentNode; formParent.removeChild(formElem); formParent.innerHTML = '<h3>Thank you!</h3>'; }); }); }); </script> |
Replace “889-JZN-447”, 1010 with the ID’s of your form. You can grab this information from the embed code that is provided by Marketo (shown in the screenshot below.
Questions?
Email me, or send me a tweet @jennamolby.
Hi Jenna! Thanks for the great Marketo tips on your blog. It’s very helpful!
It seems that Marketo has updated their scripts. I had to replace all references of app-sjh.marketo.com with app-sj20.marketo.com to get the functionality to work.
Hi Jenna,
I’m having a hard time with the Pop Up a Form on Click as well. I added the snippet of javascript (above) and then added the form’s embed code as another HTML element to my Marketo landing page. I’m just a little confused on how to get these pieces communicating via the ID for my link (I tried Click here and then assigned an ID to the DIVs containing the form embed code (
). Thanks!
Sorry, you’re having trouble getting the form to work. Send an email to [email protected] with a link to your landing page and I can help you troubleshoot.
I’m trying out the popup and my href to call the code looks like this
SIGN ME UP
Doesn’t seem to work. You can see the full code here.
http://codepen.io/pfaustino/pen/LkvVGX
Hello! You’re missing the ID for your link. It should have the id of “popup-link”.
Hi Jenna,
Thanks for the info. I have been struggling with, Pop Up a Form on Click, for a couple hours and I can’t get it to work. Do you have a working example/landing page I could look at?
How do I include this code in my landing page? Do I insert an HTML Element? Do I have to create a Snippet and insert that?
Also, I am using a thank you page after the form is filled out. Any idea on how to link to that instead of using this”formParent.innerHTML = ‘
Thank you!
‘; “? I have my form set to “Follow up with Landing Page” but when and if I get this to work, I think my follow up/thank you page might appear in the lightbox window.
Thanks.
Hello! You can include the script as an HTML element on the landing page or put it directly in the landing page template. If you don’t want to redirect to the thank you page you specified in the form editor, you can remove the onSuccess function from the code. Your code would look something like this:
$(“#popup-link”).click(function(e){
e.preventDefault();
MktoForms2.loadForm(“//app-sjh.marketo.com”, “889-JZN-447”, 1010, function (form){MktoForms2.lightbox(form).show();}); });
Don’t forget to replace the IDs (screenshot in the post) with the IDs of your Marketo form.