There are two ways to display a PDF document inside a form. The first method uses the PDF Embedder Widget to display the PDF. The second is embedding the PDF directly via an iframe using the Paragraph element.
Update
We are excited to announce that we have just released the new version of Jotform PDF Editor.
How to Use the PDF Embedder Widget
Using the PDF Embedder widget is highly recommended as it is straightforward and doesn’t require any technical knowledge to set up. Here’s how:
- Click the Add Form Element button in the Form Builder.
- Go to the Widgets tab.
- Search for “PDF Embedder” from the list.
- Click or Drag and Drop the PDF Embedder to add.
- Under the General tab of the PDF Embedder widget settings, click the Upload File button.
- Assuming the PDF file is in place, click the Update Widget button at the bottom to save the settings.
How to Embed a PDF Document Using Iframe
If you wish to load the PDF file outside, for example, on your server or cloud storage, you could use the iframe method. You only need the secure (HTTPS) link to the PDF file. Here are the steps:
- In the Form Builder, add a Paragraph element to your form.
- Click the Source code icon from the toolbar of the Paragraph element.
- Paste the following code in the Source code window:
<p>
<iframe style="border: none; width: 100%; height: 500px;"
src="{url}"></iframe>
</p>- Replace {url} with your PDF document’s link from your server or cloud storage. You can also change the width and height values at your discretion.
- Click the Ok button to save the changes.
Here’s a demo form showing both methods: https://www.jotform.com/220642685583058
Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.
Send Comment:
24 Comments:
88 days ago
In the demo showing both options, the iFrame embed option is not working
131 days ago
I am not sure if my Independent Documentary Association (ida) application using create your Jotform with PDF attached was successfully submitted with invite notification.
More than a year ago
Is there a way to delete an embedded PDF if you used Iframe?
More than a year ago
How do you embed pdf file for viewing only with no download option.
More than a year ago
Hi,
I'm trying to utilize the PDF Embedder as a selection (radio button) that whenever some chooses a certain PDF (3 selection) that certain PDF then gets attached to the submission,
Can someone help me achieve this please?
More than a year ago
Hello,
I am attempting to include a fillable PDF inside of a form. The function of the PDF is for people to fillout the fields within the PDF and submit along with uploaded documents. After tested the pdf embedder widget, the fillable pdf shows up as blank. Is there a solution to this? Please advise.
More than a year ago
I never know is this pdf or what
More than a year ago
So confused...All I want to do is attach a fallible PDF to my form and its impossible. What is the best solution for what I am trying to do?
More than a year ago
I am trying to use this method to display an external html page. But when I insert the code with the iframe and press ok, the code is simply not saved and when I edit it again, nothing appears.
More than a year ago
Is it possible to display pdf files in local computer?When I try to display pdf files in my local computer, error is shown like that 'not allowed to local resoutces'. How do I do?
More than a year ago
Can someone assist me as to how can I insert a PDF uploaded in Jotform with Google Forms ?
More than a year ago
We need the person filling out the form to be able to download the PDF to keep it. Is there capability to do this?
More than a year ago
I am sorry but I realized my problem was my error. I didn't notice at the bottom of the page I had to update widget. It works fine now. Thank you!
More than a year ago
I used the Widget PDF embedder and uploaded the pdf onto page two and page 2 is blank. I didn't get an error and everything appeared to work but page 2 has nothing on it. What can I do?
More than a year ago
Hi - can you update instructions for the new version? thanks!
More than a year ago
Your URL https://www.jotform.com/adobe-formscentral-alternative/ does not seem to be active. I downloaded some Adobe FormsCentral templates and would like to import them to Jotform. Can it be done?
More than a year ago
I get a "page not available" error everytime I create a pdf from my form. Below is the "details" of the error:
might be temporarily down or it may have moved permanently to a new web address.
Any suggestions?
More than a year ago
The example form says :
Form not found
This form has been deleted by the owner.
Try contacting the owner of this form.
More than a year ago
Well, I was able to embed the form using a widget. However, There are a few problems. I have viewed the form on Firefox, Chrome, and Safari and can't fill out the form with any of those browsers. The interactive function of the form seems to have disappeared. Also, I can't get rid of the word "Click here to edit" because when I delete those words the form is also deleted.
When I view the form on Internet Explorer 11 this is what I get:
"This content cannot be displayed in a frame
This content cannot be displayed in a frame. To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
You can view my form here:
The form I imported is here:
More than a year ago
I have not been able to import my PDF interactive form into the text area because of error 404. However, the error window gives the URL of the form; I copied the URL and pasted it and the form come up, so I know that it is available and the URL is entered correctly.
Also, when I click on "text" the HTML button that is shown in the above instructions is not there and so I clink on edit html which is in the text area and enter the iframe there. (The instructions are not what I see on my screen).
I hope you can help me be able to help me.
Thank you.
More than a year ago
Thanks for your nice sharing. But I used to display PDF files with the help of a whose way of processing is simple and fast. And I will try your sharing later.
More than a year ago
Thanks for your nice sharing. But I used to display PDF files with the help of a [url= reader SDK[/url] whose way of processing is simple and fast. And I will try your sharing later.
More than a year ago
Sorry that isnt working for me. Ot just doesnt show anything or it removes the closing i frame tag.
thanks
Woody
More than a year ago
The solution 11474017239 displays properly in Windows 7 browsers, IE8, Firefox 10-12, and Google Chrome 18. However the pdf file does NOT display on the Mac browsers, Safari 5.17 and Firefox 12. It does display in Mac Chrome 18