Embedded PDF: Fillable PDF form as part of my JotForm

  • Profile Image
    ANDROSS
    Asked on January 08, 2018 at 01:15 PM

    Hi,

    I just tried to include a PDF widget into my JotForm in order to add a fillable PDF, but when I do so, the form isn't fillable —meaning it can't be completed. The form fields aren't allowing for text to be entered.

    How may I add my PDF to my JotForm so that users can fill out the PDF as they complete and then submit the JotForm? (the PDF I want to include in my JotForm is here:  http://www.norelcosafecam.com/site/files/pdf/Credit%20App%20Fillable.pdf)

    Thank you.

  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 02:49 PM

    I managed to get it to work by creating a html page with an iframe.

    The iframe contains the supplied PDF. I uploaded the files to my web host. Then I used the iframe embed widget to display the fillable form.

    1515440900The Easiest Online Form Builde

    The URL for the iframe is:

    https://aubreythankyou.000webhostapp.com/iframe.html

    You can see it working here:

    https://form.jotform.com/80075835936970

     

  • Profile Image
    ANDROSS
    Answered on January 08, 2018 at 03:54 PM

    Thank you, Sir! I'm not sure how to implement this into my form, though. Should I add an iframe to my form and then put the PDF widget in the iframe?

    Thanks.

  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 04:28 PM

    You need to add the iframe embed widget to your form:

    https://widgets.jotform.com/widget/iframe_embed

    Then click on the wizard (magic wand icon) to configure the widget. Enter the URL for the iframe:

    https://aubreythankyou.000webhostapp.com/iframe.html


    Note that this iframe is hosted on my hosting account (00webhostapp.com). If you like you can download this webpage (with the iframe inside it) and host it on your own server. If so, then you would need to specify the URL of your copy instead.


  • Profile Image
    aubreybourke
    Answered on January 08, 2018 at 05:08 PM

    Its easy to create your own:

    <!DOCTYPE html>

    <html>

    <head>

    </head>

    <body>

    <iframe src="Credit App Fillable.pdf"  height=768 width=510></iframe>

    </body>

    <html>

    Save that in a .html file and upload it (along with your PDF) to your hosting account.


  • Profile Image
    Andross
    Answered on January 11, 2018 at 10:57 AM

    Hi,

    I've created my iframe, thanks:

    http://www.norelcosafecam.com/site/files/Miscellaneous/iframe.html

    I embedded it into the iframe embed widget, but I don't think it's visible. I don't see it in either Edit or Preview mode.


    Thanks.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 11:31 AM

    You need to upload your PDF to your server.

    The error message tells you the PDF cant be found.

    1515688040www.norelcosafecam.com-site-fi

    Your iframe is in this location:

    http://www.norelcosafecam.com/site/files/Miscellaneous/iframe.html


    And you PDF is missing from this location:

    http://www.norelcosafecam.com/site/files/pdf/Credit App Fillable.pdf



  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 11:48 AM

    Thanks,


    My iframe: http://www.norelcosafecam.com/site/files/Miscellaneous/iframe.html

    My PDF: http://www.norelcosafecam.com/site/files/pdf/Norelco_SafeCAM_Credit_App_Fillable


    Those links work for you, right?

    I still don't see anything when I place the iframe URL into the iframe embed widget.

    Thanks.




  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 11:53 AM

    No they do not. The src of the iframe is incorrect. 

    It currently reads:

    <iframe src="//www.norelcosafecam.com/site/files/pdf/Credit App Fillable.pdf"  height=768 width=510></iframe>

    But it should read:

    <iframe src="//www.norelcosafecam.com/site/files/pdf/Norelco_SafeCAM_Credit_App_Fillable"  height=768 width=510></iframe>

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 12:07 PM

    That is also incorrect. Its missing the http:// prefix

    It should read like this:

    <!DOCTYPE html>

    <html>

    <head>

    </head>

    <body>

    <iframe src="//www.norelcosafecam.com/site/files/pdf/Norelco_SafeCAM_Credit_App_Fillable"  height=1200 width=850></iframe>

    </body>

    <html>

    We nearly have it. Once your iframe is correct you will need to upload it again. So that it overwrites the previous copy.

    Then you will be able to use the URL of the iframe in Jotform.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 12:10 PM

     Apologies. I see that the http:// prefix is being removed by Jotform. It strips URLs for security reasons. So in that case your iframe would be correct. You just need to upload it to your server.

  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 12:18 PM

    Thanks, I'm pretty sure the source code for the iframe is correct now. When I am in my server environment, clicking on this link works for me:

    http://www.norelcosafecam.com/site/files/Miscellaneous/iframe.html

    But I notice that clicking on the Preview link opens a blank iframe and the message in the top-right of the browser says:

    "This page is trying to load scripts from unauthenticated sources."

    I think this could be why I don't see anything when building the iframe into the Jotform iframe embed widget.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 12:50 PM

    Yes its correct. Was my mistake (I was getting the cached version. Once I reloaded the iframe I got the working version).

    You are also correct about the unsafe scripts. You can allow the script to load. And the iframe will load successfully. 

    1515692968The Easiest Online Form Builde

    Finally to display your iframe better, you can increase the width of the form. Or you can decrease the width of the iframe.

    Hope that helps!

  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 12:57 PM

    Thanks,

    I have pasted the iframe URL into the widget,

    http://www.norelcosafecam.com/site/files/Miscellaneous/iframe.html

    But once I go to Preview mode, I still don't see anything, just white space.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 02:08 PM

    What browser are you using? If its chrome up the top right (in the address bar) there will be an icon where you can allow the script to load.

    If you have already done that, then access the page, and reload the page:

    http://www.jotform.ca/form/71315644674257


  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 02:23 PM

    Thanks,

    Yes, I am using Chrome and have since allowed the script to load via the icon you mentioned.

    - Will this mean my users will also have to click the icon for the iframe to load? (They are not web savvy).

    -Of course, the dreaded iframe issue is that it's not responsive/adaptive and so the pdf itself is too large for the iframe. When sizing the iframe larger, it becomes too large for the form.

    So it makes me wonder if I can place a text link in the form (target_blank) that opens the iframe in a new tab/window... and once the iframe pdf is filled out, can it be 'saved' to the form allowing the user to close the tab and continue filling out the form and submit?

    Ultimately, I am trying to make the integration of my fillable pdf as smooth as possible into my JotForm, thank you.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 03:18 PM

    1) Allowing the script

    I don't remember doing that for my example. You didn't have to do it either right?

    I assume there is an error in your iframe code. For starters the PDF src doesnt end in .pdf 

    What I recommend is you upload your PDF file with its extension (.pdf) to your server.

    Then get the new URL for this PDF file and update the <iframe src="your-pdf-file.pdf">

    2) Form width

    You can reduce the iframe width to 510 pixels. Because your form is 690 pixels wide.

    Or you can increase your form width instead.

    Both of these will display your iframe better.

    3) PDF hyperlink

    Yes its possible to add a hyperlink to the PDF instead of embedding an iframe. You need to add the Text field. This is the only field that allows creation of hyperlinks.

  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 03:34 PM

    Thanks,

    1. Yes, I had to click the icon at the top-right to display the iframe while in Chrome.

    2. I adjusted the width, but the fitment of the iframe into the form is still 'messy'.'

    3. I tried a text link and though it opens the iframe in a new tab, I don't think there's a way to save the info. entered into the fillable pdf into the JotForm.

    I'm thinking an alternative solution would be to make an entirely new Jot Form, and use it to rebuild the PDF — it's form fields and logo.

    So, this might be more elegant than the iframe. It would take longer to build out this form, but it might make for a better solution?

    Thanks.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 03:48 PM

    Oh no. How did we miss that. No matter where you put your PDF you cant submit it!

    Looks like you need to scrap that idea and build the whole form so that it can be submitted.


  • Profile Image
    ANDROSS
    Answered on January 11, 2018 at 04:02 PM

    Ok, that said, I'm looking at which template I should use to build this form out using JotForm:

    http://www.norelcosafecam.com/site/files/pdf/Norelco_SafeCAM_Credit_App_Fillable.pdf

    I really don't know if JF can help me build something this elaborate... if you can suggest an approach/template, please do. :)

    Thanks.

  • Profile Image
    aubreybourke
    Answered on January 11, 2018 at 04:16 PM

    May I suggest you try using the Narrative Fields widget?

    https://widgets.jotform.com/widget/narrative_fields