How can I create a pop up box in a form?

  • HRSSJotform
    Asked on February 12, 2016 at 7:34 PM

    On form https://form.jotform.com/60427860250956, I would like to embed a link to another form they can use to help select a job code, https://form.jotform.com/60425205671954, similar to the picture. When they click, the other form pops up. (This is for a much larger and more complex form that we can't just build logic into at this point, testing the feasibility with this one.)

     

    How can I create a pop up box in a form? Image 1 Screenshot 20

  • Nik_C
    Replied on February 13, 2016 at 10:43 AM

    Hello there, 

    You can add your form to pop up inside your code of the webpage by doing this:

    You log in to JotForm form builder, for the form that you want to pop up, and you go Publish:

    How can I create a pop up box in a form? Image 1 Screenshot 30

    Than you choose Embed, and Pop-up option:

    How can I create a pop up box in a form? Image 2 Screenshot 41

    This code you can copy inside your HTML code, you can check how it looks like here:

    https://jsfiddle.net/nw2c8wbg/

    The other way around, not a pop-up, but as a new winow, is you can make this: 'Click to view a tool to select a student/GSRA job code'  as a link and than if you need to go back to the first form you just change the thank you page to go back to first form.

    Please let me know if you have any additional question.

     

    Best regards,

     

  • HRSSJotform
    Replied on February 16, 2016 at 3:33 PM

    Hi and thank you! I did try as you mention but for some reason it is not enabled in the external version of the form.

    How can I create a pop up box in a form? Image 1 Screenshot 40

    How can I create a pop up box in a form? Image 2 Screenshot 51

    How can I create a pop up box in a form? Image 3 Screenshot 62

     

    I am able to use the link method with the target of a new window, however it opens as full size so it's pretty big real estate and requires toggling back and forth. If that's the only way it can work I guess that's ok, just hoped I could do a pop up.

  • Nik_C
    Replied on February 16, 2016 at 6:56 PM

    Hello there,

    Unfortunately it is not possible to do a pop up that way, directly, since you are embedding from JavaScript. What you could do possible is to embed that JavaScript code in your code of your website.

    To do this, you have to download the whole source code of JotForm form and than inject the code for pop up. You can do that by following:

    1. You log in to your JotForm form builder, and than go Publish:

    How can I create a pop up box in a form? Image 1 Screenshot 60

    2. On new screen follow this steps:

    How can I create a pop up box in a form? Image 2 Screenshot 71

    3. When you download your source code you can open that html page and edit in any editor:

    How can I create a pop up box in a form? Image 3 Screenshot 82

    4. Inside of that html you can input the code of the pop-up:

     <a href="javascriptDISABLED:void( window.open( 'https://form.jotform.com/60425205671954', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) ">Click here to view a tool to select a student/GSRA job code </a>

    That code you can copy between two div tags like I did here:

    How can I create a pop up box in a form? Image 4 Screenshot 93

    First arrow is that pop up code between two div tags, and second is a submit button, I just wanted to show you that I put that between the text-box and button, you just save that and it looks like this:

    How can I create a pop up box in a form? Image 5 Screenshot 104

    So the link is there and when you click on it it pops up like on the screenshot.

    I hope that that is what you wanted, now you should know that after that all edits will be on the source code of the page, but I guess that you are already familiar with that.

    Please let me know if that works for you.

    Best regards.

     

  • HRSSJotform
    Replied on February 16, 2016 at 7:20 PM

    I will give it a shot, thanks.

  • Nik_C
    Replied on February 16, 2016 at 7:22 PM

    Ok,

    please let me know how that worked and if I can help you somehow.

    Best regards.