Embeddable LetsForm Builder

Embed a full featured LetsForm builder in any site with a Web Component and programmatically capture the composed LetsForm JSON schema in JavaScript.

From the dashboard, click on “Create builder”

then select which UI framework to use (i.e. React+RSuite5, React+AntD, etc), the form preview size and hit the button “Save”. Then click on “Embed this LetsForm Builder” to get the JavaScript code for installing it on any website.

Follow these installing instructions

<script type="module" src="https://cdn.jsdelivr.net/npm/lets-form-builder@latest/builder.bundled.js"></script>

<letsform-builder
  height="600"
  id="my_builder"
  builderId="<my-builder-id>"
  emptyForm="true"
/>

<script type="module">
  document.getElementById('my_builder')
    .addEventListener('lf-form-changed', event => {
      console.log('LetsForm JSON Schema: ', event.detail);
    });
</script>

Preload an existing LetsForm JSON schema in the builder

To edit an existing LetsForm JSON Schema in the builder, just use the .loadForm() method:

<script type="module">
  document.getElementById('my_builder')
    .loadForm({
      "version": 2,
      "fields": [
        // some fields
      ]
    });
</script>

The LetsForm Builder is loaded into an iframe, you don’t have to wait for the iframe to be loaded completely, the Web Component will do it for you.

Listen to “Save form” event

To programmatically capture the LetsForm JSON Schema from the Builder, you can either listen to the change event lf-form-changed (triggered on any changes) or lf-form-saved (only triggered when the user clicks on the “Save form” icon in the Builder).

<script type="module">
  document.getElementById('my_builder')
    .addEventListener('lf-form-saved', event => {
      console.log('LetsForm JSON Schema: ', event.detail);
    });
</script>

The “Save form” button can be disabled in the “Settings” section.

Restrict LetsForm Builder to some domains

LetsForm Builders can be restricted to run on specific domains to avoid abuse. Click on “Settings” and enter a list of allowed domains, follow these guidelines  on how to specify domains (i.e. http://localhost:3000, https://my.domain.it, etc).

Custom components in LetsForm Builder

LetsForm Builders components palette can be customized with forms or pre-configured fields fed by one or more projects.

This allows to make available to your users, preconfigured fields based on your application domain.

LetsForm Builder Web Component

Properties of <letsform-builder> Web Component

Available events

Available methods