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

# Introduction to Salesive Form Builder

> Create dynamic configuration forms for your Salesive themes and templates

# Salesive Form Builder

The Salesive Form Builder is a powerful tool that enables theme and template developers to create dynamic configuration forms for collecting customization data from sellers.

## What is the Form Builder?

The Form Builder allows you to create structured forms that collect configuration variables from users setting up their Salesive themes. These variables are then stored in `salesive.config.json` and can be injected into your theme pages as dynamic content.

## Use Cases

<CardGroup cols={2}>
  <Card title="Theme Customization" icon="palette">
    Collect brand colors, logos, and visual preferences from theme users
  </Card>

  <Card title="Content Configuration" icon="file-lines">
    Gather page titles, descriptions, hero text, and other content elements
  </Card>

  <Card title="Contact Information" icon="address-card">
    Capture business details like phone numbers, emails, and addresses
  </Card>

  <Card title="Feature Toggles" icon="toggle-on">
    Enable or disable theme features based on user preferences
  </Card>
</CardGroup>

## How It Works

<Steps>
  <Step title="Create Form Schema">
    Build a JSON schema using `salesive.form.json` that defines your
    configuration form structure with pages, sections, and fields.
  </Step>

  <Step title="User Fills Form">
    Sellers configuring your theme use the generated form to input their
    specific values (colors, text, images, etc.).
  </Step>

  <Step title="Data Stored">
    Form submissions are saved to `salesive.config.json` with all
    user-provided values.
  </Step>

  <Step title="Variables Injected">
    Access the collected variables in your theme templates using the
    Salesive variable system.
  </Step>
</Steps>

## Example Scenario

Imagine you're building a theme and want to let users customize their hero section:

```json theme={null}
{
    "pages": [
        {
            "page": "home",
            "title": "Home Page",
            "sections": [
                {
                    "id": "hero",
                    "title": "Hero Section",
                    "fields": [
                        {
                            "id": "heroTitle",
                            "type": "text",
                            "label": "Hero Title",
                            "default": "Welcome to Our Store",
                            "required": true
                        },
                        {
                            "id": "heroImage",
                            "type": "media",
                            "mediaType": "image",
                            "label": "Hero Background",
                            "required": false
                        }
                    ]
                }
            ]
        }
    ]
}
```

When a seller configures this theme, they can enter their own hero title and upload their custom background image. These values are then available in your theme via the variable system.

## Key Features

* **Visual Form Builder**: Drag-and-drop interface for building forms
* **Live Preview**: See your form in real-time as you build it
* **Multiple Field Types**: Text, media, color pickers, selects, and more
* **Validation Support**: Mark fields as required and set constraints
* **Organized Structure**: Use pages and sections to group related fields
* **JSON Export**: Get clean, validated JSON ready for production

## Accessing the Form Builder

The Salesive Form Builder is hosted and ready to use:

<Card title="Open Form Builder" icon="external-link" href="https://form.salesive.com">
  Build your configuration form at [https://form.salesive.com](https://form.salesive.com)
</Card>

<Note>
  The Form Builder automatically saves your schema to browser local storage,
  so your work is preserved between sessions.
</Note>

## Getting Started

Ready to build your first form? Check out the [Getting Started](/form-builder/getting-started) guide to create your configuration form in minutes.

<Card title="Next Steps" icon="arrow-right" href="/form-builder/getting-started">
  Learn how to create your first Salesive configuration form
</Card>