Skip to main content

​
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., “[email protected]”)
  • 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?
┌─────────────────────────────┐
│ [email protected]             │
└─────────────────────────────┘
✓ 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

​
📋 Dropdown

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:

​
✅ Legal/Consent

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 TypeInput TypeValidationPro OnlyUse Case
Contact InfoTextEmail, PhoneNoAll-in-one contact
Short TextTextLength, PatternNoBrief answers
Long TextTextareaLengthNoLong responses
EmailTextEmail formatNoEmail addresses
PhoneTextPhone formatNoPhone numbers
NumberNumberMin, Max, StepNoNumeric values
URLTextURL formatNoWebsite links
Multiple ChoiceRadioRequiredNoSingle selection
CheckboxesCheckboxMin/Max selectionsNoMultiple selections
DropdownSelectRequiredNoLong option lists
Yes/NoRadioRequiredNoBinary choice
Like/DislikeButtonRequiredNoQuick feedback
RatingInteractiveRequiredNoStar ratings
Opinion ScaleScaleRequiredNoNumeric scale
Range SliderSliderMin/MaxNoRange selection
DateDate PickerDate rangeNoCalendar dates
TimeTime PickerTime rangeNoTime selection
File UploadFileType, SizeYesFile attachments
SignatureCanvas/TextRequiredNoDigital signature
PaymentStripeAmountYesCollect payments
Legal/ConsentCheckboxRequiredNoLegal agreements
StatementDisplayN/ANoInformation 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

  1. Use appropriate field types
    • Don’t use Short Text for dates (use Date field)
    • Don’t use Long Text for names (use Short Text)
  2. Add helpful descriptions
    • Clarify what format you expect
    • Provide examples
    • Set expectations (e.g., “This will take 2 minutes”)
  3. Set sensible validations
    • Don’t require too many fields
    • Set realistic character limits
    • Use appropriate min/max values
  4. 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

​
Next Steps

Need help? Contact [email protected]