×
HIDE

How to convert Form to PDF Step by Step

PDF Generator empowers converting a form to PDF. You can send the pdf file to users via Email action.

PDF are one of the most used file formats. PDF files can’t be easily modified by anyone, people use PDF format in many work actions. Therefore, Converting a web form to PDF is a usual demand. In this article, we will show you how to do it step by step with Piotnet addons for Elementor.

Tutorials

Step 1:

Create a form to collect the necessary information. This is the form through which your clients could submit their information for conversion to PDF.

prepared form to pdf
Create a form

Step 2:

Edit the Submit button, select “Actions After Submit” -> Add Action -> PDF Generator.

Add PDF Generator to action after submit

Step 3: In PDF Generator Section, select Custom Layout Options (Yes/No)

  1. If Custom Layout is disabled: Fields on the form will be automatically mapped into the PDF file in the order, and you can edit some of the following information:
  • Title: You can add a title, and edit the display position, text size, and font color of the title.
  • Field Mapping: Edit and format form fields that are mapped into PDF files.

Show label:

     – If Yes: Show additional labels corresponding to the fields in the PDF file.

Show label

     – If No: The corresponding labels will not be displayed in the filed PDF.

Not show label

Front Size: Format the text size of Field Mapping.

Set font size

Text Color: The text color of Field Mapping.

Set text color

Text Align: Format the position of the text in the PDF file.

Set text align
  1. a
  2. The custom layout is enabled (Yes): Fields in the form will not automatically be mapped to the PDF file, we need to map and position the fields. Click ADD ITEM to add fields mapping.
  • Import template: You can select the file template to insert.
  • Get Template URL: You need to visit: WP Dashboard> Media> Library> Upload PDF Template File> Get File URL
Import template
Upload template and copy link
  • PDF Template File URL: Paste the URL template into the PDF Template File URL
Paste url template
  • Load PDF Template: Click Load PDF template to display the template.
Load teamplate and mapping

Example:

– Field name

  • Copy and paste shortcode of field name to Field Shortcode Box
Copy and paste shortcode field name

Type: 

     Default: the field format displayed in the PDF file is text.

     Image: field displayed in the PDF file will be an image (You need to specify the field format before choosing the type).

     Image upload will allow you to upload an image file into a PDF.

     Custom Font: Used to edit the font for field mapping.

     Width: Adjust the width size of the field mapping

     Set X: Adjust the position of the field map horizontally.

     Set Y: Adjust the position of the field map vertically.

  • Image Background: Applying if you want to leave a background image for the PDF file.
Set Image Background
  • Check the position displayed in the preview under the submit button.
Preview
  • After the editing is done, click Update and check the active form.
Pdf file after submit

How to use special characters/other fonts in PDF:

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

Download your font here 

Then go to dashboard > Piotnet Addon for Elementor> PDF Custom font > Add new > upload/add font.

Notice: just apply for TTF File.

*Current Limitations

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

1. PDF works fine with 1 page and A4 size when mapping fields (Custom Layout)

2. This function currently works with versions under 1.6. 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 one

3. The maximum of Y-ASIS (Set position Y) is 89.8 mm. If not, the field will be mapped to the next page.

You could make a demo here:

[field id="fname"] [field id="lname"]
[field id="date"]
[field id="Rname"]
[field id="title"]
[field id="company"]
Dear [field id="Rname"]
[field id="content"]
[field id="fname"]
[field id="address"]
[field id="tel"]
[field id="website"]
[field id="email"]
Sincerely,
[field id="content"]
mailbox illustrator

Please check your email inbox. If you haven’t received anything,

also check your spam folder.

images with text "you just made my day"

PAFE Form Builder

Extensions

PAFE Widgets

piotnet addons for elementor white icon
Popup Trigger URL
Piotnet Addons For Elementor