Building Forms
This guide walks you through creating a form in the TrolleyShield form builder.
Creating a New Form
- Navigate to Forms in the left sidebar of your dashboard
- Click New Form
- You'll see the form builder with a live preview on the right
Adding Fields
Click Add Field to add a new row. Each field has these properties:
| Property | Description |
|---|---|
| Label | The field name displayed to the user (e.g., "Full Name") |
| Type | text, email, phone, textarea, dropdown, or checkbox |
| Placeholder | Hint text shown inside the input (e.g., "Enter your name") |
| Required | Whether the field must be filled before submitting |
| Options | For dropdowns only — comma-separated list of choices |
Field Types
- Text — single-line text input
- Email — email input with browser-level validation
- Phone — phone number input (uses
telinput type) - Textarea — multi-line text area for longer messages
- Dropdown — select menu with predefined options
- Checkbox — single checkbox with a label (e.g., "I agree to the terms")
Reordering and Removing
- Drag fields to reorder them using the grip handle on the left
- Click the trash icon to remove a field
Form Settings
General
| Setting | Description |
|---|---|
| Form Name | Internal name shown in your dashboard and as the form title |
| Slug | The URL path for the hosted form page (auto-generated from name, editable) |
Styling
All styling settings apply to the hosted page and the embed snippet. If you use "No Style" mode, only CSS class names are output and you control the styling entirely.
| Setting | Default | Description |
|---|---|---|
| Font Family | System sans-serif | The font used for all form text |
| Font Size | 14px | Base font size for labels and inputs |
| Label Color | #333333 | Color for field labels |
| Placeholder Color | #9ca3af | Color for placeholder text |
| Field Background | #ffffff | Background color of input fields |
| Button Color | #06b6d4 | Submit button background color |
| Button Text Color | #ffffff | Submit button text color |
| Button Text | "Submit" | Text shown on the submit button |
| No Style Mode | Off | Strip all inline styles, output only CSS classes |
Success Action
After a successful (non-blocked) submission:
| Option | Description |
|---|---|
| Show Message | Display a confirmation message (customizable text) |
| Redirect | Send the user to a URL (e.g., a thank-you page) |
Publishing
Once your form is saved, it becomes available in two ways:
- Hosted page — a public URL at
app.trolleyshield.com/f/your-slug - Embed snippet — a
<script>tag you can paste on any website
Both are shown on the form's detail page. Click the form card on the Forms page to access these.
Editing and Deleting
- Click a form card to view its details, copy embed code, or open the hosted page
- Click Edit to return to the form builder
- Click Delete to permanently remove the form and its submissions
Viewing Submissions
Once your form receives submissions, they appear in the Submissions page in the left sidebar. Expand any row to see full details including AI classification, behavioral score, source attribution, and form data.