Embedding a PDF on a formassembly form

Some folks needed a form that had an embedded pdf for review. I was hoping to find something that works on desktop, and works or is at least not a total disaster on mobile.

Found the pdfobject js library : https://pdfobject.com/ which seemed to know a bit about the subject. Tried all the ‘static’ / pure html approaches, and discovered the formassembly blocks the tag which otherwise worked perfectly well. Note - you can actually save a form w the object tag, but it will disappear the next time you open it. Support says they will work on blocking it better soon

So tried out the js approach, and it worked out well. Works great on desktop and displays the ‘fallback’ option to download the pdf on mobile devices that do not support embedded pdfs.

Here is how to do it

To start, create a form with two sections, and one text area in each section. Make the second section a hidden section

Save the form, and view it in your browser
Use your browsers dev console to get the ID of the first section (usually something like tfa_1)

Go back to editing the form.
In the second (hidden) section, add the basic js embed from pdfobject, and replace “#example1” with the ID of your div.

Its important that this section is BELOW the section that will display the pdf, because of the order in which the page loads. This will not work if this section is above the section that will display the PDF. It doesnt need to be hidden, but marking it as hidden makes it easier to see in the form builder (oh, the irony…)

Next, in the form properties, add a link to the js library

Note that there are 3 CDNs listed at the bottom of the pdfobject home page though its perhaps more secure if you host it yourself. Ask someone who knows about this kinda stuff.

That should do it!

Optionally you can resize the div that holds the pdf, and eliminate double scrollbars by adding the following CSS to your form’s properties section (replace #tfa_6 with the id of your pdf-containing-div)

<style>
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
  #tfa_6 {overflow: visible;}
</style>

And here is a live demo.