Using the Dynamic PDF Mapping

Last updated May 17 2018

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, he 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 also insert a Page break in the PDF editor which will divide your PDF into pages (this is optional of course). Please note that while you are in the editor you will only see 
horizontal separation lines where the page break is, but when the user will print it  - the content will be separated into full size PDF pages.

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 "Submit" in the upper toolbar and configure the Submit options.


and set the following: 
- Turn on the "Preview before submit" checkbox
- Enter text for finish button, Close button and title of preview window.
- Turn on the "Send to owner" checkbox to make sure that this PDF is sent to the form owner once it 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.