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. You’ll see two main panels:

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

Open Form Builder

Start building at https://form.salesive.com

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.

Step 2: Define Your First Page

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

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

string

required

Unique identifier for the page (use lowercase, hyphens for spaces)

string

required

Display name shown to users

string

Brief explanation of what this page configures

Step 3: Add Sections

Sections group related fields within a page.

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

string

required

Unique identifier for the section

string

required

Section heading displayed to users

string

Helper text explaining this section’s purpose

Step 4: Add Fields

Fields are the actual form inputs where users enter data.

{
    "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
                        }
                    ]
                }
            ]
        }
    ]
}

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

Complete Example

Here’s a complete starter form:

{
    "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

Preview Mode

Switch to Preview mode in the Form Builder to see exactly how users will interact with your form.

Fill Out Fields

Enter test data into the form fields to ensure everything works as expected.

Submit Form

Submit the form and check the Result panel to see the generated JSON output.

Verify Variables

Confirm that all field IDs match the variable names you’ll use in your theme.

Saving Your Schema

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

To export your schema:

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

Next Steps

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

Field Types

Learn about all available field types and their options

Schema Structure

Deep dive into the complete schema structure

Using Variables

Learn how to use collected data in your theme

Examples

Browse real-world form configurations

Getting Started

Schema Reference

Implementation

Getting Started

Getting Started with Form Builder

Prerequisites

Creating Your First Form

Step 1: Access the Form Builder

Open Form Builder

Step 2: Define Your First Page

Step 3: Add Sections

Step 4: Add Fields

Complete Example

Testing Your Form

Saving Your Schema

Next Steps

Field Types

Schema Structure

Using Variables

Examples

​Getting Started with Form Builder

​Prerequisites

​Creating Your First Form

​Step 1: Access the Form Builder

Open Form Builder

​Step 2: Define Your First Page

​Step 3: Add Sections

​Step 4: Add Fields

​Complete Example

​Testing Your Form

​Saving Your Schema

​Next Steps

Field Types

Schema Structure

Using Variables

Examples

Getting Started with Form Builder

Prerequisites

Creating Your First Form

Step 1: Access the Form Builder

Step 2: Define Your First Page

Step 3: Add Sections

Step 4: Add Fields

Complete Example

Testing Your Form

Saving Your Schema

Next Steps