Creating Forms

​

Before You Start

• ✅ Created your account
• ✅ At least one workspace (created automatically on signup)
• ✅ Logged in to app.topformbuilder.com

​

Creating a New Form

​

Step 1: Navigate to Workspace

1. Click Workspaces in the main navigation
2. Select the workspace where you want to create the form
3. Or use the workspace dropdown in the top navigation

​

Step 2: Start New Form

• On the workspace page
• In the forms list (if you have existing forms)
• In the top navigation bar

​

Step 3: Choose Starting Point

​

Option A: Start from Scratch

• Unique, custom requirements
• Full control over every question
• Learning how the form builder works

• Creates an empty form with no questions
• You add all questions manually
• Complete design freedom

1. Select “Start from Scratch” or “Blank Form”
2. Enter form name and description
3. Click “Create”
4. Start adding questions

​

Option B: Use a Template

• Quick start with pre-built questions
• Common use cases (contact, survey, registration)
• Learning by example

• Contact Forms: Simple contact, quote request, support ticket
• Surveys: Customer feedback, NPS, satisfaction survey
• Registration: Event signup, membership, job application
• Order Forms: Product order, service booking, donation
• Feedback: Product review, service rating, testimonial

1. Browse template gallery
2. Click on a template to preview
3. Click “Use Template” button
4. Template questions are copied to your form
5. Customize as needed

​

Option C: Duplicate Existing Form

• Creating similar forms
• Saving time on repetitive setups
• A/B testing variations

1. Go to your forms list
2. Click three-dot menu (⋮) on any form
3. Select “Duplicate”
4. New form created with “-copy” suffix
5. Rename and edit as needed

​

Step 4: Enter Form Details

• Name your form clearly
• Examples: “Customer Feedback Survey”, “Event Registration 2024”
• Max 255 characters
• Shows in dashboard and form header

• Internal description for your reference
• Not shown to form respondents
• Helps organize forms in dashboard

• Select from dropdown
• Questions auto-populate after creation

​

Understanding the Form Builder

​

Left Panel: Questions List

• Question Number: Auto-numbered (1, 2, 3…)
• Question Title: Text of the question
• Question Type: Icon and label (e.g., ⭕ Multiple Choice)
• Logic Badge: Purple badge showing number of logic rules
• Drag Handle: Appears on hover for reordering

• Click: Select question to edit
• Drag: Reorder questions
• Three-dot menu (⋮): Duplicate or delete

​

Center Panel: Live Preview

• Device Switcher: Toggle between Desktop, Tablet, Mobile views
• Live Updates: Changes reflect instantly
• Respondent View: Exactly what users will see
• Navigation: Use arrow keys or click to navigate questions

​

Right Panel: Properties & Settings

• Question Settings: Title, description, validation
• Field-Specific Options: Varies by question type
• Advanced Options: Logic, calculations, conditionals

​

Adding Questions

​

Method 1: Add Question Button

1. Click “Add Question” button in toolbar
2. Or click “Add Question” at bottom of left panel
3. A field type picker modal appears
4. Select field type from categories

​

Method 2: Keyboard Shortcut

• Press Cmd/Ctrl + Enter to open field picker (coming soon)

​

Field Type Categories

• Contact Info, Short Text, Long Text, Email, Phone, Number, URL

• Multiple Choice, Checkboxes, Dropdown, Yes/No, Like/Dislike

• Rating, Opinion Scale, Range Slider

• Date, Time

• File Upload, Signature, Payment, Legal/Consent, Statement

​

After Selecting Field Type

1. New question appears in left panel
2. Automatically selected for editing
3. Right panel shows settings
4. Preview updates in center panel

​

Editing Questions

​

Basic Settings (All Question Types)

• Main question prompt
• Shows to respondents
• Supports plain text (HTML coming soon)
• Auto-saves as you type

• Helper text below question
• Provides context or instructions
• Smaller gray text
• Examples: “Be as specific as possible”, “Select all that apply”

• Custom button label
• Default: “Next” or “Submit” (on last question)
• Examples: “Continue”, “Next Question”, “Finish”

• Make answer mandatory
• Red asterisk (*) appears
• Form blocks submission if empty
• Toggle on/off with switch

​

Question-Specific Settings

• Placeholder text
• Min/Max length
• Character counter
• Default value

• Add/remove options
• Allow “Other” option
• Randomize order
• Multiple selections

• Number of stars (3-10)
• Icon style (stars, hearts, thumbs)
• Allow half ratings
• Low/High labels

• Date format (MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD)
• Min/Max date
• Disable weekends
• Default to today

​

Auto-Save

• Debounced: Waits 800ms after you stop typing
• Indicator: Shows in top toolbar
  • “Saving…” - Currently saving
  • “Saved” - All changes saved
  • “Error” - Save failed (retry available)
• Manual Save: Click “Save” if indicator shows error

​

Reordering Questions

1. Hover over question in left panel
2. Drag handle icon appears (⋮⋮)
3. Click and hold drag handle
4. Drag up or down
5. Drop at desired position
6. Questions auto-renumber

• Select question
• Press Cmd/Ctrl + ↑ to move up
• Press Cmd/Ctrl + ↓ to move down

​

Duplicating Questions

1. Click three-dot menu (⋮) on question
2. Select “Duplicate”
3. Copy appears immediately below original
4. Edit duplicate as needed
5. All settings copied:
   • Title, description
   • Validation rules
   • Options (for choice fields)
   • Advanced settings

• Similar questions with slight variations
• Save time on repetitive setups
• A/B testing different question wording

​

Deleting Questions

1. Click three-dot menu (⋮) on question
2. Select “Delete”
3. Confirmation modal appears
4. Click “Delete” to confirm
5. Question removed permanently

• Cannot undo deletion
• Submissions containing answers to deleted questions lose that data
• Logic rules referencing deleted questions are automatically removed

​

Welcome Screen

1. Go to Settings tab
2. Scroll to Welcome Screen section
3. Toggle “Enable Welcome Screen”

• Icon: Choose emoji (e.g., 👋, 🎉, 📝)
• Title: Welcome message (e.g., “Welcome!”, “Let’s get started”)
• Description: Form intro or instructions
• Button Text: Start button label (e.g., “Start”, “Begin Survey”)

• Shows before first question
• Full-screen display
• Click button to proceed to Q1

​

Thank You Page

1. Click “Thank You Page” in left panel (under “Endings”)
2. Or it auto-shows after last question in preview

• Icon: Choose emoji (e.g., 🎉, ✅, 💝)
• Title: Thank you message (e.g., “Thank you!”, “Submission received”)
• Description: Confirmation text or next steps
• Redirect URL (optional): Auto-redirect after X seconds

• Icon: 🎉
• Title: “Thank you!”
• Description: “Your response has been recorded.”

​

Form Settings

​

General

• Draft: Form not publicly accessible (testing mode)
• Published: Live and accepting submissions
• Closed: No longer accepting responses (shows closing message)

• Auto-generated from form title
• Used in public URL: app.topformbuilder.com/f/your-slug
• Must be unique across all forms
• Can be customized

• Notes for your reference
• Not shown to respondents
• Helps organize forms in workspace

​

Display

• Shows completion percentage
• Appears at top of form
• Updates as user answers questions
• Toggle on/off

• One Question Per Page: Default, Typeform-style
• All Questions On One Page: Traditional form layout

​

Submission

• Let users submit form multiple times
• Default: Disabled (one submission per device)
• Enable for: Recurring surveys, voting, feedback

• Automatically enabled
• Tracks device/browser fingerprint
• Prevents duplicate submissions
• Based on: IP address, User Agent, Browser fingerprint

​

Preview Your Form

​

Desktop Preview

1. Click “Preview” button in toolbar
2. Opens form in new tab
3. Navigate through questions
4. Test validations and logic
5. Submit test response

​

Device Preview (In-Builder)

1. Use device switcher in center panel
2. Toggle between:
   • Desktop: Full-width view (1200px+)
   • Tablet: Medium view (768px-1199px)
   • Mobile: Small view (< 768px)

​

Share Preview Link

1. Click “Share” button
2. Copy preview link
3. Share with team members
4. Link requires login (for drafts)

​

Publishing Your Form

1. Ensure form status is “Published” (Settings → General)
2. Save all changes
3. Your form is now live at: app.topformbuilder.com/f/your-form-slug

• Form becomes publicly accessible
• Anyone with link can submit
• Submissions start counting toward quota
• Analytics start tracking

• Yes! Edit anytime
• Changes apply immediately to live form
• Consider creating version before major changes
• See Form Versioning

​

Sharing Your Form

​

Direct Link

https://app.topformbuilder.com/f/your-form-slug

• Copy: Click “Copy Link” in Share modal
• Share: Via email, social media, messaging apps
• Customize: Use custom domain (Pro)

​

Embed Code

<iframe
  src="https://app.topformbuilder.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;">
</iframe>

• Copy: Click “Copy Embed Code” in Share modal
• Paste: On your website or blog
• Customize: Adjust width and height as needed
• Responsive: Automatically adapts to screen size

​

QR Code

1. Click “Download QR Code” in Share modal
2. High-resolution PNG image downloads
3. Print on:
   • Flyers
   • Posters
   • Business cards
   • Table tents
4. Users scan with phone camera to open form

​

Social Share

• Facebook: Share on timeline
• Twitter: Tweet with link
• LinkedIn: Share on profile
• Email: Open default email client

​

Form Management

​

View All Forms

• All forms across all workspaces
• Filter by workspace, status, date
• Sort by name, created date, submissions
• Search by title or slug

​

Form Actions

• Edit: Open form builder
• Preview: Test form
• Duplicate: Create copy
• Archive: Hide from list (Pro)
• Delete: Permanently remove

​

Bulk Actions

• Bulk Delete: Remove multiple forms
• Bulk Archive: Archive selected forms
• Bulk Move: Transfer to different workspace

​

Tips & Best Practices

​

Keep It Short

• Aim for 5-10 questions
• Longer forms have higher abandonment
• Break into multiple forms if needed

​

Use Clear Language

• Write questions simply
• Avoid jargon and technical terms
• Use active voice

​

Group Related Questions

• Order questions logically
• Start with easy questions
• End with sensitive/demographic questions

​

Test Before Launching

• Preview on all devices
• Test all validations
• Submit test response
• Check submission data

​

Use Conditional Logic

• Show relevant questions only
• Create personalized experiences
• Reduce form length
• See Conditional Logic Guide

​

Add Helpful Descriptions

• Provide context where needed
• Clarify ambiguous questions
• Set expectations (e.g., “This will take 2 minutes”)

​

Use Required Fields Sparingly

• Only mark essential questions required
• Too many required fields = higher abandonment
• Consider making questions optional

​

Troubleshooting

​

”Slug already exists”

• Change form title
• Or manually edit slug in settings
• Try: your-slug-v2, your-slug-2024

​

”Cannot save changes”

• Check internet connection
• Click retry icon in auto-save indicator
• Refresh page (changes may be lost)
• Contact support if persistent

​

”Form not showing in public URL”

• Go to Settings → General
• Change status to “Published”
• Save changes

​

”Questions not reordering”

• Clear browser cache
• Try different browser
• Use keyboard shortcuts (coming soon)
• Report bug to support

​

”Preview shows old version”

• Hard refresh preview tab (Cmd/Ctrl + Shift + R)
• Close and reopen preview
• Clear browser cache

​

Next Steps

• Add Logic Rules - Create smart, dynamic forms
• Customize Design - Brand your forms
• Configure Settings - Set up notifications, security, etc.
• View Submissions - Collect and analyze responses