Template properties are a set of unique properties of all components used in the template created in template editor. You can see the list of all template properties in the Preview > Form Editor popup.
Template properties are the combination of component id and component property, for example:
my-image.src
- image component with idmy-image
and propertysrc
my-image.width
- image component with idmy-image
and propertywidth
my-text.text
- text component with idmy-text
and propertytext
What is a component?
A component is an object which can be added to a template in template editor. Every component can be modified using controls in the Inspector or via other integration like REST API, Zapier or Make.com.
What are component properties?
The property is a value which defines how the component looks or how it behaves on a template, for example:
my-rect.opacity=0.2
- makes a component nearly visible,my-rect.opacity=0.0
- makes a component invisible,my-rect.rotation=45
- rotates a component by 45 degrees (clock-wise),my-text.text=Hello World
- changes text on Text component,my-image.src=https://example.com/my-image.png
- changes image source on Image component,my-image.effectName=blur
- sets blur on Image component.
Common component properties
These properties can be used with every component.
y
- y position in pixelsx
- x position in pixelsrotation
- rotation in degrees 0 - 360opacity
- opacity, eg:1
,0
,0.5
Render Component
The Render component is a unique type of component
which can be used to override template settings when you connect 3rd party integrations.
Use _render
value as Component ID to adjust general render options,
for example: _render.fileName=MyFile.png
to change the name of the rendered file.
Properties:
fileName
- custom file name for generated image, allowed characters:a-z
,A-Z
,0-9
,-
,_
,.
.
Rectangle Component
Properties:
color
- rectangle fill color (eg:rgba(255,255,255, 1)
or#efefef
)borderColor
- rectangle stroke color (eg:rgba(255,255,255, 1)
or#efefef
)radius
- rectangle radius of all corners
Circle Component
Properties:
color
- circle fill color (eg:rgba(255,255,255, 1)
or#efefef
)borderColor
- circle stroke color (eg:rgba(255,255,255, 1)
or#efefef
)borderWidth
- circle stroke width (eg:5
)
Text Component
Properties:
text
- text valuecolor
- text color (eg:rgba(255,255,255, 1)
or#efefef
)borderColor
- text border color (eg:rgba(255,255,255, 1)
or#efefef
)borderWidth
- text border width (eg:5
)textBackgroundColor
- text background color
QR Code Component
Properties:
value
- QR code text, URL or anything else to encodecolor
- QR code color, eg:rgba(255,255,255, 1)
or#efefef
Image Component
Properties:
src
- image URL or base64,objectFit
- cover or contain,effectName
- kodachrome,borderColor
- border color, eg:rgba(255,255,255, 1)
or#efefef
,borderWidth
- border width in pixels (eg:5
)
Tip: Re-use uploaded images
You can reuse already uploaded images by using media:
prefix in src
property. For example: media:my-image.png
.
File names are always taken from original file names from your computer. List of all your uploaded images can be found in My uploads.
Currently, there is no option to change image names.
Rating Component
Properties:
value
- active rating value
SVG Component
No additional properties