Text Field
Single-line text input for names, titles, and short answers
Text Field
The text field is the most versatile field type. Use it for names, titles, single-line answers, and any short text input.
When to use
- Names (first, last, full)
- Titles and subjects
- Short answers
- Any single-line text input
For longer text, use Textarea instead.
Settings
Label
The field label shown to users.
Example: "Your Name", "Company", "Subject"
Placeholder
Example text shown inside the field.
Example: "John Smith", "Acme Inc."
Description
Help text below the field.
Required
Make this field mandatory.
Default value
Pre-filled value. Supports dynamic placeholders.
Validation
Min length
Minimum number of characters required.
| Setting | Example Use |
|---|---|
| 2 | Names (prevents single letters) |
| 3 | Usernames |
Max length
Maximum characters allowed.
| Setting | Example Use |
|---|---|
| 50 | Names |
| 100 | Titles |
| 255 | General short text |
Pattern
Regular expression for custom validation.
| Pattern | Description |
|---|---|
^[A-Za-z ]+$ | Letters and spaces only |
^[A-Za-z0-9]+$ | Alphanumeric only |
^[A-Z]{2,3}-[0-9]{4}$ | Code format (e.g., AB-1234) |
When using patterns, provide a custom error message explaining the expected format.
Input types
The text field supports different input types via the Input Type setting:
| Type | Behavior |
|---|---|
| text | Standard text input (default) |
| tel | Phone keyboard on mobile |
| url | URL keyboard on mobile |
| search | Search styling and clear button |
| password | Masked input |
For email addresses, use the dedicated Email field which includes built-in validation.
Examples
Full name
Label: Full Name
Placeholder: John Smith
Required: Yes
Min Length: 2
Max Length: 100Company name (optional)
Label: Company
Placeholder: Acme Inc. (optional)
Required: NoOrder number
Label: Order Number
Placeholder: ORD-12345
Pattern: ^ORD-[0-9]{5}$
Error Message: Please enter a valid order number (e.g., ORD-12345)Styling
The text field renders as:
<div class="fodo-field fodo-field-text">
<label class="fodo-label" for="field_abc123">
Your Name
<span class="fodo-required">*</span>
</label>
<input
type="text"
id="field_abc123"
name="fields[abc123]"
class="fodo-input"
placeholder="John Smith"
required
>
<p class="fodo-description">Help text here</p>
</div>Target with CSS:
.fodo-field-text .fodo-input {
/* your styles */
}