Skip to main content

​
Schema Structure

The Salesive form schema follows a hierarchical structure: Pages → Sections → Fields. This organization helps create intuitive and maintainable configuration forms.

​
Schema Hierarchy

Form Schema (salesive.form.json)
  └── Pages[]
       └── Sections[]
            └── Fields[]

​
Root Schema

The root of your schema file contains an array of pages: 
{
    "pages": []
}

​
Page Object

Pages are the top-level organizational unit in your form.

​
Structure

{
    "page": "string",
    "title": "string",
    "description": "string",
    "sections": []
}

​
Properties

​
page
string
required
Unique identifier for the page. Use lowercase letters, numbers, and hyphens only. Example: "home", "about-us", "contact"
​
title
string
required
Display name shown in the form UI. Should be user-friendly and descriptive. Example: "Home Page", "About Us Page", "Contact Information"
​
description
string
Optional explanation of what this page configures. Helps users understand the purpose. Example: "Configure your homepage content and layout"
​
sections
array
required
Array of section objects containing related field groups.

​
Example

{
    "page": "home",
    "title": "Home Page",
    "description": "Configure your home page content",
    "sections": [
        // sections go here
    ]
}

​
Section Object

Sections group related fields within a page for better organization.

​
Structure

{
    "id": "string",
    "title": "string",
    "description": "string",
    "fields": []
}

​
Properties

​
id
string
required
Unique identifier for the section within its page. Use lowercase with hyphens. Example: "hero", "contact-info", "brand-colors"
​
title
string
required
Section heading displayed to users. Should clearly indicate the content group. Example: "Hero Section", "Contact Information", "Brand Colors"
​
description
string
Optional helper text explaining what fields in this section control. Example: "Primary hero messaging and banners"
​
fields
array
required
Array of field objects representing form inputs.

​
Example

{
    "id": "hero",
    "title": "Hero Section",
    "description": "Main banner and headline content",
    "fields": [
        // fields go here
    ]
}

​
Field Object

Fields are the actual form inputs where users enter configuration data.

​
Base Structure

All fields share common properties: 
{
    "id": "string",
    "type": "string",
    "label": "string",
    "description": "string",
    "default": "any",
    "required": "boolean"
}

​
Common Properties

​
id
string
required
Unique identifier for the field. This becomes the variable name in salesive.config.json. Use camelCase for consistency with JavaScript conventions. Example: "heroTitle", "primaryColor", "phoneNumber"
​
type
string
required
Field type determining the input component and data format. Options: "text", "media", "color", "select"
​
label
string
required
Display label shown above the field. Should be clear and concise. Example: "Hero Title", "Primary Color", "Phone Number"
​
description
string
Optional helper text providing additional context or instructions. Example: "Upload or select hero banner images"
​
default
any
Default value for the field. Type depends on the field type. - Text fields: "string" - Color fields: "#hexcode" - Media fields: "url" or ["url1", "url2"] - Select fields: "option value"
​
required
boolean
Whether the field must be filled before form submission. Default: false

​
Type-Specific Properties

Different field types have additional properties:

​
Text Fields

{
    "id": "heroTitle",
    "type": "text",
    "inputType": "text",
    "label": "Hero Title",
    "placeholder": "Enter hero heading",
    "default": "Welcome to Our Store",
    "required": true
}
​
inputType
string
required
HTML input type: "text", "textarea", "email", "tel", "url", "number"
​
placeholder
string
Placeholder text shown in empty inputs

​
Media Fields

{
    "id": "heroBanner",
    "type": "media",
    "mediaType": "image",
    "label": "Hero Banner",
    "description": "Upload hero banner images",
    "default": ["https://example.com/image1.jpg"],
    "required": true,
    "multiple": true,
    "minItems": 1,
    "maxItems": 5
}
​
mediaType
string
required
Type of media: "image", "video", "file"
​
multiple
boolean
Allow multiple file uploads Default: false
​
minItems
number
Minimum number of items required (when multiple is true)
​
maxItems
number
Maximum number of items allowed (when multiple is true)

​
Color Fields

{
    "id": "primaryColor",
    "type": "color",
    "label": "Primary Brand Color",
    "default": "#0d65d9",
    "required": true
}
Color fields use a color picker input and store values as hex codes.

​
Select Fields

{
    "id": "layoutStyle",
    "type": "select",
    "selectType": "text",
    "label": "Layout Style",
    "description": "Choose the layout for this section",
    "default": "grid",
    "required": true,
    "multiple": false,
    "options": [
        {
            "label": "Grid Layout",
            "value": "grid"
        },
        {
            "label": "List Layout",
            "value": "list"
        }
    ]
}
​
selectType
string
required
Data type: "text", "number", "boolean"
​
multiple
boolean
Allow multiple selections Default: false
​
options
array
required
Array of option objects with label and value properties

​
Complete Example

Here’s a complete schema demonstrating all elements: 
{
    "pages": [
        {
            "page": "home",
            "title": "Home Page",
            "description": "Configure your home page",
            "sections": [
                {
                    "id": "hero",
                    "title": "Hero Section",
                    "description": "Main banner content",
                    "fields": [
                        {
                            "id": "heroTitle",
                            "type": "text",
                            "inputType": "text",
                            "label": "Hero Title",
                            "placeholder": "Enter hero heading",
                            "default": "Welcome to Our Store",
                            "required": true
                        },
                        {
                            "id": "heroImage",
                            "type": "media",
                            "mediaType": "image",
                            "label": "Hero Background",
                            "description": "Upload hero banner",
                            "required": true
                        }
                    ]
                },
                {
                    "id": "branding",
                    "title": "Brand Colors",
                    "description": "Your brand color palette",
                    "fields": [
                        {
                            "id": "primaryColor",
                            "type": "color",
                            "label": "Primary Color",
                            "default": "#0d65d9",
                            "required": true
                        },
                        {
                            "id": "secondaryColor",
                            "type": "color",
                            "label": "Secondary Color",
                            "default": "#64748b",
                            "required": true
                        }
                    ]
                }
            ]
        }
    ]
}

​
Best Practices

Naming Conventions - Use camelCase for field IDs: heroTitle, primaryColor - Use kebab-case for page and section IDs: home, about-us, hero-section - Keep IDs descriptive but concise
ID Uniqueness Field IDs must be unique across your entire schema, as they become variable names in salesive.config.json. Using duplicate IDs will cause conflicts when accessing variables in your theme.
Organization Tips - Group related fields into logical sections - Use clear, user-friendly labels and descriptions - Provide sensible default values - Mark essential fields as required

​
Validation

The Form Builder automatically validates your schema:
  • Ensures required properties are present
  • Checks for duplicate IDs
  • Validates field type configurations
  • Confirms proper JSON syntax

Next: Field Types

Learn about all available field types and their specific options