What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by joefer333 on July 10, 2017 at 06: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!

    Page URL:
    https://form.jotform.me/71899004463462

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G 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: 

    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. 

  • Profile Image

    Answered by joefer333 on July 11, 2017 at 01: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...":

     

     

    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 .

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 11, 2017 at 03: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.

     

    Are you still experiencing the issue on your end?

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

  • Profile Image

    Answered by joefer333 on July 11, 2017 at 04: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:

     

    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

  • Profile Image
    JotForm Support

    Answered by Charlie on July 11, 2017 at 05: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. 

    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... 

     

    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. 

  • Profile Image

    Answered by joefer333 on July 11, 2017 at 05:40 AM

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