The Basics
A form always consists of a form container, which determines where the data is stored and how the form should generally look and behave.
The various fields that are to be entered and saved in the form are then added to the form container. There are a wide variety of configuration options for these fields, ranging from simple text fields that can be validated directly as needed (e.g., an email address) to checkboxes, various types of dropdowns, and file uploads.
To complete the form and enable the submission of information, a submit button must always be added at the end.
Building a form: Step by step
We will now go through the individual components and their adjustment options step by step. If you're looking for a quickstart guide to signing up for a newsletter, check out this article where we'll discuss just the key points.
The Form Container and Its Settings
Form Fields and Their Uses
The Submit Button and Its Special Functions
Connecting the Form to an Email List
Success and Error Handling
Pre-filling Fields for Existing Customers
Saving Additional Information and Tracking Data
The Form Container and its settings
The Form Container is the invisible framework of your form. If you click on it, you will find all the basic settings on the left side. Here you specify which list the data will be sent to and how the form will react after submission.
Collect Token
Using the Collect Token, you determine in which list or collection the entered form data is stored. You have two options:
List: The data is assigned to a specific list. In the dropdown menu below, you can then select the appropriate list (e.g., "Customer Data"). This is the default option for newsletter signups or contact forms.
Text: Here, you can manually enter the token as free text (e.g., a URL), which is particularly relevant for technically advanced setups.
Appearance
In this area you control the visual behavior of your form:
Alternative Design: Use this for the alternative style defined for the form. The alternative styling can be defined in the styling menu.
Animated Labels: Check this box to use all labels as placeholders within a form element.
Use native input elements: This option is primarily of technical relevance. When enabled, the form uses the browser’s native HTML input elements instead of styled custom elements. This can be important on older devices or in certain embedded environments to ensure optimal compatibility. Normally, this option should remain disabled.
Layout
Here you can control the spacing within the form container:
Spacing: Using the visual box model, you can customize the interior spacing (padding) of the container on all four sides (top, right, bottom, left).
Gap between items: Using this dropdown, you specify how much space there is between each form field. The choices are e.g. B. "Medium Gap" or other predefined gradations.
Success Settings
Here you specify what happens after the form is successfully submitted. You have two options:
Show Success modal
Show Success modal
If you activate this switch, a modal window with a success message will appear after submitting.
Show Success Modal: If you enable this toggle, a modal window with a success message will appear after submission.
Open Modal (for editing): This toggle is intended solely for editing in the editor. If you enable it, the success modal will appear directly in the editor, allowing you to design and customize the modal’s content without actually having to submit the form. Don’t forget to deactivate it again afterward.
Modal Type: Here you choose how the modal appears:
Standard: The modal opens centered as a classic overlay in the foreground of the page.
Flyout: The modal slides in as a sidebar, e.g., from the right. This is ideal if you need more space for content without covering the entire page.
Modal Style: Determines the visual appearance of the modal:
Default: The modal is displayed in your theme’s default style.
Alternative: The modal uses an alternative style that visually stands out from the default. The specific differences depend on your theme.
Modal Size: Use this dropdown to set the size of the modal. The available options (e.g., Small, Medium, Large) determine how much space the modal takes up on the screen.
➞ Find more here: Success & Error Management
Redirect Link
Redirect Link
Alternatively or additionally, you can redirect the user to another page after submitting it. You either choose an internal subpage (page) or specify an external URL.
Terms and Conditions Modal
You can use this area to display a mandatory modal for general terms and conditions or privacy notices.
Show modal: If you activate this switch, the modal will be activated.
Open Modal (for editing): Just like the Success modal, this switch is used exclusively for editing in the editor. Activate it to make the modal visible directly in the editor and to shape the content. Remember to deactivate it after editing.
Modal Style: Determines the visual appearance of the modal:
Default: The modal appears in the default style of your theme.
Alternative: The modal is represented in a different styling. What specific differences these are depends on your styling settings.
Advanced
This section contains further settings:
Hidden Fields: Here you can define invisible fields that are automatically sent when the form is submitted without the user seeing them. You can find out more in the section Save additional information and tracking data.
Prefill form from URL parameter: If this option is active, form fields can be automatically prefilled with values from the URL. This is especially useful for personalized links. More on this in the section Pre-filling out the fields for existing customers.
Allow updates to collection: If you enable this option, existing entries in your list can be updated by resubmitting the form instead of creating a new entry.
Unsubscription form: If you activate this switch, the form will act as an unsubscribe form. Submitted contacts will then be removed from the linked list.
ID: Here you can assign a custom CSS ID to the Form Container, which can be used for your own stylings or JavaScript integrations.
The form fields and their areas of application
Within the Form Container, you can combine different field types to query exactly the information you need. Here is an overview of all available fields:
Input
The Input field is the simplest and most commonly used form field. It is suitable for short text inputs such as name, email address, or phone number. Input fields can be validated so that, for example, B. ensures that a valid email address has been entered.
Textarea
The text area is like an input field, but offers significantly more space for longer text inputs. It is suitable for example. B. for personal messages, comments or individual requests.
Checkbox
A checkbox is a simple checkbox used for yes/no decisions. Typical use cases include agreeing to privacy regulations or subscribing to a newsletter.
Radio Group
A Radio Group consists of several selection options, of which only one can be selected at a time. It is suitable if you want to offer your users a clear choice between several options, e.g. B. a preferred type of contact or a size selection.
Select
The Select field creates a drop-down menu from which exactly one option can be selected. It is space-saving and is well suited for longer selection lists, e.g. B. Countries, categories or product variants.
Submit Button
The submit button completes the form and submits all entered data. It must be inserted into each container form, otherwise the form cannot be submitted. Always place it at the end of your form, after all input fields.
➞ Find more here: Success & Error Management
Multi Select
The Multi Select field works like the Select field, but allows multiple options to be selected simultaneously. This is useful when users e.g. B. to indicate several areas of interest or product categories.
Form Datepicker
The datepicker allows users to select a date via a calendar. It is suitable wherever a specific date is requested, e.g. B. a birthday, a desired date or a delivery date.
Upload
The upload field allows users to upload a file directly via the form. This is useful for application forms (resume), support requests (screenshot), or other use cases where a file attachment is required.
Terms and Conditions Checkbox
The Terms and Conditions Checkbox is a specialized checkbox that can be directly linked to the Terms and Conditions modal. It ensures that users actively confirm the terms and conditions or privacy notices before the form can be submitted.
Connecting the form to an email list
To save the form data sensibly, you need to link the Container form to a list.
Set up Collect Token
You'll find the Collect Token at the very top of the Form Container settings. Select "List" there, then choose the appropriate list from the dropdown menu below where you want the form data to be saved. Each list has its own Collect Token, which ensures that the data is sent to the correct location.
List Settings
In the list itself, you can specify which fields exist and what they are called. The field names in the list must match the field names in the form so that the data is mapped correctly. Therefore, when creating form fields, make sure that the respective field names match the columns in your list exactly.
Success and error management
After submitting the form, you can control what the user sees, both if it is successful and if it fails.
Redirect
If you want to send users to another page after they submit the form, use the Redirect setting in the Success Settings of the Form Container. You can either select an internal subpage or specify an external URL. This option is ideal, for example, for a dedicated thank-you page.
Modal
As an alternative to redirection, you can display a success modal. To do this, enable "Show Success modal" in the Success Settings. There, you can also select the Modal Type (Standard or Flyout), the Modal Style, and the Modal Size.
➞ Open and edit the modal in the editor:
To design the modal’s content, enable the “Open Modal (for editing)” toggle in the Success Settings. The modal will then appear directly in the editor, and you can edit it like any other section—adjusting text, inserting images, or changing the layout. Remember to disable the toggle again after editing so the modal isn’t permanently displayed in live mode.
General error messages
By default, the form displays automatic error messages for incorrect entries or missing required fields. By default, these messages are already predefined in three languages. If you add another language to your form, it will be automatically included as well.
Pre-filling out the fields for existing customers
When you send forms to existing contacts, you can automatically pre-fill the fields to minimize the effort for users.
Prefill from URL Parameter
Enable the "Prefill form from URL parameter" option in the Advanced settings of the Form Container. You can then include parameters in your page's URL that correspond to the values of the form fields. When a contact clicks the link, the corresponding fields are automatically filled with the provided values. This is useful, for example, for personalized email campaigns where the name and email address are already known.
Update Form
If you want the form to be used to update existing contact information, make sure that "Allow updates to collection" is enabled. Combined with URL prefill, this allows you to send a personalized link where the contact can view their information, make changes, and resubmit it.
Unsubscribe Form
With the "Unsubscribe Form" option in the Advanced settings, you can convert the form into an unsubscribe form. Contacts who submit this form are automatically removed from the linked list. This is useful, for example, for an unsubscribe link in your newsletter.
Save Additional Information and Tracking Data
In addition to the visible form fields, you can also save additional invisible information with each form submission.
Create hidden fields
Hidden fields are invisible fields that are automatically submitted when the form is sent, without the user seeing or having to fill them out. You can create them in the Advanced settings of the Form Container under "Hidden Fields." Typical use cases include sending a campaign ID, a source reference (e.g., "Newsletter May 2026"), or an internal code.
Automatically Captured Standard Information
In addition to the hidden fields, the form automatically transmits a range of standard information in the background when submitted. This includes, for example, session data and tracking information such as the referring page or UTM parameters. This data is stored in the list and is available to you for analysis without requiring manual configuration. This allows you, for example, to track which campaign or channel a contact used to fill out the form.