[Intum Help](https://intum.com/help.md) / [Forms](https://intum.com/help/forms.md)

# [Form Widget for Your Website](https://intum.com/help/forms/form-widget-for-your-website.md)

## What Is the Widget For

The form widget lets you embed a form on any web page — without writing custom code. You paste a ready-made script on your website, and the form automatically loads and collects data from visitors.

## How to Add a Form to Your Website

1. Open the form in the Intum panel
2. In the **Form Script** section, you'll find the ready-to-copy code
3. Click the code field — the text will be automatically selected
4. Copy the code and paste it into your website's HTML, where you want the form to appear

### What the Code Looks Like

The code consists of two elements:

- **JavaScript script** — loads the form engine (only needed once per page, even if you have multiple forms)
- **Div element** — a container where the form will appear. It contains a unique token identifying your form

You can embed multiple forms on a single page — each with its own div element.

## Default Field Values

You can pass default values to form fields using `data-field-*` attributes on the div element. This way the form will automatically populate selected fields on load.

### How It Works

1. In the form field settings, set the **Field Code** (e.g., `email`, `name`, `company`)
2. In the embed code, add `data-field-{code}` attributes with values:

```html
<script src="https://widgets.intum.net/widgets/intum-forms-widget.js"></script>
<div data-form="TOKEN"
     data-field-email="john@example.com"
     data-field-name="John"
     data-field-company="Company Ltd.">
</div>
```

After the form loads, fields with codes `email`, `name`, and `company` will be automatically filled with the provided values.

### Use Cases

- **Personalization** — pre-fill customer data you already know (e.g., from CRM or a link in an email)
- **Marketing campaigns** — add hidden parameters identifying the source (e.g., `data-field-campaign="newsletter_03"`)
- **Integrations** — dynamically set values from JavaScript on the page

### Setting Values Dynamically with JavaScript

```html
<script>
  // Set values before the widget loads
  const formDiv = document.querySelector('[data-form="TOKEN"]');
  formDiv.dataset.fieldEmail = 'john@example.com';
  formDiv.dataset.fieldName = 'John';
</script>
```

## How It Works

After the page loads:

1. The script searches the page for all form containers
2. Fetches the form content from the server (based on the token)
3. Displays the form with fields, validation, and a submit button
4. After rendering — fills fields with default values from `data-field-*` attributes
5. After completion and submission — data is sent to the system, and the user sees a confirmation or is redirected

## Customizing the Appearance

The form has default styles, but you can customize them:

- **CSS class** — assign a custom class and style the form in your page's CSS
- **Inline styles** — enter CSS styles directly in the form settings
- **Button class** — change the appearance of the submit button
- **Button text** — change the button label (default: "Submit")
- **Custom JavaScript** — add additional JS code to the form

## Response After Submission

After filling out the form, the user can:

- See a **message** — HTML content displayed in place of the form (supports Liquid templates with form data)
- Be **redirected** — to a specified URL (e.g., a thank-you page)

## Security

The widget has built-in anti-spam protections against bots and unwanted submissions.

## Active Period

If the form has an active period set (from–to dates), the widget will automatically display an inactivity message outside that period.

## Multiple Forms on One Page

You can embed several forms on a single page. Include the JavaScript script only once, and add a separate div element with the appropriate token for each form.

## Related

- [Forms](formularze) — general module description and field types
- [Submissions](zgloszenia) — data collected by forms