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

# Getting Started

> Create your first Salesive configuration form

# Getting Started with Form Builder

This guide will walk you through creating your first configuration form for a Salesive theme.

## Prerequisites

Before you begin, make sure you have:

* A Salesive theme or template project
* Basic understanding of JSON structure

## Creating Your First Form

### Step 1: Access the Form Builder

Navigate to the Salesive Form Builder at **[https://form.salesive.com](https://form.salesive.com)**. You'll see two main panels:

* **Left Panel**: Live preview and visual builder
* **Right Panel**: JSON schema editor

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

<Tip>
  Use the **Build** mode to visually construct your form, or edit the JSON
  directly in **Schema** mode. Your changes are automatically saved to local
  storage.
</Tip>

### Step 2: Define Your First Page

Every form starts with at least one page. Pages help organize your configuration form logically.

```json theme={null}
{
    "pages": [
        {
            "page": "general",
            "title": "General Settings",
            "description": "Configure your store's basic information",
            "sections": []
        }
    ]
}
```

<ParamField path="page" type="string" required>
  Unique identifier for the page (use lowercase, hyphens for spaces)
</ParamField>

<ParamField path="title" type="string" required>
  Display name shown to users
</ParamField>

<ParamField path="description" type="string">
  Brief explanation of what this page configures
</ParamField>

### Step 3: Add Sections

Sections group related fields within a page.

```json theme={null}
{
    "pages": [
        {
            "page": "general",
            "title": "General Settings",
            "sections": [
                {
                    "id": "branding",
                    "title": "Brand Identity",
                    "description": "Your store's visual identity",
                    "fields": []
                }
            ]
        }
    ]
}
```

<ParamField path="id" type="string" required>
  Unique identifier for the section
</ParamField>

<ParamField path="title" type="string" required>
  Section heading displayed to users
</ParamField>

<ParamField path="description" type="string">
  Helper text explaining this section's purpose
</ParamField>

### Step 4: Add Fields

Fields are the actual form inputs where users enter data.

```json theme={null}
{
    "pages": [
        {
            "page": "general",
            "title": "General Settings",
            "sections": [
                {
                    "id": "branding",
                    "title": "Brand Identity",
                    "fields": [
                        {
                            "id": "storeName",
                            "type": "text",
                            "inputType": "text",
                            "label": "Store Name",
                            "placeholder": "Enter your store name",
                            "default": "My Store",
                            "required": true
                        },
                        {
                            "id": "primaryColor",
                            "type": "color",
                            "label": "Primary Brand Color",
                            "default": "#0d65d9",
                            "required": true
                        }
                    ]
                }
            ]
        }
    ]
}
```

<Check>
  Your form now has a page with a section containing two fields! Users can
  input their store name and choose a primary color.
</Check>

## Complete Example

Here's a complete starter form:

```json theme={null}
{
    "pages": [
        {
            "page": "home",
            "title": "Home Page Configuration",
            "description": "Customize your homepage content",
            "sections": [
                {
                    "id": "hero",
                    "title": "Hero Section",
                    "description": "Main banner and headline",
                    "fields": [
                        {
                            "id": "heroTitle",
                            "type": "text",
                            "inputType": "text",
                            "label": "Hero Title",
                            "placeholder": "Welcome to our store",
                            "default": "Welcome!",
                            "required": true
                        },
                        {
                            "id": "heroSubtitle",
                            "type": "text",
                            "inputType": "textarea",
                            "label": "Hero Subtitle",
                            "placeholder": "A brief description",
                            "default": "Discover amazing products",
                            "required": false
                        },
                        {
                            "id": "heroBanner",
                            "type": "media",
                            "mediaType": "image",
                            "label": "Hero Background Image",
                            "description": "Upload your hero banner",
                            "required": true
                        }
                    ]
                },
                {
                    "id": "contact",
                    "title": "Contact Information",
                    "description": "Your business contact details",
                    "fields": [
                        {
                            "id": "email",
                            "type": "text",
                            "inputType": "email",
                            "label": "Email Address",
                            "placeholder": "contact@example.com",
                            "required": true
                        },
                        {
                            "id": "phone",
                            "type": "text",
                            "inputType": "tel",
                            "label": "Phone Number",
                            "placeholder": "+1 (555) 123-4567",
                            "required": true
                        }
                    ]
                }
            ]
        }
    ]
}
```

## Testing Your Form

<Steps>
  <Step title="Preview Mode">
    Switch to **Preview** mode in the Form Builder to see exactly how users
    will interact with your form.
  </Step>

  <Step title="Fill Out Fields">
    Enter test data into the form fields to ensure everything works as
    expected.
  </Step>

  <Step title="Submit Form">
    Submit the form and check the **Result** panel to see the generated JSON
    output.
  </Step>

  <Step title="Verify Variables">
    Confirm that all field IDs match the variable names you'll use in your
    theme.
  </Step>
</Steps>

## Saving Your Schema

<Note>
  The Form Builder automatically saves your schema to browser local storage.
  Your changes persist between sessions.
</Note>

To export your schema:

1. Click the **Copy JSON** button in the Schema Editor panel
2. Save the JSON to your project as `salesive.form.json`
3. Commit the file to your theme repository

## Next Steps

Now that you have a basic form, explore more advanced features:

<CardGroup cols={2}>
  <Card title="Field Types" icon="list" href="/form-builder/field-types">
    Learn about all available field types and their options
  </Card>

  <Card title="Schema Structure" icon="sitemap" href="/form-builder/schema-structure">
    Deep dive into the complete schema structure
  </Card>

  <Card title="Using Variables" icon="code" href="/form-builder/using-variables">
    Learn how to use collected data in your theme
  </Card>

  <Card title="Examples" icon="lightbulb" href="/form-builder/examples">
    Browse real-world form configurations
  </Card>
</CardGroup>