Embedded PDF: Fillable PDF form as part of my JotForm

ANDROSS

Asked on January 8, 2018 at 1:15 PM

Hi,

I just tried to include a PDF widget into my JotForm in order to embed 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.
aubreybourke

Replied on January 8, 2018 at 2: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.

The URL for the iframe is:

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

You can see it working here:

https://form.jotform.com/80075835936970
ANDROSS

Replied on January 8, 2018 at 3: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.
aubreybourke

Replied on January 8, 2018 at 4: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.
ANDROSS

Replied on January 8, 2018 at 4:45 PM

Thanks,

I'd like to host the iframe myself, so I downloaded the webpage and have the following source code from it:

<!DOCTYPE html>



<html class="gr__aubreythankyou_000webhostapp_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style id="stndz-style"></style>

<script style="display: none;">var tvt = tvt || {}; tvt.captureVariables = function (a){for(var b=new Date,c={},d=Object.keys(a||{}),e=0,

f;f=d[e];e++)if(a.hasOwnProperty(f)&&"undefined"!=typeof a[f])try{var g=[];c[f]=JSON.stringify(a[f],function(a,b){try{if("function"!==typeof b){if("object"===typeof b&&null!==b){if(b instanceof HTMLElement||b instanceof Node||-1!=g.indexOf(b))return;g.push(b)}return b}}catch(N){}})}catch(l){}a=document.createEvent("CustomEvent");a.initCustomEvent("TvtRetrievedVariablesEvent",!0,!0,{variables:c,date:b});window.dispatchEvent(a)};window.setTimeout(function() {tvt.captureVariables({'dataLayer': window['dataLayer']})}, 2000);</script></head>

<body data-gr-c-s-loaded="true">

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

<div style="text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website_{$app[%27name%27]}&utm_content=footer_img"><img src="./iframe_files/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com0"></a></div>

<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>

I think I can host it via my website, but alternatively, do you suppose I should just create my own iframe from scratch? Hopefully it's not too difficult?

I ask because I see in the source code it says things like,

Hosted on free web hosting 000webhost.com. Host your own website for FREE.

... and I am not sure I should include that when hosting.

Also, when I hover over the iframe you built, the top says,

Midway Truck Center Inc

... and I'm not sure why that's there. Did you enter it when testing, perhaps?

Thank you kindly.
aubreybourke

Replied on January 8, 2018 at 5: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.
Andross

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

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

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
ANDROSS

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

Replied 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>
ANDROSS

Replied on January 11, 2018 at 11:56 AM

That's interesting, my iframe actually is 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>

I'm not sure why you're seeing different height and width dimensions.
aubreybourke

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

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

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

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

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!
ANDROSS

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

Replied on January 11, 2018 at 2: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
ANDROSS

Replied on January 11, 2018 at 2: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.
aubreybourke

Replied on January 11, 2018 at 3: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.
ANDROSS

Replied on January 11, 2018 at 3: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.
aubreybourke

Replied on January 11, 2018 at 3: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.
ANDROSS

Replied on January 11, 2018 at 4: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.
aubreybourke

Replied on January 11, 2018 at 4:16 PM

May I suggest you try using the Narrative Fields widget?

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