Forms

Forms

Scripts

Scripts allow you to write custom logic that runs on specific events in the form lifecycle. For example, you can use scripts to validate input, perform asynchronous checks, or manipulate form data before submission.

Scripts are evaluated as ECMAScript modules using a secure VM environment. You can use import statements and top-level await. Each script must export one or more event handler functions (e.g. onSubmit).

:::note To perform a HTTP request, you cannot use fetch, since it does not work in the VM environment and simply overloading it is not possible. Instead, you can use the load function which essentially works like fetch but its output is different:

type LoadResponse = {
    status: number;
    body: string;
    headers: Record<string, string>;
}

The body is always serialized as a string, so you may need to parse it if it’s JSON or another format. The headers are provided as a key-value object. :::

---

Available hooks

onSubmit(ctx: OnSubmitContext): Promise<OnSubmitReturnValue>

Called when the form is submitted.

Example:

export async function onSubmit({ data }: {
  data
}) {
  const fieldErrors = {};

  const name = data.additional_data?.name;
  const email = data.contact_data?.email;
  if (!name || typeof name !== 'string' || name.trim() === '') {
    fieldErrors.name = 'Name is required.';
  }

  if (!email || typeof email !== 'string' || !email.includes('@')) {
    fieldErrors.email = 'A valid email address is required.';
  }

  if (Object.keys(fieldErrors).length > 0) {
    return {
      error: fieldErrors
    };
  }

  return true;
}

Types:

type SubmitContext = {
  formEntity: Form | undefined; // The form entity
  data: Record<string, any>; // The form input data that was submitted
  brezel: Client<...>; // KAB Tools API client with service_account permissions
};

/*
    * The return value can be:
    * - `true`, `undefined` or `null`: Form will continue submission.
    * - `false`: Form submission will be aborted with error code 400.
    * - an object with `status` and `body` properties to immediately return a custom response. The `type` set in the form entity will be ignored.
 */
type SubmitResponse = boolean | { status?: number; body?: any } | undefined | null;

…(More hooks such as onStepChange may be added in the future.)

Available modules

No modules are supported yet.