Forms Integration
Stencil's From allows you to generate image without requiring technical know-how. It provides an intuitive form builder and allows you to embed the form in any website or in your application.

Customization
You start by adding a new block and selecting the field of your layer to allow for users to update.
The generated input field depends on the type of the field selected i.e. field requiring color will generate color picker, field requiring numbers like x
and y
position will generate a number input and image will generate a file upload or a link input. All other fields are defaulted to a text input.
You can also customize the label for each field to make it more friendly.
Layout
We provide two layouts when viewing the form - Cosy and Compact.


Cosy layout vs Compact layout
The only difference of the two layouts is that cosy layout shows live preview of the template while you're editing them.
Embedding form
You can copy the embed code by clicking on the Embed
button.


Advanced section
Customize image upload picker
In some scenario, it makes sense to only allow images to be picked from a custom gallery, S3 buckets, or anything that you can think of.
Stencil's Form allows the image upload to be customized according to your need by leveraging on iframe
communication.
Consider your website embedding the form as the parent
and the embedded form (iframe
) as the child
. Stencil provides a hook to communicate between these two.
Setting up the form for custom image upload
When you configure the image layer, set src
field uploader type to custom picker.

Next, you'll need to set up the communication between the parent
and the child
.
Events
When the image picker button is clicked, the form (child
) sends an event
to the parent
. The parent
is responsible in listening and reacting to this event
.
Event sent from child
to the parent
{
namespace: "stencil",
action: "choose_image_start",
data: {
layerId: "<layerId>",
layer: "<layer>"
}
}
Event sent from parent
to the child
{
namespace: "stencil",
action: "choose_image_end",
data: {
url: "<link to the image>",
layerId: "<layerId>",
layer: "<layer>"
}
}
Demo
We have a working example that you can checkout in our GitHub repo.
Last updated
Was this helpful?