Quick Start Guide 🚀

​

Step 1: Create Your Account

​

Option A: Register with Email & Password

1. Visit Register page
2. Fill in the registration form:
   • Name: Your full name
   • Email: A valid email address
   • Password: Minimum 8 characters
   • Confirm Password: Re-enter your password
3. Click “Register” button
4. Check your email for verification link (if email verification is enabled)
5. You’ll be automatically redirected to your dashboard

​

Option B: Register with Google OAuth

1. Visit Register page
2. Click “Continue with Google” button
3. Select your Google account
4. Grant permissions to TopFormBuilder
5. You’ll be automatically logged in and redirected to dashboard

Note: Google OAuth automatically verifies your email and creates your account. No password is required for OAuth accounts.

​

What Gets Created Automatically

1. Personal Organization - Named Your Name's Organization
   • You are the owner with full access
   • Organization-wide access model enabled
   • Unique slug (e.g., john-doe-organization)
2. Default Workspace - Named My Workspace
   • Linked to your personal organization
   • You are added as workspace admin
   • Cannot be deleted (it’s your default workspace)
3. Default Email Templates - Pre-configured templates for notifications

​

Step 2: Understanding Your Dashboard

​

Navigation Menu

• Dashboard - Overview and statistics
• Forms - All forms across all workspaces
• Workspaces - Manage your workspaces
• Organizations - Manage organizations and team members
• Templates - Browse form templates
• Profile - Account settings and preferences
• Notifications - System notifications

​

Dashboard Widgets

• Forms Overview - Total forms, submissions, views
• Recent Forms - Your 5 most recently updated forms
• Analytics - Performance metrics and trends
• Quick Actions - Create form, create workspace buttons
• Onboarding Checklist - Track your progress

​

Workspace Selector

• Dropdown in the top navigation
• Switch between workspaces quickly
• Shows workspace name and form count

​

Step 3: Create Your First Workspace (Optional)

1. Click “Workspaces” in the navigation menu
2. Click “Create Workspace” button
3. Enter workspace details:
   • Name: e.g., “Marketing Forms”, “Customer Surveys”
   • Organization: Select your organization (default: your personal organization)
4. Click “Create”
5. Your new workspace is ready with:
   • Unique slug for URLs
   • Empty forms list
   • Default email templates
   • You as workspace owner

​

Step 4: Build Your First Form

​

Starting a New Form

1. Select a workspace from the workspace dropdown
2. Click “New Form” or “Create Form” button
3. Choose your starting point: Option A: Start from Scratch
   • Empty form with no questions
   • Full customization freedom
   • Best for unique requirements
   Option B: Use a Template
   • Pre-built forms with questions
   • Categories: Contact, Survey, Registration, Order, Feedback
   • Click “Use Template” to start with pre-filled questions
4. Enter form details in the modal:
   • Form Title: e.g., “Customer Feedback Survey”
   • Description (optional): Brief description of the form purpose
5. Click “Create Form”

​

Form Builder Interface

• Shows all questions (blocks) in order
• Drag and drop to reorder
• Click to select and edit
• Shows question number, title, and type
• Displays logic rule count badges

• Real-time preview of your form
• Device switcher (Desktop, Tablet, Mobile)
• Shows exactly how respondents will see the form
• Updates instantly as you make changes

• Edit question properties
• Configure validation rules
• Set advanced options
• Different settings per question type

​

Adding Questions (Form Blocks)

1. Click “Add Question” button (top toolbar or bottom of left panel)
2. Select from 23+ field types:

​

Text Input Fields

• Contact Info (👤) - Name, email, phone in one block
• Short Text (📝) - Single-line text input (e.g., name, title)
• Long Text (📄) - Multi-line textarea (e.g., comments, description)
• Email (✉️) - Email address with validation
• Phone (📱) - Phone number input
• Number (🔢) - Numeric input with min/max
• Website URL (🔗) - URL with validation

​

Choice Fields

• Multiple Choice (⭕) - Single selection from options
• Checkboxes (☑️) - Multiple selections allowed
• Dropdown (📋) - Select from dropdown menu
• Yes/No (✓) - Simple binary choice
• Like/Dislike (👍) - Thumbs up/down feedback

​

Rating & Scale

• Rating (⭐) - Star rating (3-10 stars, hearts, thumbs)
• Opinion Scale (📊) - Numeric scale (1-5, 0-10, etc.)
• Range Slider (🎚️) - Slider for numeric range

​

Date & Time

• Date (📅) - Date picker with format options
• Time (🕐) - Time picker (12h/24h format)

​

Advanced Fields

• File Upload (📎) - Upload documents, images, videos
• Signature (✍️) - Digital signature capture
• Payment (💳) - Stripe payment field
• Legal/Consent (✅) - Checkbox for terms acceptance
• Statement (📋) - Information display (non-input)

3. Click on a field type to add it to your form

​

Editing Questions

1. Select a question from the left panel
2. Configure in the right panel: Common Settings (All Questions)
   • Question Text: The main question prompt
   • Description: Optional helper text below question
   • Button Text: Custom button label (default: “Next”)
   • Required: Toggle to make answer mandatory
   Text Fields Settings
   • Placeholder: Hint text inside input
   • Min/Max Length: Character limits
   • Default Value: Pre-filled value
   Choice Fields Settings
   • Options: Add, edit, remove choices
   • Allow Other: Enable “Other” option with text input
   • Randomize: Shuffle option order
   Rating Settings
   • Number of Stars: 3-10 (default: 5)
   • Icon Style: Stars, Hearts, or Thumbs
   • Allow Half Ratings: Enable 0.5 increments
   • Low/High Labels: Optional labels
   Opinion Scale Settings
   • Scale Range: 1-5, 0-10, 1-10
   • Start Value: Starting number
   • Low/High Labels: Required labels
   Date Settings
   • Date Format: MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD
   • Min/Max Date: Date range restrictions
   • Disable Weekends: Skip Saturday/Sunday
   Time Settings
   • Time Format: 12-hour or 24-hour
   • Time Interval: 15min, 30min, 1hour
   • Min/Max Time: Time range restrictions
   File Upload Settings
   • File Types: Documents, Images, Videos, All
   • Max File Size: MB limit
   • Multiple Files: Allow multiple uploads
3. Changes auto-save as you type (see auto-save indicator in toolbar)

​

Reordering Questions

• Hover over a question in the left panel
• Drag the handle icon (appears on hover)
• Drop at the desired position
• Questions automatically renumber

​

Duplicating Questions

1. Click the three-dot menu (⋮) on a question
2. Select “Duplicate”
3. A copy appears below the original
4. Edit the duplicate as needed

​

Deleting Questions

1. Click the three-dot menu (⋮) on a question
2. Select “Delete”
3. Confirm deletion
4. Question is permanently removed

​

Step 5: Customize Form Design

​

Theme Options

• Pre-built Themes: Select from 10+ color schemes
• Custom Colors:
  • Primary Color: Buttons and accents
  • Background Color: Form background
  • Text Color: Question and answer text
  • Button Color: Submit button color
• Font Style: Choose from available font families
• Logo: Upload your company logo (displayed at top)

​

Background

• Background Image: Upload custom image
• Background Color: Solid color background
• Background Gradient: Two-color gradient
• Remove Background: Transparent background

​

Button Customization

• Button Text: Default button label
• Button Style: Filled, Outline, or Ghost
• Button Size: Small, Medium, Large
• Button Position: Left, Center, Right

​

Welcome Screen (Optional)

• Enable Welcome Screen: Show before first question
• Icon: Choose emoji
• Title: Welcome message
• Description: Form introduction
• Button Text: Custom start button text

​

Thank You Page

• Icon: Choose emoji (default: 🎉)
• Title: Thank you message
• Description: Confirmation text
• Redirect URL (optional): Redirect after submission

​

Step 6: Configure Form Settings

​

General Settings

• Form Status:
  • Draft: Not publicly accessible (testing)
  • Published: Live and accepting submissions
  • Closed: No longer accepting responses
• Form Slug: URL-friendly identifier (auto-generated)
• Description: Internal description for your reference

​

Closing Options

• Submission Limit: Close after X submissions
• Close Date: Automatically close on specific date/time
• Closing Message: Custom message when form is closed

​

Submission Settings

• Allow Multiple Submissions: Let users submit multiple times
• Show Progress Bar: Display completion percentage
• One Question Per Page: Show one question at a time (default)
• All Questions On One Page: Display all questions together

​

Notifications

• Enable: Receive email on each submission
• Email Address: Where to send notifications
• Email Subject: Custom subject line (supports variables)
• Email Body: Additional message in notification
• CC Emails: Copy additional recipients (comma-separated)

• Enable: Send confirmation email to respondent
• Email Field: Which form field contains respondent’s email
• Subject: Confirmation email subject
• Body: Confirmation message

• Create reusable branded email templates
• Use in multiple forms
• Variables: {{form_name}}, {{submission_id}}, {{respondent_email}}

​

Security

• Enable: Require password to access form
• Password: Set custom password
• Users must enter password before seeing form

• Enable: Add Google reCAPTCHA v2 verification
• Prevents spam and bot submissions
• Requires reCAPTCHA site key configuration

• Automatically enabled
• Prevents duplicate submissions from same device/browser
• Based on IP, user agent, and browser fingerprint

​

White Labeling (Pro)

• Remove Branding: Hide “Powered by TopFormBuilder” badge
• Available on Pro and Enterprise plans only
• Takes effect immediately on public form

​

Integrations

​

Step 7: Publish Your Form

1. Ensure form status is “Published” (Settings → General → Form Status)
2. Click “Save Changes” if you made any settings changes
3. Your form is now live!

​

Sharing Your Form

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

• Copy and share via email, social media, or website
• Works on all devices and browsers
• No login required for respondents

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

• Paste on your website or blog
• Fully responsive
• Adjust height as needed

• Click “Download QR Code”
• Print on flyers, posters, business cards
• Scan with phone camera to open form
• High-resolution PNG format

• Share directly to Facebook, Twitter, LinkedIn
• Pre-filled share text
• Opens in new window

​

Step 8: Set Up Integrations (Optional)

​

Available Integrations

1. Navigate to Form → Settings → Integrations
2. Click “Add Integration”
3. Select integration type:

• Send notifications to Slack channels
• OAuth connection (click “Connect Slack”)
• Select channel from dropdown
• Test webhook before saving

• Post submissions to Discord servers
• OAuth connection (click “Connect Discord”)
• Select server and channel
• Customize message format

• Auto-save submissions to spreadsheet
• OAuth connection required
• Map form fields to columns

• Sync data to Airtable bases
• OAuth connection (click “Connect Airtable”)
• Select base and table
• Map form fields to Airtable fields

• Create cards from submissions
• OAuth connection (click “Connect Trello”)
• Select board and list
• Customize card title and description

• Send updates to Teams channels
• OAuth connection required
• Select team and channel

• Send POST request to any URL
• Custom headers and authentication
• Retry failed webhooks automatically
• View webhook logs

• Send custom emails on submission
• Use SMTP settings or default mailer
• Supports HTML templates
• CC and BCC recipients

4. Configure integration settings
5. Click “Test Integration” to verify
6. Save integration

​

Integration Logs

• View all integration attempts
• See success/failure status
• Retry failed webhooks
• Debug integration issues

​

Step 9: View Submissions

1. Go to your workspace
2. Click on your form
3. Navigate to “Submissions” tab

​

Submissions Table

• Submission ID: Unique identifier
• Submitted At: Date and time of submission
• Status: Complete or Incomplete
• Actions: View, Delete, Export

​

Viewing Individual Submissions

1. Click on a submission to view details
2. See all answers in a clean format
3. View submission metadata:
   • IP Address
   • User Agent (browser/device)
   • Referrer URL
   • Submission Time
   • Form Version
4. Add Comments: Internal notes for team collaboration
5. Delete: Remove submission permanently

​

Filtering & Searching

• Search: Search across all answer fields
• Date Range: Filter by submission date
• Status: Filter by complete/incomplete

​

Exporting Submissions

1. Click “Export” button
2. Select format:
   • Excel (.xlsx): Full featured spreadsheet
   • CSV: Comma-separated values
   • PDF: Printable document
3. Choose data range:
   • All submissions
   • Filtered results only
   • Date range
4. Download starts automatically

​

Bulk Actions

• Select multiple submissions: Checkboxes in table
• Bulk Delete: Remove multiple submissions at once
• Bulk Export: Export selected submissions only

​

Step 10: View Analytics

1. Navigate to Form → Analytics tab
2. View metrics:

​

Overview Metrics

• Total Views: How many people viewed the form
• Total Submissions: Completed form submissions
• Completion Rate: % of viewers who submitted
• Average Time: Average time to complete form
• Drop-off Rate: % who abandoned the form

​

Time Series Charts

• Views vs Submissions: Line chart over time
• Completion Rate Trend: Track improvements
• Submission Heatmap: Best days/times for submissions

​

Question Analytics

• Drop-off by Question: Where users abandon
• Answer Distribution: Popular choices for multiple choice
• Average Scores: For rating and opinion scale questions

​

Device & Browser

• Device Types: Desktop, Tablet, Mobile breakdown
• Browsers: Chrome, Safari, Firefox, Edge usage
• Operating Systems: Windows, Mac, iOS, Android

​

Geographic Data

• Countries: Top countries by submissions
• Cities: Top cities (if available)
• Map View: Visual geographic distribution

​

Next Steps

​

Intermediate Features

• Show/hide questions based on previous answers
• Create personalized form experiences
• Navigate to Form → Logic tab
• Add logic rules with conditions and actions

• Auto-calculate totals, discounts, taxes
• Use math expressions with form fields
• Great for order forms and quotes

• Translate your form into multiple languages
• Respondents choose their preferred language
• Navigate to Form → Translations tab

• Save snapshots of your form
• Restore previous versions
• Track changes over time
• Navigate to Form → Versions tab

​

Advanced Features

• Connect Stripe to your workspace
• Add payment field to form
• Set fixed or variable amounts
• Collect one-time or recurring payments

• Use your own domain: forms.yourcompany.com
• SSL certificates included
• Navigate to Workspace → Custom Domains

• Programmatic form creation
• Submit forms via API
• Retrieve submissions via API
• Webhook notifications

• Invite team members to organization
• Assign roles (Owner, Admin, Member)
• Collaborate on forms
• Navigate to Organizations → Members

​

Resources

• Documentation: Full guides for every feature
• Video Tutorials: Step-by-step video walkthroughs
• Templates: Browse 50+ pre-built form templates
• Support: Email [email protected] for help
• Community: Join our community forum

​

Upgrade to Pro

• Unlimited submissions
• Unlimited forms
• All integrations
• Remove branding
• Custom domains
• Priority support
• Form versioning
• File uploads
• Conditional logic
• Payment processing

​

Common Questions