Showing Checkboxes in a Dynamic PDF
Dynamic PDF's are PDF's created using a WYSIWYG editor. There are no "form fields" within a dynamic PDF, so how do you show a checked checkbox?
This article shows you how to use a checkbox icon using SVG to show a checked checkbox. Note, that this example uses SVG, but you could use your own uploaded images and icons.
The SVG
SVG (scalable vector graphics) is a way of generating images from XML/code. When the code is includes in an HTML document (or in the source of the dynamic PDF), it renders as an image.
The code below, when included in the SOURCE view of the Dynamic PDF Editor will render as a checked checkbox:
<svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M23.414,0.586c-0.781-0.781-2.047-0.781-2.828,0L11,10.171L7.414,6.586c-0.78-0.781-2.048-0.781-2.828,0 c-0.781,0.781-0.781,2.047,0,2.828l5,5C9.976,14.805,10.488,15,11,15s1.024-0.195,1.414-0.586l11-11 C24.195,2.633,24.195,1.367,23.414,0.586z"/><path d="M21,10c-0.553,0-1,0.448-1,1v7c0,1.103-0.897,2-2,2H4c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2h11c0.553,0,1-0.448,1-1 s-0.447-1-1-1H4C1.8,0,0,1.8,0,4v14c0,2.2,1.8,4,4,4h14c2.2,0,4-1.8,4-4v-7C22,10.448,21.553,10,21,10z"/></g></svg>
To show an unchecked checknbox, the following SVG code can be used:
<svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M18,0H4C1.8,0,0,1.8,0,4v14c0,2.2,1.8,4,4,4h14c2.2,0,4-1.8,4-4V4C22,1.8,20.2,0,18,0z M20,18c0,1.103-0.897,2-2,2H4 c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2h14c1.103,0,2,0.897,2,2V18z"/></g></svg>
Showing a Checked Checkbox within the Dynamic PDF
To show a checked PDF within a dynamic PDF follow these steps:
- Open the the Dynamic PDF Editor
- Click the Source Code button in the top toolbar to switch to source code view
- Paste in the SVG code from above
- Click the Source button again to switch back to design view and you will now be able to see the rendered checkbox.
Showing the Checkbox Conditionally
There are a couple of ways to conditionally show the checked checkbox based on the form submission values. Both options are explained here:
Using Conditional Content
You can create a conditional content segment, copy the SVG from above into the conditional content editor, add a rule based on a form field value, and then insert the conditional content placeholder into the Dynamic PDF where you want it to be conditionally included. The conditional content will only be included (and the checkbox shown) if the rule is matched.
Using Inline Conditions
You can also write an inline condition directly in the Dynamic PDF Editor, wrapped around the SVG checkbox, to conditionally include it. If you had a checkbox on your form "Subscribe to News" and you only wanted to show the checked checkbox if this field equals "yes", you would wrap the SVG code in the inline conditon as shown below:
{IF [Subscribe to News] = 'Yes' THEN} <svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M23.414,0.586c-0.781-0.781-2.047-0.781-2.828,0L11,10.171L7.414,6.586c-0.78-0.781-2.048-0.781-2.828,0 c-0.781,0.781-0.781,2.047,0,2.828l5,5C9.976,14.805,10.488,15,11,15s1.024-0.195,1.414-0.586l11-11 C24.195,2.633,24.195,1.367,23.414,0.586z"/><path d="M21,10c-0.553,0-1,0.448-1,1v7c0,1.103-0.897,2-2,2H4c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2h11c0.553,0,1-0.448,1-1 s-0.447-1-1-1H4C1.8,0,0,1.8,0,4v14c0,2.2,1.8,4,4,4h14c2.2,0,4-1.8,4-4v-7C22,10.448,21.553,10,21,10z"/></g></svg> {ENDIF}
Summary
This article includes a creative way to show a checked or unchecked checkbox within your Dynamic PDF using an SVG icon. Remember you can use any of your own images aswell for endless possibilities.
0 Comments