Form element

The Form element acts as a container that groups input fields together. It includes a built-in “Submit” button that triggers actions (like creating a row) only when all required fields inside the container are valid.

This page covers how to collect user data, validate inputs, and submit information to your database.

Overview

  • Container Logic: You drag Data Input, Checkbox, or Dropdown elements inside the Form element to build your form.
  • Submit Action: The form handles validation automatically. The “On Submit” event only fires if all required fields are filled correctly.
  • Workflow: Typically used with the Create Row action to save data to a table.
  • Styling: The look of the Submit button (Colors, Hover States, Padding) is managed via Theme Overrides.

Form element

Add a form

  1. Open the Elements panel (click the + icon).
  2. Select Form.
  3. Drag and drop the element onto your canvas.
  4. Result: You will see a container with a default “Submit” button.

Build your form (Adding inputs)

The Form element is empty by default (except for the button). To make it functional, you must add input fields.

  1. Select an input element from the library (e.g., Data Input or Checkbox).
  2. Drag it inside the Form container box.
  3. Repeat for as many fields as you need.

Tip: Use Column elements inside the Form container to create multi-column layouts (e.g., First Name and Last Name side-by-side).

Configuration

Click the Form element (the outer container) to open the General properties tab.

1. Submit Button Text

Define the label on the button.

  • Static: Type standard text like “Register”, “Send Message”, or “Save”.
  • Dynamic: Click the Connect Data icon to bind the text to a Data Source (e.g., “Join {{ Event_Name }}”).

2. Form Logic

  • Reset to default values after submission:
    • Enabled: After the user clicks submit and the action succeeds, all inputs inside the form are cleared or reset to their default values. Perfect for “Contact Us” forms.
    • Disabled: The data remains in the fields after submission. Perfect for “Edit Profile” forms where the user might want to make further changes.

Events (Workflows)

The primary power of the form is the On Submit event.

  1. Click the Events tab in the properties panel.
  2. Add the On Submit trigger.
  3. Add an action, typically Create Row.
  4. Map Fields: In the action settings, map your database columns to the specific Input Elements inside your form.
    • Example: Map the Email column to the Data Input - Email element.

Styling and Theme Overrides

To customize the Submit Button’s appearance, you must use a Theme Override.

  1. In the General tab, click the Style/Settings icon (slider icon) next to the Submit Button configuration.
  2. This opens the Button Styling menu where you can override:

Visual Properties

  • Typography: Font family, weight, and size.
  • Alignment: Position the button (Left, Center, Right, Full Width).
  • Color: Background and text color.
  • Border & Radius: Style the edges and rounding.
  • Padding: Control the size of the button.

Interactive States

You can define distinct styles for user interactions:

  • Default: Normal appearance.
  • Hover: When the mouse is over the button.
  • Active: When the button is being clicked.

Frequently asked questions (FAQ)

Can I have two forms on one page?

Yes. Each Form element is independent. Clicking “Submit” on Form A will not trigger Form B, even if they are on the same page.

How do I validate the data?

Validation is handled by the Input elements themselves. If you mark a Data Input as “Required” or set it to “Email” type, the Form will automatically block submission and show an error if the user makes a mistake.

Can I hide the Submit button?

No, the Submit button is integral to the Form element. If you need a custom button layout (e.g., a button outside the form), you might need to use individual input elements and a standalone Button element with specific workflows, though the Form element is recommended for easiest data handling.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.