Skip to main content

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

Theme Customization

Collect brand colors, logos, and visual preferences from theme users

Content Configuration

Gather page titles, descriptions, hero text, and other content elements

Contact Information

Capture business details like phone numbers, emails, and addresses

Feature Toggles

Enable or disable theme features based on user preferences

How It Works

1

Create Form Schema

Build a JSON schema using salesive.form.json that defines your configuration form structure with pages, sections, and fields.
2

User Fills Form

Sellers configuring your theme use the generated form to input their specific values (colors, text, images, etc.).
3

Data Stored

Form submissions are saved to salesive.config.json with all user-provided values.
4

Variables Injected

Access the collected variables in your theme templates using the Salesive variable system.

Example Scenario

Imagine you’re building a theme and want to let users customize their hero section:
{
    "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:
The Form Builder automatically saves your schema to browser local storage, so your work is preserved between sessions.

Getting Started

Ready to build your first form? Check out the Getting Started guide to create your configuration form in minutes.

Next Steps

Learn how to create your first Salesive configuration form