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.

Form Builder

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

Compact layout

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.

While live preview of the template changes with your changes, it doesn't consume your image generation credit. Your credit is only consumed when you generate the images or PDFs.

Embedding form

You can copy the embed code by clicking on the Embed button.

Embedding form

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.

Custom picker option

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.

View the demo here, https://github.com/usestencil/form-custom-image-picker-example