How to Display a PDF Document on Your Form

Last Update: August 6, 2017

There are two ways to display a PDF document inside a form. The first method utilizes the PDF Embedder Widget to display the PDF using Google Docs' PDF viewer - So, there is no need for Adobe Reader. The second is by embedding it directly using an iframe via TEXT FIELD. This requires the user's browser to have Adobe Reader installed.

Method 1: Using our PDF Embedder Widget

1. Click ADD FORM ELEMENT and go to the WIDGETS section.

2. Search for the PDF EMBEDDER widget then add it to your form.

3. On the GENERAL tab, click the UPLOAD FILE button and upload your PDF file.

4. Click the UPDATE WIDGET button to save your changes and that's it!

Method 2: Using an iframe via TEXT FIELD

1. Upload the PDF file to your web host or to an online cloud storage. Copy the exact location (URL) for this file.

2. Add a TEXT FIELD to your form.

3. Click the SOURCE CODE button in the toolbar.

4. On the SOURCE CODE modal popup, paste the following codes:

<iframe style="width: 100%; height: 600px; border: none;" src="PASTE_YOUR_PDF_URL_HERE"></iframe>

You need to change the src attribute value (PASTE_YOUR_PDF_URL_HERE) with the actual URL of your PDF file. You can also change the width and height values upon your discretion.

5. Click the OK button to save your changes.

Here's a demo form showing both methods: https://www.jotform.com/72167631090958

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.


11 Comments...


   
halh (May 17, 2012 at 07:59 AM)

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

View Answer


   
pakkayu (February 27, 2013 at 06:48 AM)

Sorry that isnt working for me. Ot just doesnt show anything or it removes the closing i frame tag.

thanks

Woody

View Answer


   
arronlee (July 22, 2013 at 10:08 PM)

Thanks for your nice sharing. But I used to display PDF files with the help of a [url=http://www.yiigo.com/net-document-image-plugin/pdf-plugin/pdf-read.shtml]PDF reader SDK[/url] whose way of processing is simple and fast. And I will try your sharing later.

View Answer


   
arronlee (July 22, 2013 at 10:10 PM)

Thanks for your nice sharing. But I used to display PDF files with the help of a PDF reader SDK whose way of processing is simple and fast. And I will try your sharing later.


   
genierose (December 09, 2013 at 03:47 AM)

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.

View Answer


   
genierose (December 09, 2013 at 04:28 AM)

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:
http://form.jotform.co/form/33421980609860

The form I imported is here:
http://quilt-festival.com/quilt-entry-form.pdf



View Answer


   
darapareddy2007 (December 26, 2013 at 12:37 PM)

The example form says :
Form not found
This form has been deleted by the owner.
Try contacting the owner of this form.

View Answer


   
hatmakh (April 23, 2015 at 10:04 AM)

I get a "page not available" error everytime I create a pdf from my form. Below is the "details" of the error:
https://jufs.s3.amazonaws.com/51095004630141/StartSmart_Form.pdf might be temporarily down or it may have moved permanently to a new web address.

Any suggestions?

View Answer


   
jgroot (March 27, 2017 at 10:30 PM)

Hi - can you update instructions for the new version? thanks!

View Answer


   
Comprehensive401 (April 18, 2017 at 03:10 PM)

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?


   
Comprehensive401 (April 18, 2017 at 03:17 PM)

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!


Send Comment