# 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.

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2Fof7YpzmHT54fblQcHOpJ%2Fimage.png?alt=media&#x26;token=8d31a13e-d230-4ca4-9c15-3e4e5010b69e" alt=""><figcaption><p>Form Builder</p></figcaption></figure>

## 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**.

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2F4drVB3ABZ19P66CURR6i%2Fimage.png?alt=media&#x26;token=ec7f1c49-dfac-4a54-9b9a-48f8c2a326f5" alt=""><figcaption><p>Cosy layout</p></figcaption></figure>

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2FrfU0ifa7Zth5klpwZQNa%2Fimage.png?alt=media&#x26;token=d8594a4c-3b8a-46af-abf7-4e582e254dee" alt=""><figcaption><p>Compact layout</p></figcaption></figure>

#### 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.

{% hint style="info" %}
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.
{% endhint %}

## Embedding form

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

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2FTZrRQh5tdxaS3Cu8UvJS%2Fimage.png?alt=media&#x26;token=53f443bc-7503-40be-ac9c-c9f0cb395d72" alt=""><figcaption><p>Embedding form</p></figcaption></figure>

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2FTf8BLotS6NnwSBaLHZZj%2Fimage.png?alt=media&#x26;token=d6a8f54f-acc6-431a-9cc5-b5396225531c" alt=""><figcaption></figcaption></figure>

## 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.&#x20;

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.

<figure><img src="https://1726200576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYeUDPAhozAcUAcc2Lr%2Fuploads%2FA2mlqyB7o4fcUw7QckZF%2Fimage.png?alt=media&#x26;token=40184b11-f2b6-4b07-8c7b-6823bc6e8b1b" alt=""><figcaption><p>Custom picker option</p></figcaption></figure>

Next, you'll need to set up the communication between the `parent` and the `child`.

#### Events&#x20;

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`**

```javascript
{
    namespace: "stencil",
    action: "choose_image_start",
    data: {
        layerId: "<layerId>",
        layer: "<layer>"
    }
}
```

**Event sent from `parent` to the `child`**

```javascript
{
    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.

{% hint style="info" %}
View the demo here, <https://github.com/usestencil/form-custom-image-picker-example>
{% endhint %}