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
- Open the form in the Intum panel
- In the Form Script section, you’ll find the ready-to-copy code
- Click the code field — the text will be automatically selected
- 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
- In the form field settings, set the Field Code (e.g.,
email,name,company) - In the embed code, add
data-field-{code}attributes with values:
<script src="https://widgets.intum.net/widgets/intum-forms-widget.js"></script>
<div data-form="TOKEN"
data-field-email="[email protected]"
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
<script>
// Set values before the widget loads
const formDiv = document.querySelector('[data-form="TOKEN"]');
formDiv.dataset.fieldEmail = '[email protected]';
formDiv.dataset.fieldName = 'John';
</script>
How It Works
After the page loads:
- The script searches the page for all form containers
- Fetches the form content from the server (based on the token)
- Displays the form with fields, validation, and a submit button
- After rendering — fills fields with default values from
data-field-*attributes - 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 — general module description and field types
- Submissions — data collected by forms