Pop Up Window on Form | Community
Skip to main content
October 1, 2013
Solved

Pop Up Window on Form

  • October 1, 2013
  • 5 replies
  • 3360 views
I'd like to create a pop up window on a form. I have a white paper I'd like people to download. They go to landing page and before they are able to download the whitepaper, a pop up appears asking them to sign up for our newsletter.

How do I do this in Marketo? I'm hoping there is an easier way than the one listed here: http://community.marketo.com/MarketoArticle?id=kA050000000L3P7CAK

Thank you,
Deirdre
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
Unfortunately, I would say a javascript / jquery solution like in that post is going to be your best bet.  As a side note, if you don't know javascript I would definitely encourage you to try it.  This is an excellent starting point. There are countless resources online, and it is super helpful in customizing Marketo pages like this and more.

** UPDATE **

Here is a simple version you can just drag over an HTML box into your landing page, copy and paste the below code, update this with the URL of your mailing list landing page form.  and update the height, width, border as you'd like.

** Important** because scripts are disabled in preview, this will only be work and be visable on the live page. NOT in 'Preview Draft'

copy everything below this line

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://simplemodal.googlecode.com/files/jquery.simplemodal-1.4.4.js"></script>
<script type="text/javascript">
var src = "http://www.arringtoncreative.com"; //Change this to your URL
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0" scrolling="no">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff", //Background color of frame most likely won't show
border: "solid 5px #333",  //Outer Border Style
        height:450, // This Height should be the same number as above.  Update both
        padding:0,
        width:830 // This Width should be the same number as above.  Update both
    },
    overlayClose:true //Close frame on clicking outside 
});
</script>


5 replies

Accepted solution
October 2, 2013
Unfortunately, I would say a javascript / jquery solution like in that post is going to be your best bet.  As a side note, if you don't know javascript I would definitely encourage you to try it.  This is an excellent starting point. There are countless resources online, and it is super helpful in customizing Marketo pages like this and more.

** UPDATE **

Here is a simple version you can just drag over an HTML box into your landing page, copy and paste the below code, update this with the URL of your mailing list landing page form.  and update the height, width, border as you'd like.

** Important** because scripts are disabled in preview, this will only be work and be visable on the live page. NOT in 'Preview Draft'

copy everything below this line

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://simplemodal.googlecode.com/files/jquery.simplemodal-1.4.4.js"></script>
<script type="text/javascript">
var src = "http://www.arringtoncreative.com"; //Change this to your URL
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0" scrolling="no">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff", //Background color of frame most likely won't show
border: "solid 5px #333",  //Outer Border Style
        height:450, // This Height should be the same number as above.  Update both
        padding:0,
        width:830 // This Width should be the same number as above.  Update both
    },
    overlayClose:true //Close frame on clicking outside 
});
</script>


November 15, 2013
Hi,

This is brilliant code.
What would the code be to only make the pop up appear AFTER the submit button is selected? and where would you place it?

Thank you,

November 15, 2013
My short answer is, don't do it. To generate the pop up once the button is submitted you would need to change the "on click" function on the button itself which causes complications with validating and submitting the form.  What are you trying to accomplish?  There may be a cleaner solution.
November 22, 2013
I'm trying to accomplish the same thing where a pop up window appears thanking the person for submitting the form and that allows them to download the content.  The code you provided is great Josh, but I'm in the same boat as Karen.

Any help you can provide is appreciated.  I'm struggling with this one because I'm new to javascript.

Thanks.
April 8, 2015
Hey Josh, how do I trigger this javascript? Would any marketo form trigger this?
If i wanted to trigger this with a click on a link, what should I do?