User Guide

 

How to Display a PDF Document on Your Form

How to Display a PDF Document on Your Form

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.

Send Comment

13 Comments...

  • bplmtHRConnect

    Can someone assist me as to how can I insert a PDF uploaded in Jotform with Google Forms ?

  • edorathy

    We need the person filling out the form to be able to download the PDF to keep it. Is there capability to do this?

  • Comprehensive401

    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!

  • Comprehensive401

    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?

  • jgroot

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

  • hatmakh

    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?

  • darapareddy2007

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

  • genierose

    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



  • genierose

    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.

  • arronlee

    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.

  • arronlee

    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.

  • pakkayu

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

    thanks

    Woody

  • halh

    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