Using the Dynamic PDF Mapping

Last updated May 29 2019

Using the advanced PDF Mode

When you add PDF Mapping to your form the standard editor opens, allowing you to easily create a PDF by uploading your document, and then placing your form fields above it. It's really simple to do.
However, for those who do not want to create their PDF this way we offer a Dynamic Mode.
Once you move to this mode, the editor will change, allowing you to insert HTML code, play with styling and even use a table element for displaying your repeated section items dynamically.
Wanna' see how it's done? follow this example:

1- Create a new blank form
2- Move submit button down - so it is located after the section.
3- Drag a few elements on to the canvas
Textbox - > change its label to "Parent Name"
Drag a Section, and make it wider to fit the 3 following elements: 
- textbox --> change the label to "Child name"
- numeric --> change the label to "Child age"
- textbox --> change the label to "favorite color"


4- Select the section and go to: "Properties" panel > "Element" tab > "Settings" option > "Basic" category 
Turn on the "Repeated" option. This will allow the form filler to add button and enter  multiple items instead of just one.


4- Save the form

5-

Now let's add the PDF Mapping
Go to: "Properties" panel > "Form" tab > "Settings" option > "Basic" category > Pdf Mapping

6-

Press on the "Map fields" button and a window will open - containing the standard PDF mapping editor
Select the Dynamic mode from the upper toggle


7- The editor will now switch to the Dynamic PDF editor

8-

Now you can Enter your content in the editor. 
You can make this a multi-page PDF by adding pages. Simply press on the '+Page' in the toolbar and a new page will open in a seperate tab.
You can also add pages by inserting a Page break in the PDF editor from the 'Insert' option, and it will divide your PDF into pages. However, this way you will not see the pages in different tabs, but rather a
horizontal separation line that will divide the content in the editor. 

9-

Inserting HTML
Go to Menu > "View" > "Source code"  and paste your HTML code in the window.

10-

Apply Styles
You can enter text and style it: select font, size, color, alignment etc.


11- Adding a table with repeated section data
Go to Menu > "Insert" > "Table"  and create 1 row and 3 columns


The table will now appear in the editor. It will only have one row, and we will need to just map it to the 3 section fields.
but do not worry - more rows will dynamically be added based on the number of rows the form filler added in the repeated section.


In the left column
- Click inside the column and Enter text:  "Child Name:"
- Open the "All element" dropdown and Choose the Child name field
it will look like this:


In the center column
- Click inside the column and Enter text:  "Child Age:" 
- Open the "All element" dropdown and Choose the Child Age field
it will look like this:


In the right column

- Click inside the column and Enter text:  "Favorite color:" 
- Open the "All element" dropdown and Choose the Favorite color field
it will look like this:
   
12- Press on "Settings" in the upper toolbar and configure the PDF properties.


and set the following: 
- Open the 'General' category and turn on the "Preview before submit" checkbox
- Open 'Buttons & labels' category and enter a different text for the finish button, Cancel button and preview window title (they already have default values, so this is optional).
- Open the 'Emails' category and turn on the "Send to owner" checkbox. This will make sure this PDF is sent to the form owner once the form is submitted.
   
13-  Press on "Apply" 
14- One last thing you should know...The dynamic PDF you are now creating will be generated in an A4 size document. The PDF will have default margins on all sides, so if you wish to remove them you can do so by by turning on the 'Remove auto margin' checkbox. If you then decide to add your own margins, you can do this in the Html Source of the PDF.
Simply go to: View > Source Code.

15-

Save the form.
 16-  Test your form:
Publish it as URL and enter a parent name and details for 3 children. (press twice on "Add" to get three lines)


Press on submit - and a preview of the generated PDF will appear
If you press on "Finish" the entry will be submitted and the PDF will be attached to the email sent to the form owner.

 

 
CommentsLogin Required
Didn’t find what you were looking for?
Try the following for assistance or Use the Search box.