Summer Sales 20 Off for Piotnet Addons & Piotnet Forms
HIDE

PDF Generator – How to Convert WordPress form to PDF

PDF Generator feature helps you to send the PDF attached file of your form to assigned emails. You will be able to choose which fields would appear in the PDF file.

You can send quickly online contracts, commercial invoices, confirmations, registration forms, or any documents in PDF format for Website visitors via a WordPress form.

PDF generator convert wordpress form to pdf

Step by step to set up PDF Generator action

Essential Initialization

Create your own form by Piotnet Forms. You can use one of our available templates to test this feature first.

pdf generator
Create your own form

Click on “Submit Button” → “Settings Tab” → “Action After Submit” → add “Email” and “PDF Generator” actions

pdf generator 2
Email and PDF Generator are two mandatory actions

Immediately, two action control sections of Email and PDF Generator display in “Submit button Settings” (right below the “Action After Submit”)

pdf generator 2 2
Submit button Settings

→ Click on the Email control section, then customize your content and relevant elements

The PDF file will be attached to the receivers’ email addresses once you’re completely set up with the PDF Generator feature.

In case, you apply both “Email” and “Email 2” actions and desire to only attach a PDF file to 1 email action, you can disable it by this function in the Email/Email 2 control.

pdf generator 23
A function to disable attachment PDF in Email/Email-2 control actions

For example:

First Email action: attach a Registration PDF file to your email.

Email-2 action: a confirmation mail without a PDF attachment file.

→ After that, click on the PDF Generator control section and start configuring it.

Default Settings (Basic Level)

pdf generator 3
Illustration for PDF Generator action

By default, this feature supports 5 PDF format sizes:

  1. A3 paper measures 297 x 420 mm
  2. A4 paper measures 210 x 297 mm
  3. A5 paper measures 148 x 210 mm
  4. Standard Letter with 215.9 x 279.4 mm
  5. Legal (215.9 x 355.6 mm)
pdf generator 4
5 Available Standard Format Sizes

In case you want to save this file in core coding for other purposes, you can trigger this function. The PDF file will be store in: “wp-content/uploads/piotnetforms/files”

pdf generator 5

To customize the PDF file name, you can trigger the function “custom export file name”

pdf generator 6
Possibly adjust file name and title styles

For illustration, I submitted a test form and got a result in the email below

pdf generator 7
First demo test
pdf generator 8
The result of first demo test in email

You are able to update an Image for the Background, this function just works with jpg format

Show label: to show the labels of your fields on a PDF file

There are some functions to customize entry data field styles: Font Size, Text Color, Text Align.

pdf generator 9
Image Background illustration

For the next instance, I kept submitting a test with an uploaded image background

pdf generator 10
Second demo test
pdf generator 11
The result of second demo test in PDF attach file

Summary:

  1. You can upload an image to be a background of the PDF template.
  2. By default, all entry fields in your form will be displayed in a top-down sequence.
  3. If your form is long enough, the PDF feature will automatically break into multiple pages.

Custom Layout (Advanced Settings)

In case, you desire to customize the PDF background with an available PDF template and arrange the field locations in your PDF file.

→ Trigger “Custom Layout”

pdf generator 12
Custom Layout is triggered

PDF Template File

→ Trigger “Import Template” to apply your available PDF Template File

There are two important principles for your PDF Template File:

  1. This function currently works with versions under 1.5. Maybe your PDF Template File is not appropriate for the version of Piotnet. You may check your version here and convert the PDF file to our required version by using this tool.
  2. This function just works for only 1 PDF page with A4 size format
pdf generator 13 (2)
A Standard PDF Template File Demo

Once your PDF file meets the standard principles above, please upload it to your media and get the File URL

pdf generator 13
Upload your PDF Template to Media

Then embed the uploaded PDF file URL to “PDF Template File URL”

pdf generator 14
Embed PDF Template URL

Field Mapping Controls

If Custom Layout is enabled in the settings section, PDF Generator will display a menu of Field Mapping Controls.

Click “Add Item” to make additional fields optional and adjust the position of the fields just by mapping.

pdf generator 16
Field Mapping Controls

Field shortcode: click on field shortcode to map form fields, and you can choose the appropriate field via a dropdown list.

The options display the Labels or field shortcodes of form fields.

pdf generator 17
Dropdown list for Field shortcode

Type: There are three options

  1. Default: If your field is relevant to the text types (except the Image Upload/Signature field type)
  2. Image: When you want to map an Image Upload/Signature field in your form.
  3. Upload your Image: in case you want to directly upload an Image to this PDF Template and customize its location. For example, a logo or signature
pdf generator 18 1
Choose your appropriate types

For “Custom font”: a function to apply your local fonts/Google fonts and style them with this function.

pdf generator 20
Custom Font is triggered

In order to use normally your local language characters, please add a PDF font that is appropriate to your language.

Example: ä, ö, ü, Ä, Ö, Ü or ອີກປະການໜື່ງ

→ Download Google fonts here 

→ Then go to dashboard > Piotnet Forms> PDF Custom font > add new > upload/add font.

pdf generator 25

For instance: I added a font with TTF file: NotoSansLao as below

pdf generator 24

Notice: don’t forget to extract the Zip file and just upload for TTF file.

After that, your imported font will appear in “Font Style”

pdf generator 26

For locating field shortcodes in the PDF Template area, you can customize 3 elements below:

  1. Width: The width of the entry data, if it is long enough, it will automatically break down to the next line
  2. Set X: adjust the position of the field following X-ASIS with the percent unit.
  3. Set Y: adjust the position of the field following Y-ASIS with percent unit. The maximum of Y-ASIS (Set position Y) is 89.8%. If not, the field will be mapped to the next page.
pdf generator 19
3 elements to customize the locations of fields

Illustration for the custom layout function

pdf generator 21
An example setup for Custom Layout function
pdf generator 23
The result in your email attached file

Summary of Current Custom Layout Limitations

At the moment, the PDF Generator can perform basic manipulations when enabling the Custom Layout function. You may meet some unexpected cases if you do not follow our list below:

  1. This function currently works with PDF versions under 1.5.
  2. PDF Generator works fine with 1 page and A4 size when mapping fields
  3. When mapping, the maximum of Y-ASIS (Set position Y) is 89.8 %. If not, the field will be mapped to the next page.
  4. In addition, PDF Generator is not available to display from right to left. (Right-to-left script)

Notice: when you have a long form and do not have a need to customize the position’s fields, all fields will be automatically ordered and broken page.

———-

See another valuable feature of Piotnet Forms: Multi step form