ef CLI or an AI agent? See Add a form to a page with code.
Create a Collection Form
Step 1: Set Up the Collection
- Go to “Pages” → “Advanced” → “Collections”
- Click “Create Collection”
- Enter a name, define what happens on a new entry, and decide if you want to allow public export (e.g., for suppressions)
Step 2: Configure Fields
- Click Add field at the end of the list and pick a type (Text, Email, Select, and so on). Drag the handle on the left of a row to reorder fields.
- Turn on Required on the field’s row if the form must not be sent without it.
- Click the gear on the row for the rest: placeholder, default value, Searchable, Private, and, when public export is on, Encrypt and Exclude from public export.
Add Form to Your Page
Step 3: Embed the Form
- Go to the page builder and click the ”+” button at the top left to add a new component
- Search for your collection by name, then drag and drop the form
Step 4: Configure Form Submission
- Select the “Form” element in the “Layers” tab at the bottom left
- In the properties tab, configure the success message or choose what to do after submission (show a modal, redirect, or display a message)
- If opting to show a modal, create it first by adding a modal component
Form Field Types
- Text Field: Single-line text input
- Email Field: Email validation included
- Phone Field: Phone number formatting
- Textarea: Multi-line text input
- Dropdown: Selection from predefined options
- Checkbox: Boolean yes/no options
- Date Field: Date picker functionality
Advanced Features
- Conditional Logic: Show/hide fields based on user selections
- Multi-step Forms: Break long forms into multiple steps
- Auto-fill: Pre-populate fields with known user data
- Validation Rules: Custom validation for specific field requirements
Optimization Tips
- Keep forms as short as possible
- Only ask for essential information initially
- Use clear, descriptive field labels
- Provide value before asking for information
- Test form submission thoroughly