Embedding

Script embed widget

Drop a form onto any website with two lines of HTML — no framework required.

The embed widget is a self-contained JavaScript file (~180 lines, no dependencies) that renders your form on any page.

Basic usage

Add two lines of HTML anywhere on your page:

<div data-vlozi-form="YOUR_FORM_ID"></div>
<script src="https://api.vlozi.app/forms/f/embed.js" async></script>

The widget:

  1. Detects the [data-vlozi-form] container
  2. Fetches your form schema from GET /f/:form_id/schema
  3. Renders all fields with your theme colours
  4. Submits as JSON (or multipart/form-data when files are present)
  5. Shows the success message or redirects on completion
  6. Shows field-level errors from the server on failure

Alternate mounting: script data-form attribute

If you prefer to keep the script tag self-contained:

<script
  src="https://api.vlozi.app/forms/f/embed.js"
  data-form="YOUR_FORM_ID"
  async
></script>

This mounts the form to the element immediately before the script tag.

File uploads

The widget detects file type fields and submits as multipart/form-data automatically. No extra configuration needed.

{
  "name": "resume",
  "type": "file",
  "label": "Résumé (PDF)",
  "required": true
}

CAPTCHA (Turnstile)

If your form has CAPTCHA enabled, the widget loads the Cloudflare Turnstile script and renders the challenge widget automatically.

IMPORTANT

CAPTCHA requires both settings to be configured:

  • captchaRequired: true — server-side enforcement
  • turnstileSiteKey — the widget-side public key from your Cloudflare dashboard

If you enable CAPTCHA without a site key, the form widget will render but submissions will always fail with a 400 error.

Success and error messages

On success, the widget displays your form's success message (configured in Settings). If your form has a redirect URL, the visitor is redirected there instead.

On validation failure, field-level errors from the server are shown inline below each field.

Multiple forms on one page

You can embed multiple forms on a single page by repeating the [data-vlozi-form] container with different IDs:

<div data-vlozi-form="form_contact123"></div>
<div data-vlozi-form="form_newsletter456"></div>
<script src="https://api.vlozi.app/forms/f/embed.js" async></script>

One script tag is enough — the widget mounts to all [data-vlozi-form] containers on the page.

Copy the snippet

In the dashboard → Forms → your form → EmbedScript embed.

Forms · EmbeddingEdit on GitHub