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
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
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": []
}
]
}
Unique identifier for the page (use lowercase, hyphens for spaces)
Display name shown to users
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": []
}
]
}
]
}
Unique identifier for the section
Section heading displayed to users
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": "[email protected]",
"required": true
},
{
"id": "phone",
"type": "text",
"inputType": "tel",
"label": "Phone Number",
"placeholder": "+1 (555) 123-4567",
"required": true
}
]
}
]
}
]
}
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.
- 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:
