<form.io> supports an integration of Portable Document Formats or PDFs. As a result, PDFs can be uploaded to the the platform and converted into dynamic, API based, forms that interface directly with the user applications.
Here is a list of some components that can be interface with PDFs:
- Email Addresses
- Phone Numbers
- Date & Time
The number API requests and PDFs a project can have corresponds to the plan associated with the particular project. For more information view our Pricing section on our home website.
Creating PDF Forms
At their heart, PDFs are just fancy forms. So in order to get started, simply select
+ New Form from
within any project to get started.
A window will appear, prompting the user to select the type of form they wish to construct. Select
PDF Form to
upload PDF and the computers file management system will appear, allowing users to find and
select any PDF on their machine. After selection, it may take a moment while the platform uploads and processes
the submission. The Larger the file, the longer the processing time.
After completion, the PDF will display in the traditional platform builder with two notable differences. the first being the available PDF components ready to be placed on the PDF. The second being the display as option, but more on that later. For now, create a name, title and API path before saving the PDF Form.
Once saved, the PDF Form will now act like any other form on the platform.
This means users can integrate PDFs with staging, team workflows, and form versioning all while using a simple, drag and drop interface.
Interfacing with PDF Forms
With a PDF Form constructed, users can now begin interfacing with the document by adding a variety of components to the document. Simply clicking and drag any component to begin constructing dynamic PDFs.
Whenever a component is placed, the traditional dialog menu will appear allowing for labeling and
defining the component particulars. When finished, click
Once saved, the component will persist on the PDF document. At this point, users can click and drag the component to reposition it or click once to reopen the dialog box shown above.
With a completed form (shown below) it is worth mentioning that the PDF and components added above are regular form elements and can just as easily be converted back into a traditional form.
Calling attention to the
display as select menu, switching from PDF to Form will reveal the standard
platform interface for forms.
The ability to toggle between a Form and PDF interface so readily illustrates the power of the platform. When building applications, the JSON schema can be updated according by changing display: “pdf” to display: “form” and visa versa, users can replicate the platforms functionality, allowing for both interfaces to connect to the same API endpoints seamlessly.
Submitting and Viewing PDF Data
With a PDF form constructed, users can now begin to interact with submitting and viewing form data.
Use (or launch) tab to begin.
Complete the form and click
Submit at the bottom to post the submission to the projects database.
Data tab, users can view all submissions in a data grid and can interact with individual submission.
Notice that the data displayed in the table above is overlaid on a the PDF.
Provided the active user has permission, a printable copy of the PDF form and its data can be exported.
This power extends to simple form submissions as well. For example, if the traditional version of the form is filled out through an email or some other service, users can still print the submission in PDF form.
In addition to creating and uploading existing PDF documents, the Form.io platform can be used to create PDF’s of normal webform submissions. To achieve this, first create a new webform by clicking on the Forms section and then click on Create Form and then API Webform
Once you are here, create a new Webform with several sections using the Panel component, like this.
Once, the form is created, you can now create a new submission by clicking on Use button and then fill out the form you just created.
Once you fill out the form and create a new submission, you will be redirected to a submission view page, where you will then see a PDF icon to download the submission.
Clicking this icond will then create a submission as a PDF for download or print.
Now that you are able to print a submission as a PDF, you may also wish to introduce page breaks into the PDF download. To accomplish this, first edit your form, and then click on the element you wish to push down to a different page. In our example, lets edit the Team Information panel. In the seetings for this panel, we will then introduce a special class to that element called page-break-before. This tells the PDF renderer where to introduce new page breaks.
Now make sure to save your form.
Now, you can click on the download PDF button for any of the submissions, and it will introduce a page break before the element you provided.
Custom PDF Viewer
By default, the submission PDF’s that are generated use a hosted Form viewer application to render the submissions. This is great for many use cases, but there may be other situations where you would like to introduce your own viewer application to render the submissions for PDF generation. This is very helpful if you wish to provide your own PDF templates, or maybe even create submission pdf’s that introduce your own custom elements into the pdf generation. To achieve, this, the first thing you will need to do is fork the Form Viewer found @
Once you download this Viewer application, you will want to make sure you install dependencies with the following command.
You can make any changes you would like to the application. For example, we could use the Paper Theme from Bootswatch by making the following change to the
document.write('<link rel="stylesheet" href="lib/bootswatch/paper/bootstrap.min.css" />');
You can now compile this application using the following command.
This will create a dist folder, which you can then launch to your own hosting service. Once you have this hosted, you can then edit your form settings, and then introduce a new Custom Property called viewer and then set the value to the URL of your custom viewer application like so.
Once you save, and then go back to a submission and download that submission, you will notice that the PDF download now uses your own custom viewer application to render the submission PDF.
The current viewer is currently hosted @ https://formio.github.io/formio-viewer/dist. If you wish to make changes to the theme based on Bootswatch Themes, then you can use the following format
There are also some parameters that you can pass to the Hosted viewer if you wish to alter the output of the generated PDF. These parameters can be provided a GET query parameters to the viewer. For example, to not show the header for the viewer, you can provide the following.
The following viewer parameters are supported.
|theme||The Bootswatch 3 theme to provide to the pdf.||theme=yeti|
|header||If you wish to hide the header||header=0|
PDF Generation Parmameters
In addition to there being viewer parameters, there are also parameters that you can provide to the end of the PDF generation API. For example, if you wish to alter the margins of the generated PDF document, you can provide the following to the PDF generation url.
The accepted PDF parameters are as follows.
|margin||The margin as provided like a CSS margin (top,left,bottom,right)||margin=20,20,20,20|
|scale||The scale to provide to the generated PDF||scale=0.6|
|width||The width of the viewport when generating the PDF||width=800|
|height||The height of the viewport when generating the PDF||height=1100|
|view||To show the submission in “viewAsHtml” mode||view=1|