Form Builder
You create forms visually by adding form elements as layer templates. The form acts as a container with a unique ID; inputs, textareas, selects, and other fields go inside it.
Adding a Form
- Drag a Form element onto your canvas
- Add form fields inside the form container (input, textarea, select, checkbox, radio, label)
- Configure each field’s properties in the right panel
The form element has settings.id that identifies it for submissions and integrations. Ensure each form on a page has a unique ID.
Form Elements
Form elements are layer templates you nest inside the form container:
| Element | Description |
|---|---|
| form | Container with settings.id; wraps all form fields |
| input | Single-line input; type is configurable |
| textarea | Multi-line text input |
| select | Dropdown selection |
| checkbox | Boolean toggle or multi-option group (with collection binding) |
| radio | Single choice from options |
| label | Label text for a field |
When you add an input, textarea, select, checkbox, or radio element, Ycode wraps it in a group container with a label. The label uses the semantic <label> HTML tag with a for attribute that links it to the input, ensuring proper accessibility and allowing users to click the label to focus the field.
Ycode resets native browser appearance on form elements (appearance: none), giving you full control over styling through the design controls. Checkboxes and radio buttons use custom visual indicators, and select elements display a styled dropdown chevron. This ensures form elements look consistent across browsers while remaining accessible.
Input Types
The input element supports these types via its settings:
| Type | Description |
|---|---|
| text | Single-line text |
| number | Numeric input |
| password | Masked input for passwords |
| Email address | |
| tel | Phone number |
| url | URL |
| date | Date picker |
| datetime-local | Date and time picker |
| range | Slider with min/max values |
Select Placeholder
Select elements support a placeholder option — a disabled, non-selectable hint that appears before the user makes a choice. New select elements include a default placeholder (“Select an option”) out of the box.
To configure the placeholder, select the select element, open the Options panel in the right sidebar, and edit the Placeholder text field. Clear the text to remove the placeholder entirely.
The placeholder renders as a disabled, hidden <option> element. It appears as the initial selection but cannot be re-selected once the user picks a different option.
Collection-Bound Options
Select, radio, and checkbox elements can pull their options from a CMS collection instead of manually defined lists. This is useful for dynamic forms where choices come from your content — categories, tags, locations, products, and similar.
To connect a collection:
- Select the checkbox, radio, or select wrapper in the Layers panel
- In the Options panel on the right, choose a collection as the source
- Ycode automatically binds the label text to the collection’s display field (title or name)
Each collection item becomes an option. You can configure sorting (by field and order) and set default selections. For checkboxes, multiple defaults can be pre-checked.
On the published page, the single template element expands into one option per collection item. Submitted values use the collection item IDs.
Form Settings
Configure form behavior in the form element settings:
| Setting | Description |
|---|---|
| success_action | message or redirect — what happens after a successful submission |
| success_message | Text shown when success_action is message |
| error_message | Text shown when submission fails |
| redirect_url | URL to redirect to when success_action is redirect |
| email_notification | Object with enabled, to, subject for sending emails on submit |
Success Action
- message — Display
success_messageto the user; form stays on the page - redirect — Navigate to
redirect_urlafter submission
Email Notifications
When email_notification.enabled is true, Ycode sends an email on each submission:
- to — Recipient email address
- subject — Email subject line
The email typically includes the submitted field values.
Tip
Use the redirect option to send users to a thank-you page or a confirmation URL. Use the message option for quick feedback without leaving the page.
Validation
Each field can have validation rules:
- Required — Field must have a value before submit
- Minimum/maximum length — For text and textarea
- Pattern matching — Regex for custom formats
- Custom error messages — Shown when validation fails
Configure validation in the field’s settings. Invalid submissions are blocked and the error message is shown to the user.