Field Types Reference

Overview

TopFormBuilder offers 23+ field types organized into 5 categories:

Text Inputs (7 types)
Choice Fields (5 types)
Ratings & Scales (3 types)
Date & Time (2 types)
Advanced Fields (6 types)

Each field type has unique settings and use cases.

Text Input Fields

👤 Contact Info

What it is: All-in-one field for collecting contact details in a single block. Includes:

Name (First + Last)
Email address
Phone number

Best for:

Contact forms
Registration forms
Lead generation
Quick contact collection

Settings:

Required: Make entire block mandatory
Placeholder: Custom hint text for each subfield
Validation: Automatic email and phone format validation

Example:

What's your contact information?
┌─────────────────────────────┐
│ First Name                   │
├─────────────────────────────┤
│ Last Name                    │
├─────────────────────────────┤
│ Email                        │
├─────────────────────────────┤
│ Phone Number                 │
└─────────────────────────────┘

📝 Short Text

What it is: Single-line text input for brief answers. Best for:

Names, titles, job positions
City, address lines
Short answers (1-2 words)
Product names, company names

Settings:

Placeholder: Hint text inside input
Min Length: Minimum characters (e.g., 3)
Max Length: Maximum characters (e.g., 50)
Character Counter: Show remaining characters
Default Value: Pre-filled text
Required: Make mandatory

Validation:

Text only, numbers, or alphanumeric
Custom regex patterns (Pro)

Example:

What's your full name?
┌─────────────────────────────┐
│ John Smith                   │  [35/50 characters]
└─────────────────────────────┘

📄 Long Text

What it is: Multi-line textarea for longer responses. Best for:

Comments, feedback, suggestions
Descriptions, explanations
Stories, testimonials
Open-ended questions

Settings:

Placeholder: Hint text
Min Length: Minimum characters (e.g., 20)
Max Length: Maximum characters (e.g., 500)
Rows: Textarea height (default: 4 rows)
Character Counter: Show remaining characters
Required: Make mandatory

Example:

Tell us about your experience
┌─────────────────────────────┐
│ I had a great experience... │
│                              │
│                              │
│                              │
└─────────────────────────────┘
[150/500 characters]

✉️ Email

What it is: Email address input with validation. Best for:

Contact emails
Respondent confirmation emails
Newsletter signups
Account creation

Settings:

Validate Email Format: Check for valid email structure
Autocomplete: Browser suggests saved emails
Placeholder: Hint text (e.g., “your@email.com”)
Required: Make mandatory
Confirmation: Ask to re-enter email (Pro)

Validation:

Must contain @ symbol
Valid domain format
No spaces allowed

Example:

What's your email address?
┌─────────────────────────────┐
│ john@example.com             │
└─────────────────────────────┘
✓ Valid email format

📱 Phone

What it is: Phone number input with formatting. Best for:

Contact numbers
Mobile numbers
Emergency contacts
Call-back requests

Settings:

Country Code: Default country
Format: Auto-format as user types
Placeholder: Example format
Required: Make mandatory

Formats Supported:

US: (555) 123-4567
International: +1 555 123 4567
Custom formats

Example:

What's your phone number?
┌─────────────────────────────┐
│ (555) 123-4567               │
└─────────────────────────────┘

🔢 Number

What it is: Numeric input for numbers only. Best for:

Age, quantity, count
Prices, budgets
Scores, ratings (0-100)
Years, dates (numeric format)

Settings:

Min Value: Minimum number (e.g., 0)
Max Value: Maximum number (e.g., 100)
Step: Increment value (e.g., 1, 0.5, 10)
Placeholder: Hint text
Default Value: Pre-filled number
Prefix: Symbol before number (e.g., $)
Suffix: Symbol after number (e.g., kg, years)
Required: Make mandatory

Example:

What's your age?
┌──────┐
│  28  │ years old
└──────┘

How much is your budget?
┌──────────┐
$ 5,000
└──────────┘

🔗 Website URL

What it is: URL input with validation. Best for:

Website addresses
Portfolio links
Social media profiles
Reference links

Settings:

Validate URL Format: Check for valid URL structure
Require HTTPS: Enforce secure URLs
Placeholder: Example URL
Required: Make mandatory

Validation:

Must start with http:// or https://
Valid domain format

Example:

What's your website?
┌─────────────────────────────┐
│ https://example.com          │
└─────────────────────────────┘
✓ Valid URL

Choice Fields

⭕ Multiple Choice

What it is: Single selection from multiple options (radio buttons). Best for:

“Select one” questions
Yes/No/Maybe questions
Category selection
Preferences

Settings:

Options: Add unlimited choices
Allow “Other”: Enable custom text input
Randomize Options: Shuffle order for each respondent
Display Style: Radio buttons or buttons
Required: Make mandatory

Example:

How did you hear about us?
○ Google Search
○ Social Media
○ Friend Referral
○ Advertisement
○ Other: ___________

☑️ Checkboxes

What it is: Multiple selections allowed from options. Best for:

“Select all that apply”
Multi-select preferences
Feature selection
Interests, hobbies

Settings:

Options: Add unlimited choices
Allow “Other”: Enable custom text input
Min Selections: Minimum choices required
Max Selections: Maximum choices allowed
Randomize Options: Shuffle order
Required: Require at least one selection

Example:

Which features interest you? (Select all)
☑ Email Integration
☐ Payment Processing
☑ Analytics Dashboard
☐ Custom Branding
☐ API Access

What it is: Single selection from dropdown menu. Best for:

Long list of options (10+)
Countries, states, cities
Categories with many choices
Space-saving design

Settings:

Options: Add unlimited choices
Allow Search: Enable search within dropdown
Placeholder: Default text (e.g., “Select country”)
Required: Make mandatory

Example:

Select your country
┌─────────────────────────────┐
│ Select country...         ▼ │
└─────────────────────────────┘

[Expanded]
┌─────────────────────────────┐
│ 🔍 Search...                 │
├─────────────────────────────┤
│ United States                │
│ United Kingdom               │
│ Canada                       │
│ Australia                    │
│ Germany                      │
│ ...                          │
└─────────────────────────────┘

✓ Yes/No

What it is: Simple binary choice. Best for:

Confirmation questions
Opt-in/opt-out
Boolean logic triggers
Quick decisions

Settings:

Required: Make mandatory
Default: Pre-select Yes or No
Button Style: Buttons or toggle switch

Example:

Would you like to receive our newsletter?
┌─────┐  ┌─────┐
│ Yes │  │ No  │
└─────┘  └─────┘

👍 Like/Dislike

What it is: Thumbs up or thumbs down feedback. Best for:

Quick feedback
Content rating
Feature voting
Simple satisfaction

Settings:

Required: Make mandatory
Show Count: Display vote counts (Pro)
Icon Style: Thumbs or custom icons

Example:

Did you find this article helpful?
┌────────┐  ┌──────────┐
│ 👍 Yes │  │ 👎 No    │
└────────┘  └──────────┘

Ratings & Scales

⭐ Rating

What it is: Star rating or icon-based rating system. Best for:

Product reviews
Service satisfaction
Quality ratings
Experience feedback

Settings:

Number of Stars: 3-10 (default: 5)
Icon Style: Stars ⭐, Hearts ❤️, Thumbs 👍
Allow Half Ratings: Enable 0.5 increments (e.g., 3.5 stars)
Low Label: Label for lowest rating (e.g., “Poor”)
High Label: Label for highest rating (e.g., “Excellent”)
Required: Make mandatory

Example:

How would you rate our service?

Poor                         Excellent
★★★★☆ 4 out of 5 stars

📊 Opinion Scale

What it is: Numeric scale with labeled endpoints. Best for:

Likelihood questions (0-10)
Agreement scales (1-5)
NPS (Net Promoter Score)
Satisfaction levels

Settings:

Scale Range:
- 1-5 (5-point scale)
- 0-10 (11-point scale)
- 1-10 (10-point scale)
Start Value: Starting number (0 or 1)
Low Label: Left endpoint label (required)
High Label: Right endpoint label (required)
Required: Make mandatory

Example:

How likely are you to recommend us?

Not likely                    Very likely
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
0 1 2 3 4 5 6 7 8 9 10

🎚️ Range Slider

What it is: Draggable slider for selecting numeric value. Best for:

Budgets, price ranges
Age ranges
Percentage selection
Visual numeric input

Settings:

Min Value: Minimum number
Max Value: Maximum number
Step: Increment (e.g., 1, 5, 10, 100)
Default Value: Starting position
Show Value: Display current number
Prefix: Symbol before number (e.g., $)
Suffix: Symbol after number (e.g., %)
Required: Make mandatory

Example:

What's your budget range?

$1,000                   $10,000
├────────●───────────────────┤
        $4,500

Date & Time Fields

📅 Date

What it is: Calendar date picker. Best for:

Birth dates, appointment dates
Event dates, deadlines
Start/end dates
Availability selection

Settings:

Date Format:
- MM/DD/YYYY (US)
- DD/MM/YYYY (UK/Europe)
- YYYY-MM-DD (ISO)
Min Date: Earliest selectable date
Max Date: Latest selectable date
Disable Weekends: Skip Saturday/Sunday
Default Date: Pre-selected date (e.g., today)
Required: Make mandatory

Example:

When is your appointment?

┌──────────────────────┐
│  March 2024        ◀ ▶│
├──────────────────────┤
│ S  M  T  W  T  F  S  │
│    1  2  3  4  5  6  │
│ 7  8  9 10 11 12 13  │
│14 15 16 17 18 19 20  │
│21 22 23 24 25 26 27  │
│28 29 30 31           │
└──────────────────────┘

Selected: 03/15/2024

🕐 Time

What it is: Time picker for selecting hours and minutes. Best for:

Appointment times
Event start/end times
Availability slots
Scheduling

Settings:

Time Format:
- 12-hour (AM/PM)
- 24-hour
Time Interval:
- 15 minutes
- 30 minutes
- 1 hour
Min Time: Earliest selectable time
Max Time: Latest selectable time
Default Time: Pre-selected time
Required: Make mandatory

Example:

What time works best?

┌──────────────┐
│ ●  3:30 PM ▼ │
└──────────────┘

[Dropdown expanded]
12:00 PM
12:30 PM
 1:00 PM
 1:30 PM
 2:00 PM
 2:30 PM
● 3:00 PM
 3:30 PM
 4:00 PM
...

Advanced Fields

📎 File Upload

What it is: Upload files, images, documents, or videos. Best for:

Resume/CV uploads
Document submissions
Photo uploads
Portfolio attachments

Settings:

File Types:
- Documents (.pdf, .doc, .docx, .txt)
- Images (.jpg, .png, .gif, .svg)
- Videos (.mp4, .mov, .avi)
- All file types
Max File Size: MB limit (e.g., 10 MB)
Multiple Files: Allow multiple uploads
Max Files: Limit number of files
Required: Make mandatory

Example:

Upload your resume

┌──────────────────────────────┐
│  📄 Drag files here or click │
│     to browse                │
└──────────────────────────────┘

Allowed: PDF, DOC, DOCX (Max 10MB)

[After upload]
✓ resume.pdf (245 KB)
  [Remove]

Note: Requires Pro plan

✍️ Signature

What it is: Digital signature capture field. Best for:

Contracts, agreements
Consent forms
Legal documents
Acknowledgments

Settings:

Signature Type:
- Draw (canvas drawing)
- Type (text signature)
- Upload (image signature)
Required: Make mandatory
Clear Button: Allow re-signing

Example:

Please sign below

┌──────────────────────────────┐
│                              │
│     [Signature drawing]      │
│                              │
└──────────────────────────────┘
[Clear] [Done]

💳 Payment

What it is: Stripe payment field for collecting payments. Best for:

Order forms
Event registration with fees
Donations
Service bookings

Settings:

Amount Type:
- Fixed amount (e.g., $50)
- User-defined amount (donation)
- Calculated from form (dynamic pricing)
Currency: USD, EUR, GBP, etc.
Description: What payment is for
Stripe Account: Connected workspace account
Required: Always mandatory

Example:

Event Registration Fee: $50.00

┌──────────────────────────────┐
│ Card Number                  │
│ 4242 4242 4242 4242          │
├──────────────────────────────┤
│ MM/YY        CVC             │
│ 12/25        123             │
└──────────────────────────────┘

🔒 Secure payment powered by Stripe

Requirements:

Pro plan
Stripe Connect account linked to workspace
See Payment Setup Guide

What it is: Checkbox for terms, privacy policy, or legal agreements. Best for:

Terms & conditions acceptance
Privacy policy consent
Marketing opt-ins
GDPR compliance

Settings:

Label Text: Agreement text (supports HTML links)
Required: Make mandatory
Link to Document: URL to terms/policy

Example:

☑ I agree to the Terms & Conditions
   and Privacy Policy

☐ Yes, I'd like to receive marketing emails

📋 Statement

What it is: Display-only field for information or instructions. Best for:

Instructions, guidelines
Information blocks
Section dividers
Important notices

Settings:

Statement Text: Main content (supports Markdown)
Style:
- Plain (Gray box)
- Info (Blue box)
- Success (Green box)
- Warning (Amber box)
- Error (Red box)
Icon: Optional emoji or icon
Button Text: “Continue” or “Next”

Example:

┌──────────────────────────────┐
│ ℹ️ Important Information      │
│                              │
│ Please read carefully before │
│ proceeding to the next step. │
│                              │
│ This survey will take        │
│ approximately 5 minutes.     │
└──────────────────────────────┘
[Continue]

Note: Not an input field, no answer collected

Field Type Comparison

Field Type	Input Type	Validation	Pro Only	Use Case
Contact Info	Text	Email, Phone	No	All-in-one contact
Short Text	Text	Length, Pattern	No	Brief answers
Long Text	Textarea	Length	No	Long responses
Email	Text	Email format	No	Email addresses
Phone	Text	Phone format	No	Phone numbers
Number	Number	Min, Max, Step	No	Numeric values
URL	Text	URL format	No	Website links
Multiple Choice	Radio	Required	No	Single selection
Checkboxes	Checkbox	Min/Max selections	No	Multiple selections
Dropdown	Select	Required	No	Long option lists
Yes/No	Radio	Required	No	Binary choice
Like/Dislike	Button	Required	No	Quick feedback
Rating	Interactive	Required	No	Star ratings
Opinion Scale	Scale	Required	No	Numeric scale
Range Slider	Slider	Min/Max	No	Range selection
Date	Date Picker	Date range	No	Calendar dates
Time	Time Picker	Time range	No	Time selection
File Upload	File	Type, Size	Yes	File attachments
Signature	Canvas/Text	Required	No	Digital signature
Payment	Stripe	Amount	Yes	Collect payments
Legal/Consent	Checkbox	Required	No	Legal agreements
Statement	Display	N/A	No	Information only

Choosing the Right Field Type

For Text Collection

Name, Title: Short Text
Address: Long Text or separate Short Text fields
Email: Email field (with validation)
Phone: Phone field (with formatting)
Website: URL field
Comments: Long Text

For Choices

2-5 options: Multiple Choice (radio buttons)
6-15 options: Multiple Choice or Dropdown
15+ options: Dropdown (with search)
Multiple selections: Checkboxes
Simple yes/no: Yes/No field

For Ratings & Feedback

Quality/satisfaction (1-5): Rating with stars
Likelihood (0-10): Opinion Scale
Budget/price range: Range Slider
Quick feedback: Like/Dislike

For Dates & Times

Birth date, event date: Date field
Appointment time: Time field
Date range: Two Date fields (Start + End)

For Special Cases

Resume, documents: File Upload
Contracts: Signature field
Payments: Payment field
Terms acceptance: Legal/Consent
Instructions: Statement

Best Practices

General Tips

Use appropriate field types
- Don’t use Short Text for dates (use Date field)
- Don’t use Long Text for names (use Short Text)
Add helpful descriptions
- Clarify what format you expect
- Provide examples
- Set expectations (e.g., “This will take 2 minutes”)
Set sensible validations
- Don’t require too many fields
- Set realistic character limits
- Use appropriate min/max values
Test on mobile
- Some fields work better on mobile than others
- Date/Time pickers are mobile-optimized
- File uploads may have size limits on mobile

Field-Specific Tips

Text Fields:

Use placeholders as examples, not instructions
Keep max length reasonable
Show character counter for limited fields

Choice Fields:

Limit to 7-10 options for Multiple Choice
Use Dropdown for 15+ options
Randomize options to avoid order bias

Rating Fields:

5 stars is most common and familiar
Use labels to clarify what ratings mean
Opinion Scale better for likelihood questions

Date/Time:

Set min/max dates to prevent invalid entries
Disable weekends for business appointments
Use appropriate format for your region

Advanced Fields:

File uploads: Clearly state accepted formats and size limits
Payments: Show total prominently, explain what it’s for
Signatures: Provide clear instructions for digital signing

Need help? Contact contact@topformbuilder.com

Getting started

Customization

Overview

Text Input Fields

👤 Contact Info

📝 Short Text

📄 Long Text

✉️ Email

📱 Phone

🔢 Number

🔗 Website URL

Choice Fields

⭕ Multiple Choice

☑️ Checkboxes

✓ Yes/No

👍 Like/Dislike

Ratings & Scales

⭐ Rating

📊 Opinion Scale

🎚️ Range Slider

Date & Time Fields

📅 Date

🕐 Time

Advanced Fields

📎 File Upload

✍️ Signature

💳 Payment

📋 Statement

Field Type Comparison

Choosing the Right Field Type

For Text Collection

For Choices

For Ratings & Feedback

For Dates & Times

For Special Cases

Best Practices

General Tips

Field-Specific Tips

​Overview

​Text Input Fields

​👤 Contact Info

​📝 Short Text

​📄 Long Text

​✉️ Email

​📱 Phone

​🔢 Number

​🔗 Website URL

​Choice Fields

​⭕ Multiple Choice

​☑️ Checkboxes

​📋 Dropdown

​✓ Yes/No

​👍 Like/Dislike

​Ratings & Scales

​⭐ Rating

​📊 Opinion Scale

​🎚️ Range Slider

​Date & Time Fields

​📅 Date

​🕐 Time

​Advanced Fields

​📎 File Upload

​✍️ Signature

​💳 Payment

​✅ Legal/Consent

​📋 Statement

​Field Type Comparison

​Choosing the Right Field Type

​For Text Collection

​For Choices

​For Ratings & Feedback

​For Dates & Times

​For Special Cases

​Best Practices

​General Tips

​Field-Specific Tips

Overview

Text Input Fields

👤 Contact Info

📝 Short Text

📄 Long Text

✉️ Email

📱 Phone

🔢 Number

🔗 Website URL

Choice Fields

⭕ Multiple Choice

☑️ Checkboxes

📋 Dropdown

✓ Yes/No

👍 Like/Dislike

Ratings & Scales

⭐ Rating

📊 Opinion Scale

🎚️ Range Slider

Date & Time Fields

📅 Date

🕐 Time

Advanced Fields

📎 File Upload

✍️ Signature

💳 Payment

✅ Legal/Consent

📋 Statement

Field Type Comparison

Choosing the Right Field Type

For Text Collection

For Choices

For Ratings & Feedback

For Dates & Times

For Special Cases

Best Practices

General Tips

Field-Specific Tips