How to embed content in a Pop-Up within my form?

  • joefer333
    Asked on July 10, 2017 at 6:00 AM

    Hi all! I am planning to use popups as a substitute for hyperlinks. Is that possible? I was looking at this issue from a fellow JotForm user: https://www.jotform.com/answers/1128450-Pop-Up-Modal-Form-Elements/?entrymessage=10732640770

     

    When he mentioned something bout a PDF pop-up, I thought this might be something I could substitute against the "webpage as pop-up idea". So I cloned the form to test BDAVID's solution. True enough, the PDF in his form ( https://form.jotform.co/71416509380859 ) works, but when I replace the link with a pdf from my Google Drive or Dropbox, the PDF doesn't show up.

    As a summary, here are my questions:

    1. Is it possible to open up a webpage as a pop-up?

    2. If #1 is not possible, then how do i seamlessly add a PDF (and preferably a jpeg, too) as a popup?
    3. I almost forgot, it would be really helpful if I could do this with videos, too. I've not added that in the title as I fear it's something I'm asking too much. Feel free to skip this one if it's too much trouble :)

     

    PS: The form that our team is trying to make will have lots of hyperlinked texts in them. At the very least, I know how to use iframes and conditional showing/hiding of fields. Hyperlinking by opening new tabs is just so not aesthetically appealing for the form we have in mind :)

    Thank you!

    Jotform Thread 1195031 Screenshot
  • Kevin Support Team Lead
    Replied on July 10, 2017 at 10:45 AM

    It is possible to display any document or webpage using the solution given by my colleague BDavid, this due to the fact that the iFrame allows to display any content. 

    I have been testing and I can see a PDF file uploaded in Google Drive or Dropbox are not displaying; however, this is because the shared link is already their own PDF viewer. But, if you are using Google Drive you could get the file's link and replace the "view" parameter with "preview" like on the example provided on the other thread: 

    https://drive.google.com/file/d/0BzuPMowFlSBbRXJZWWNwYl80ZjA/preview 

    If you use this link then the file will be displayed, the same is with other files you upload to Google  Drive. This guide will also help you to share a file: https://support.google.com/drive/answer/2494822?co=GENIE.Platform%3DDesktop&hl=en 

    While adding the iFrame, please also make sure to add the code between the <div> element: 

    How to embed content in a Pop Up within my form?  Image 1 Screenshot 20

    Please, also make sure that the links you add are under the "HTTPS" protocol, otherwise the webpage will not be displayed. Here's an example about opening a webpage as modal: https://form.jotformpro.com/71904266358967#open 

    If you have any question, let us know. 

  • joefer333
    Replied on July 11, 2017 at 1:47 AM

    Worked liked a charm! Thanks Kevin!

    I have to share an issue that might help other people who are trying the same thing using Google Drive. You NEED to actually test the link first on a browser first before you replace view with preview as this is what happens when you click "Get shareable link" and "Share...":

    How to embed content in a Pop Up within my form?  Image 1 Screenshot 20

     

     

    But I have a follow-up question :)
    I tried duplicating the pop-up field to test another document as pop-up. It didn't work. How do I do that? I'm a bummer when it comes to classes and id's,. please help! I also accidentally deleted the form so here's the new one for your reference: https://form.jotform.me/71909147263460 .

  • Chriistian Jotform Support
    Replied on July 11, 2017 at 3:59 AM

    But I have a follow-up question :)

    I tried duplicating the pop-up field to test another document as a pop-up. It didn't work. How do I do that? I'm a bummer when it comes to classes and id's, please help! I also accidentally deleted the form so here's the new one for your reference: https://form.jotform.me/71909147263460 

    I checked the form (https://form.jotform.me/71909147263460) you have provided and it seems that the other document you have tested as a pop-up is working now.

     

    How to embed content in a Pop Up within my form?  Image 1 Screenshot 20

    Are you still experiencing the issue on your end?

    If you have other questions or concerns, please let us know.
    Regards.

  • joefer333
    Replied on July 11, 2017 at 4:10 AM

    Hi Christian! Thanks for the prompt response. I was actually trying to display another doc on that 2nd pop-up button. Here's the screenshot of it:

    How to embed content in a Pop Up within my form?  Image 1 Screenshot 20

     

    If you try and clone that form, the 2nd pop-up actually has a different URL source. Here it is, by the way: https://drive.google.com/file/d/0B6mFMCvXEb-EbXhZVk00bTNHNFU/preview

  • Charlie
    Replied on July 11, 2017 at 5:33 AM

    Hi,

    I presume the problem is that the 2nd pop-up modal box is showing the same document embedded in the 1st modal, is that correct? This is because they are using the same ID. If you are referring to this guide: https://www.jotform.com/help/417-How-to-Add-a-Pop-Up-Modal-on-your-Form. This is actually the guide I made as a workaround for users looking for pop-up messages, however, it was designed for single instance only. To do it with two or more modal boxes, here's what you need to edit:

    1. Here, I edited the 2nd pop-up modal element. 

    How to embed content in a Pop Up within my form?  Image 1 Screenshot 30

    2. Now change the value of the href and id highlighted in yellow below. This will be the identifier for the modal. In this case, because this is the 2nd modal, I'll change them to open2. If you have more than two, then the naming should be open3, open4, and so on... 

    How to embed content in a Pop Up within my form?  Image 2 Screenshot 41

     

    3. Save the changes and test your form. Here's a cloned form with the changes above: https://form.jotformpro.com/71912394078967

     

    Let us know if that works. 

  • joefer333
    Replied on July 11, 2017 at 5:40 AM

    You guys are lifesavers! Got nothing else to say but a big THANK YOU! Cheers!