> ## Documentation Index
> Fetch the complete documentation index at: https://help.topformbuilder.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start Guide 🚀

Get up and running with TopFormBuilder in under 5 minutes. This guide will walk you through creating your account, building your first form, and collecting submissions.

## 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

When you register, TopFormBuilder automatically creates:

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

After registration, you'll see your dashboard with:

### 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)

You already have a default workspace, but you can create additional workspaces to organize forms by project, client, or team.

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

You'll see a 3-panel layout:

**Left Panel - Questions List**

* 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

**Center Panel - Live Preview**

* 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

**Right Panel - Question Settings**

* 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

Click the **"Design"** button in the toolbar to open the design panel.

### 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

Click **"Settings"** tab to configure form behavior.

### 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

**Admin 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)

**Respondent Confirmation**

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

**Email Templates** (Pro)

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

### Security

**Password Protection** (Pro)

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

**reCAPTCHA** (Free & Pro)

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

**Submission Fingerprinting**

* 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

Configure in **Integrations** tab (see Step 8)

## 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

Click the **"Share"** button in the top toolbar to access sharing options:

**Direct Link**

```
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

**Embed Code**

```html theme={null}
<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

**QR Code**

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

**Social Share**

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

## Step 8: Set Up Integrations (Optional)

Connect your form to external services to automate workflows.

### Available Integrations

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

**Slack**

* Send notifications to Slack channels
* OAuth connection (click "Connect Slack")
* Select channel from dropdown
* Test webhook before saving

**Discord**

* Post submissions to Discord servers
* OAuth connection (click "Connect Discord")
* Select server and channel
* Customize message format

**Google Sheets** (Coming Soon)

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

**Airtable**

* Sync data to Airtable bases
* OAuth connection (click "Connect Airtable")
* Select base and table
* Map form fields to Airtable fields

**Trello**

* Create cards from submissions
* OAuth connection (click "Connect Trello")
* Select board and list
* Customize card title and description

**Microsoft Teams**

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

**Webhooks**

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

**Email**

* 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

Once respondents start submitting your form:

1. Go to your workspace
2. Click on your form
3. Navigate to **"Submissions"** tab

### Submissions Table

Shows all form responses with:

* **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

Track your form's performance:

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

Congratulations! You've created your first form. Here's what to explore next:

### Intermediate Features

**Conditional Logic**

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

**Form Calculations**

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

**Multi-Language Forms**

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

**Form Versioning**

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

### Advanced Features

**Accept Payments**

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

**Custom Domains** (Pro)

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

**API Access** (Pro)

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

**Team Collaboration**

* 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 [contact@topformbuilder.com](mailto:support@topformbuilder.com) for help
* **Community**: Join our community forum

### Upgrade to Pro

Unlock advanced features:

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

[View Pricing Plans →](https://topformbuilder.com/pricing)

## Common Questions

**Q: How do I edit a published form?** A: You can edit published forms anytime. Changes apply immediately. Consider using versioning to track changes.

**Q: Can I duplicate an existing form?** A: Yes! Click the three-dot menu (⋮) on any form and select "Duplicate". All questions and settings are copied.

**Q: How do I delete a form?** A: Click the three-dot menu (⋮) on the form and select "Delete". Note: This also deletes all submissions permanently.

**Q: Can respondents save and resume later?** A: Not currently. Forms must be completed in one session. Consider breaking long forms into shorter ones.

**Q: How do I prevent spam submissions?** A: Enable reCAPTCHA in Form Settings → Security. Also consider enabling submission fingerprinting (enabled by default).

**Q: Can I embed forms on my website?** A: Yes! Get the embed code from the Share modal. Forms are fully responsive and work in iframes.

**Q: How do I backup my data?** A: Export submissions regularly. Also enable automatic backups in Workspace Settings (Pro feature).

**Q: What happens when I reach submission limit?** A: Free plan: Forms stop accepting new submissions. Upgrade to Pro for unlimited submissions.

**Q: Can I use my own email server?** A: Yes! Configure SMTP settings in Organization → SMTP Settings. Use for all forms in that organization.

**Q: How do I get help?** A: Email [contact@topformbuilder.com](mailto:contact@topformbuilder.com) or check our documentation and community forum.

***