Please note: The Custom PDF builder is only available on Premium subscriptions (or via the additional paid module for Advanced subscriptions).
Custom PDF #
If you need a very specific PDFexport, you can take advantage of the Custom PDF builder.
When you are in Reports, mouseover Exports, then click to Settings. Then click to PDF and switch to the tab called “Layouts”, and then either press “Add new” or edit the existing one.
Custom PDF Builder #
Page Manager #
Page Manager allows you to change the page size and page orientation that will be used for your PDF. Note that since the editor does not use pages it will just change its width, however in the export itself, the correct width and height will be used.
Block Manager #
Block manager stores all the components that can be used for creating your custom PDF layout. You just need to drag and drop them inside the editor. Individual components are grouped in sections. Some components e.g. “Table” allow other components to be placed inside, while others e.g. “Page end” can be placed only inside the editor. Autofill components can be placed inside both normal block components e.g. “Table, Unordered List” and also the “Text” component.
Basic Blocks #
These components are used when creating the basic structure of the PDF.
Creates static text and can contain autofill components.
You can add any static text into your PDF. You can easily change the boldness of the required text by highlighting it and then click to B in the toolbar.
Allows the creation of links. The target of the link is set inside “Component Settings”.
Creates a static image. When dropped inside the editor window will open and that will allow you to select an image from your uploaded images or upload a new one.
If you want to add the Image from the response, you need to look at the Answers Block section.
Adds a page break to PDF. Because the editor does not use pages this will be represented only by a component that fills the whole width of the page which will separate the content. It can't be dropped inside other components.
Note that when exporting, if the content can’t fit within a single page, the page break will be added automatically.
Creates an ordered list. Other components can be placed inside including another ordered list.
Creates an unordered list. Other components can be placed inside including another unordered list.
Other components can be placed inside to create groups of components for easier manipulation. Additionally you can use Group to allow export of repeatable sections. All you have to do is set which section the specific Group should act as and then place only Questions from that section inside this Group.
Creates a table. Other components can be placed inside. When dropped inside the editor, you can specify the number of rows and columns the table will have through the dialog box that will open. When a cell is selected, rows or columns can be added, deleted or merged.
This component will automatically create a table from a section that you have created within your form.
Autofill Blocks #
This is a replacement for the autocapture form item. Special types of components which can be placed both inside the normal block e.g. “Table” and also the “Text” component. Their value is calculated when exporting to PDF based on the individual response.
Adds information about the responder based on the settings of the component.
Default: first name
Available: first name, full name and email address
Response Date & Time
Adds information about the response based on the settings of the component.
Default: Modified from App
Available: Modified from App, Modified to Web account, Created in App and Time taken to complete.
Adds a response unique id.
Adds response name.
Adds information about the form based on the settings of the component.
Default: Form name
Available: Form name, Form link
Answers Blocks #
These are the form items you have used in your form. Individual blocks are grouped by the sections in your form. Their value will be replaced with the responders answer when creating an export. Many of these blocks have additional settings which can help you customise how they will display. You can read about these settings in detail in the chapter “Component Settings”.
Custom DB #
The Custom DB Item block allows you to add values from one of your custom databases to your Custom PDF. This block is only available if the form for which you are creating a Custom PDF has a Custom DB set.
The value of this block in the exported file depends on what Table and Column you set in the component settings and what row is selected by responder. Both Custom DB Table and Column must be set for this component to work.
Component Settings #
Shows the available settings for the currently selected component. Some of the components can either be displayed as blocks or as inline elements. This is controlled by the checkbox “Display inline”. Inline elements can be placed inside the “Text” components and don't force a newline after them, while block elements cannot be placed inside the “Text” component but do force a newline after them. All components that represent form items, table rows and cells can have Conditional settings that control how the component will be displayed based on the response data. Conditional settings are explained in the chapter Conditional Settings.
Comments & Images Settings #
Settings for the Comments & Images form item.
- Image scale: Controls how images are scaled
- Show Images: Controls the display of uploaded images
- Show Notes: Controls the display of notes
- Show Image Comments: Controls the display of comments for individual images
- Show Dates: Controls the display of uploaded image dates
- Number of Placeholders: Controls how many placeholder images you will see in the editor. Does not affect the final export.
Radio and Checkbox Settings #
Settings for both the Single Answer and Multiple Answer form items.
- Option separator: Controls how the individual options are separated
- Display options: Controls how the options are displayed
- Only Selected: Shows only the selected options
- Selected with icons: Shows selected with a ticked checkbox next to the option
- All with icons: Shows all options with the icons (including options that were not selected). Selected and non selected options will have appropriate images displaying their status.
- Show Images: Controls the display of the related option images
Signature Settings #
Settings for Signature form item.
- Display options: Controls how the Signature will be displayed
- Signature with Date: Shows both signature and date in format set in member profile.
- Signature with Date and Time: Shows both signature and date with time in a format set in the member profile.
- Signature only: Shows only signature.
- Date and Time only: Shows only the date with time in the format set within the member profile.
- Date only: Shows only the date in the format set within the member profile
GPS Settings #
Settings for GPS Location form item.
- GPS Display: Controls how the GPS will be displayed.
- GPS Coordinates: Only the GPS coordinates will be shown.
- Only Map: Only map will be shown. Map is controlled by further settings.
- GPS Coordinates with Map: Both GPS coordinates and map will be shown. Map is controlled by further settings.
- Map Type: What kind of map should be used.
- Roadmap: Standard Google Maps.
- Satellite: Satellite image of the location.
- Hybrid: Satellite image of the location with information from a roadmap overlaid on top.
- Terrain: A Map that shows terrain with information from the roadmap overlaid on top.
- Map Size: Controls map size. Map will always be displayed as a square.
- Large: 400px
- Medium: 300px
- Small: 200px
- Zoom Level: Controls the map zoom level. Available values range from 1 (World) to 20 (Buildings).
Page Settings #
Settings for a PDF watermark and margins. Select the “Body” to edit (eg by clicking anywhere outside the main content area). Leave this empty if you don’t require a watermark. Note that since the editor does not use pages the watermark will scroll with it, when exported the watermark will be applied per page. Additionally you can also change individual page margins, your new margins will be used for the whole PDF. If you require to change the margins for another page you can do so using the Page Break, margins set using the Page Break will be applied until the end of a file or with another Page Break.
Page End Settings #
Allows to change the margins or page size and orientation of following pages. Changes are kept until the end of the file or until another Page End is used.
Group Settings #
Set if the group should act as a section, required for the repeatable section to work properly. If the Group is not used for a repeatable section only the first clone will be exported. If it’s used as a section, form items that don't belong to that form section should not be dropped inside as they will not work properly when exporting.
Custom DB Item #
Available settings for Custom DB Item:
- Custom DB Table (Required): sets from which table the value will be taken.
- Custom DB Column (Required): sets from which column of the above table the value be taken from.
- No Value Placeholder: text that will be used when no value could be found. Default: “-- no value --”.
Both the Custom DB Table and the Custom DB Column are mandatory and have to be set for this component to work.
Style Manager #
Style manager allows you to set the style for individual components. When styling components by default, the style will apply only to the selected components to prevent having to set multiple components with the same style. You can create a class that can then be set to components that you wish to change.
A class is created by clicking on the plus sign in “Classes”.
The checkbox next to the class name works for selecting the class you are currently styling. Styles will apply to components that match the “Selected” condition which can be seen under “Classes”
Example of “Selected” values:
- Styles will only affect a specific component:
- Styles will only affect components with class:
You might notice that some labels have a different color other than black, these colors give you information regarding the value:
- Non default value, this value was changed.
- Inherited value, this value was inherited from one of parent components.
Note: If you are making changes to the style manager, We would expect you to have some basic knowledge of HTML as well as CSS.
Allows you to float components to the left or right. Note that when used on a component that is inside a “Table” this setting will be ignored.
These settings allow you to set the size, margin and padding of the component. Note that when used on a component that is inside the “Table” these settings will be ignored.
Here you can set styles regarding the font family, font size, font weight, letter spacing, colour, line height and text shadow. You can use color picker to set the color of the text or shadow. To show color picker click on the black box (there might be different color if it was changed) right of the color input.
Here you can find the border, box shadow and background settings. Here you can also use color picker to set any of the colors.
Layer Manager #
Layer Manager allows you to see the tree structure of your PDF layout. Here you can quickly hide or move individual components. When hovering over an element inside the layer manager, the corresponding element is highlighted in the editor.
Conditional Settings #
All the form items have a special setting called ‘Conditional’ that controls what happens with the selected component based on the answer to some form items.
The number of conditions currently applied to the selected component are displayed in brackets.
The Conditional display controls when the form items will be shown. In the above example “Radios” will be shown when “Checkboxes” have checked “Option 5” and the “Number Input” is more then five. This is because the “All Required” option is selected if “At least one” would be selected only one rule would have to be true.
Conditional Color controls what color either the background or text will be. In the above example “Radios” will have a green background if “Radios” have “Yes” checked, if “No” is checked a red background color will be used. Unlike in the Conditional Display, Conditional Color doesn't have a setting for how many rules have to be true to be applied. Simply put, if the rule is true the color will be applied. If there are multiple rules that all control background or text colors are true, then the last one will be used.
Conditional Image controls when to show images that you specify either next to, or instead of the answer. In the above example if “Radios” has “Yes” checked, the specified image will be shown instead of the answer. If “Yes” is not checked, the other specified image will be shown instead. You can set different images and image sizes for each rule. You can set the position of the image with the dropdown available. Values are: “Above”, “Below”, “Replace”. This is similar to when the Conditional Color Conditional Image doesn't have a setting for how many rules have to be true.
Conditional Link works identically to Conditional Image but instead of using images it uses member specified links.
Custom Headers and Footers #
You can create custom headers and footers to use in your PDF. You can create new custom headers and footers by clicking on the Content dropdown and selecting “Create new custom header” or “Create new custom footer”.
After settings, the header or footer name you can customize just as you would a PDF layout. When you are finished with your custom header or footer use the Content dropdown to switch back to the PDF Layout. You can then set the header or footer in page settings. If you want to use a different header or footer for different pages you can set it with the “Page end” component.
When you apply your changes, you can click to the preview icon in the top bar and a PDF document of the latest response will be generated. You don’t need to save the PDF template, so this can be very useful when you just want to confirm how your changes will look.
If your form has no responses the preview can't be generated.
Exporting your results #
To generate your fully customisable PDF report, just go to the Reports page, mouseover your response and you can see a PDF icon displaying a cogwheel for each custom PDF template you have created. When you click on this icon, the PDF will begin to download.
Triggers With Custom PDF Layouts #
- Example 1a, Example 1b: Response with cloneable sections and hidden rows based on the conditionals rules. 1b is displaying cloneable section as a row in the table.
- Example 2: Response with different page styles (A4 portrait, A4 landscape)
- Example 3: Different table styles - Looks like an official form.
- Example 4: Advanced graphics - Different headers and footers in sections, Static images added to the content. Images from Responses added in different formats and sizes. Display GPS coordinates collected in the Response on the Map with different settings.
- Example 5: Two and four column layout example that is autogenerated by dragging “section” component to your PDF layout.
- Example 6: Adding watermark image and/or customised text to the PDF background.
Note: see blue boxes inside the PDFs for closer explanation of the example.