How to embed a pop-up window action?

  • bluetroop
    Asked on March 1, 2021 at 3:45 PM

    Hi Jotform Team,

    My customer really likes these pop-ups from this web-site (https://alldeadpestcontrol.com/) when you click on the Sign Up Now button on any of the pest plans.

    The background screen darkens and a pop-up form comes up.

    I created this pop-up form - https://www.jotform.com/build/210595580859165. I know how to get it to come up in a second window, but how do I make it react the All Dead Pest web-site? (dark background screen and then pop-up form)?

    Thank you!!!

  • Jed_C
    Replied on March 1, 2021 at 9:13 PM

    It's possible, you'll just have to replace the anchor tag for the current signup button.

    ex.

    1614651175 603d9f27bc0d4 view source htt Screenshot 10

    Here's the code that you need to replace it with: 

    <a href="javascriptDISABLED:void( window.open( 'https://form.jotform.com/210595580859165', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> Sign Up Now </a>

    I hope that helps. Let us know if you have any questions or if you need further assistance.

  • bluetroop
    Replied on March 2, 2021 at 2:23 PM

    I don't want it to bring up a new browser window. I want it to function like it does on the competitor's web-site... https://alldeadpestcontrol.com/ (when you click on one of the plans.) See what it does (same page, darkens background, form pops up)...

    Is this possible to do?

  • Jed_C
    Replied on March 2, 2021 at 8:14 PM

    I apologize for the confusion, I have provided the popup version instead of lightbox. Please use the lightbox code to have that same effect on the competitor's web site.

    1614733944 603ee2786cb58 The Easiest Onl Screenshot 10

    You can also share the exact link where you want the code to be embedded so we can test and provide you the correct embed code in case it needs to be modified.

    Looking forward for your response.

  • bluetroop
    Replied on March 3, 2021 at 3:33 PM

    I'm trying to get it to trigger from the red Buy Now button on the menus on this page - http://defensepest.bluetroop.com/. The image is src="/wp-content/uploads/2020/10/buttonBuyNow.png". I don't want the yellow title bar. I just want it to look like the sample attached (as it looks when I'm building it). Can you help me do this?

    1614803579 603ff27bbfb42 samplePopUpForm Screenshot 10

  • Jed_C
    Replied on March 3, 2021 at 8:37 PM

    Yes, it's possible. Here's what you need to do.

    1). Add this script code above your site's source code.

    ex.

    <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_210595580859165 = new JotformFeedback({ formId: '210595580859165', base: 'https://form.jotform.com/', windowTitle: 'Defense Pest Mgmt Pop-Up - Basic Defense Plan', background:'rgba(255,255,255,0)', fontColor: 'rgba(255,255,255,0)', type: '1', height: 565, width: 400, openOnLoad: false }); </script>

    1614821514 6040388a7c0c2 2 Screenshot 10

    2). Enclose the buttonBuyNow.png image link with an anchor tag like this:

    1614821563 604038bbe0d00 ● Home   Defe Screenshot 21

    You can test the demo site from this link http://shots.jotform.com/jed/forms/Home%20-%20Defense%20Pest%20Control.html.

    1614821680 60403930b6f46 lightbox Screenshot 32

    I hope that helps. Let us know if you have any questions or if you need further assistance.