Form Builder Examples
Explore complete, production-ready examples of form schemas for different use cases.Basic Store Configuration
A minimal form for collecting essential store information.Copy
{
"pages": [
{
"page": "general",
"title": "General Settings",
"description": "Configure your store's basic information",
"sections": [
{
"id": "store-info",
"title": "Store Information",
"description": "Your store's basic details",
"fields": [
{
"id": "storeName",
"type": "text",
"inputType": "text",
"label": "Store Name",
"placeholder": "My Awesome Store",
"default": "",
"required": true
},
{
"id": "storeDescription",
"type": "text",
"inputType": "textarea",
"label": "Store Description",
"placeholder": "Tell customers about your store",
"default": "",
"required": true
},
{
"id": "storeLogo",
"type": "media",
"mediaType": "image",
"label": "Store Logo",
"description": "Upload your store logo (recommended: 200x200px)",
"required": true
}
]
},
{
"id": "contact",
"title": "Contact Information",
"description": "How customers can reach you",
"fields": [
{
"id": "email",
"type": "text",
"inputType": "email",
"label": "Contact Email",
"placeholder": "[email protected]",
"required": true
},
{
"id": "phone",
"type": "text",
"inputType": "tel",
"label": "Phone Number",
"placeholder": "+1 (555) 123-4567",
"required": true
},
{
"id": "address",
"type": "text",
"inputType": "textarea",
"label": "Business Address",
"placeholder": "123 Main St, City, State, ZIP",
"required": false
}
]
}
]
}
]
}
Expected Config Output
Expected Config Output
Copy
{
"variables": {
"storeName": "Paradise Boutique",
"storeDescription": "Premium fashion and accessories for the modern shopper",
"storeLogo": "https://files.salesive.com/api/files/logo.png",
"email": "[email protected]",
"phone": "+1 (555) 789-0123",
"address": "456 Fashion Ave, New York, NY 10001"
}
}
E-commerce Homepage
Complete homepage configuration with hero, features, and branding.Copy
{
"pages": [
{
"page": "home",
"title": "Home Page Configuration",
"description": "Customize your homepage appearance",
"sections": [
{
"id": "hero",
"title": "Hero Section",
"description": "Main banner and call-to-action",
"fields": [
{
"id": "heroTitle",
"type": "text",
"inputType": "text",
"label": "Hero Title",
"placeholder": "Welcome to our store",
"default": "Discover Amazing Products",
"required": true
},
{
"id": "heroSubtitle",
"type": "text",
"inputType": "textarea",
"label": "Hero Subtitle",
"placeholder": "A compelling subtitle",
"default": "Shop the latest trends at unbeatable prices",
"required": false
},
{
"id": "heroBanners",
"type": "media",
"mediaType": "image",
"label": "Hero Banner Images",
"description": "Upload 3-5 banner images for the carousel",
"default": [],
"required": true,
"multiple": true,
"minItems": 3,
"maxItems": 5
},
{
"id": "ctaButton",
"type": "text",
"inputType": "text",
"label": "Call-to-Action Button Text",
"placeholder": "Shop Now",
"default": "Shop Now",
"required": true
}
]
},
{
"id": "features",
"title": "Feature Highlights",
"description": "Showcase your store's key features",
"fields": [
{
"id": "feature1Title",
"type": "text",
"inputType": "text",
"label": "Feature 1 Title",
"default": "Free Shipping",
"required": true
},
{
"id": "feature1Description",
"type": "text",
"inputType": "textarea",
"label": "Feature 1 Description",
"default": "On orders over $50",
"required": true
},
{
"id": "feature2Title",
"type": "text",
"inputType": "text",
"label": "Feature 2 Title",
"default": "Easy Returns",
"required": true
},
{
"id": "feature2Description",
"type": "text",
"inputType": "textarea",
"label": "Feature 2 Description",
"default": "30-day return policy",
"required": true
},
{
"id": "feature3Title",
"type": "text",
"inputType": "text",
"label": "Feature 3 Title",
"default": "Secure Checkout",
"required": true
},
{
"id": "feature3Description",
"type": "text",
"inputType": "textarea",
"label": "Feature 3 Description",
"default": "SSL encrypted payments",
"required": true
}
]
},
{
"id": "branding",
"title": "Brand Colors",
"description": "Your store's color scheme",
"fields": [
{
"id": "primaryColor",
"type": "color",
"label": "Primary Color",
"default": "#0d65d9",
"required": true
},
{
"id": "secondaryColor",
"type": "color",
"label": "Secondary Color",
"default": "#64748b",
"required": true
},
{
"id": "accentColor",
"type": "color",
"label": "Accent Color",
"default": "#f59e0b",
"required": true
}
]
}
]
}
]
}
Blog Configuration
Form for configuring a blog section.Copy
{
"pages": [
{
"page": "blog",
"title": "Blog Configuration",
"description": "Set up your blog appearance and settings",
"sections": [
{
"id": "blog-header",
"title": "Blog Header",
"description": "Blog page header content",
"fields": [
{
"id": "blogTitle",
"type": "text",
"inputType": "text",
"label": "Blog Page Title",
"placeholder": "Our Blog",
"default": "Blog",
"required": true
},
{
"id": "blogDescription",
"type": "text",
"inputType": "textarea",
"label": "Blog Description",
"placeholder": "Share your thoughts and insights",
"default": "Latest news, tips, and insights from our team",
"required": false
},
{
"id": "blogHeaderImage",
"type": "media",
"mediaType": "image",
"label": "Blog Header Image",
"description": "Banner image for blog page",
"required": false
}
]
},
{
"id": "blog-settings",
"title": "Display Settings",
"description": "Control how blog posts are displayed",
"fields": [
{
"id": "postsPerPage",
"type": "select",
"selectType": "number",
"label": "Posts Per Page",
"description": "Number of posts to show per page",
"default": 12,
"required": true,
"multiple": false,
"options": [
{ "label": "6 posts", "value": 6 },
{ "label": "12 posts", "value": 12 },
{ "label": "24 posts", "value": 24 },
{ "label": "48 posts", "value": 48 }
]
},
{
"id": "layoutStyle",
"type": "select",
"selectType": "text",
"label": "Layout Style",
"description": "Choose blog post layout",
"default": "grid",
"required": true,
"multiple": false,
"options": [
{ "label": "Grid Layout", "value": "grid" },
{ "label": "List Layout", "value": "list" },
{
"label": "Masonry Layout",
"value": "masonry"
}
]
},
{
"id": "showAuthor",
"type": "select",
"selectType": "boolean",
"label": "Show Author",
"description": "Display author name on posts",
"default": true,
"required": true,
"multiple": false,
"options": [
{ "label": "Show", "value": true },
{ "label": "Hide", "value": false }
]
},
{
"id": "showDate",
"type": "select",
"selectType": "boolean",
"label": "Show Date",
"description": "Display publish date on posts",
"default": true,
"required": true,
"multiple": false,
"options": [
{ "label": "Show", "value": true },
{ "label": "Hide", "value": false }
]
}
]
}
]
}
]
}
Multi-Page Theme
Complete configuration for a theme with multiple pages.Copy
{
"pages": [
{
"page": "home",
"title": "Home Page",
"description": "Configure homepage content",
"sections": [
{
"id": "hero",
"title": "Hero Section",
"fields": [
{
"id": "homeHeroTitle",
"type": "text",
"inputType": "text",
"label": "Hero Title",
"default": "Welcome",
"required": true
},
{
"id": "homeHeroImage",
"type": "media",
"mediaType": "image",
"label": "Hero Background",
"required": true
}
]
}
]
},
{
"page": "about",
"title": "About Page",
"description": "Configure about page content",
"sections": [
{
"id": "about-hero",
"title": "About Hero",
"fields": [
{
"id": "aboutHeading",
"type": "text",
"inputType": "text",
"label": "Page Heading",
"default": "About Us",
"required": true
},
{
"id": "aboutBackgroundImages",
"type": "media",
"mediaType": "image",
"label": "Background Images",
"description": "Upload 1-3 background images",
"default": [],
"required": false,
"multiple": true,
"minItems": 0,
"maxItems": 3
}
]
},
{
"id": "about-content",
"title": "About Content",
"fields": [
{
"id": "aboutContent",
"type": "text",
"inputType": "textarea",
"label": "About Us Text",
"placeholder": "Tell your story...",
"default": "",
"required": true
},
{
"id": "aboutLayout",
"type": "select",
"selectType": "text",
"label": "Layout Style",
"default": "standard",
"required": true,
"multiple": false,
"options": [
{ "label": "Standard", "value": "standard" },
{ "label": "Split", "value": "split" },
{ "label": "Centered", "value": "centered" }
]
}
]
}
]
},
{
"page": "contact",
"title": "Contact Page",
"description": "Configure contact page",
"sections": [
{
"id": "contact-info",
"title": "Contact Information",
"fields": [
{
"id": "contactTitle",
"type": "text",
"inputType": "text",
"label": "Page Title",
"default": "Get in Touch",
"required": true
},
{
"id": "contactEmail",
"type": "text",
"inputType": "email",
"label": "Email",
"required": true
},
{
"id": "contactPhone",
"type": "text",
"inputType": "tel",
"label": "Phone",
"required": true
},
{
"id": "contactAddress",
"type": "text",
"inputType": "textarea",
"label": "Address",
"required": false
}
]
},
{
"id": "social-media",
"title": "Social Media",
"description": "Your social media links",
"fields": [
{
"id": "facebookUrl",
"type": "text",
"inputType": "url",
"label": "Facebook URL",
"placeholder": "https://facebook.com/yourpage",
"required": false
},
{
"id": "instagramUrl",
"type": "text",
"inputType": "url",
"label": "Instagram URL",
"placeholder": "https://instagram.com/yourprofile",
"required": false
},
{
"id": "twitterUrl",
"type": "text",
"inputType": "url",
"label": "Twitter/X URL",
"placeholder": "https://twitter.com/yourhandle",
"required": false
}
]
}
]
}
]
}
Advanced Features Configuration
Form with feature toggles and advanced options.Copy
{
"pages": [
{
"page": "features",
"title": "Features & Settings",
"description": "Enable and configure theme features",
"sections": [
{
"id": "enabled-features",
"title": "Enabled Features",
"description": "Select which features to enable",
"fields": [
{
"id": "enabledFeatures",
"type": "select",
"selectType": "text",
"label": "Active Features",
"description": "Choose features to enable on your site",
"default": ["wishlist", "cart", "reviews"],
"required": true,
"multiple": true,
"options": [
{ "label": "Wishlist", "value": "wishlist" },
{ "label": "Shopping Cart", "value": "cart" },
{
"label": "Product Reviews",
"value": "reviews"
},
{ "label": "Live Chat", "value": "chat" },
{
"label": "Newsletter Signup",
"value": "newsletter"
},
{
"label": "Product Compare",
"value": "compare"
},
{ "label": "Quick View", "value": "quickview" }
]
}
]
},
{
"id": "newsletter",
"title": "Newsletter Settings",
"description": "Newsletter signup configuration",
"fields": [
{
"id": "newsletterTitle",
"type": "text",
"inputType": "text",
"label": "Newsletter Title",
"default": "Subscribe to Our Newsletter",
"required": true
},
{
"id": "newsletterDescription",
"type": "text",
"inputType": "textarea",
"label": "Newsletter Description",
"default": "Get updates on new products and exclusive offers",
"required": false
},
{
"id": "newsletterPlacement",
"type": "select",
"selectType": "text",
"label": "Newsletter Placement",
"default": "footer",
"required": true,
"multiple": false,
"options": [
{ "label": "Footer", "value": "footer" },
{ "label": "Popup", "value": "popup" },
{ "label": "Sidebar", "value": "sidebar" }
]
}
]
}
]
}
]
}
Usage Examples
Using Basic Store Configuration
Copy
import { useSalesiveConfig } from "salesive-dev-tools";
function Header() {
const storeLogo = useSalesiveConfig("storeLogo");
const storeName = useSalesiveConfig("storeName");
return (
<header>
<img src={storeLogo} alt={storeName} />
<h1>{storeName}</h1>
</header>
);
}
function Footer() {
const email = useSalesiveConfig("email");
const phone = useSalesiveConfig("phone");
const address = useSalesiveConfig("address");
return (
<footer>
<div className="contact-info">
<a href={`mailto:${email}`}>{email}</a>
<a href={`tel:${phone}`}>{phone}</a>
{address && <p>{address}</p>}
</div>
</footer>
);
}
Using Homepage Configuration
Copy
import { useSalesiveConfig } from "salesive-dev-tools";
function Hero() {
const heroTitle = useSalesiveConfig("heroTitle");
const heroSubtitle = useSalesiveConfig("heroSubtitle");
const heroBanners = useSalesiveConfig("heroBanners");
const ctaButton = useSalesiveConfig("ctaButton");
const primaryColor = useSalesiveConfig("primaryColor");
return (
<div className="hero">
<Carousel images={heroBanners} />
<div className="hero-content">
<h1>{heroTitle}</h1>
{heroSubtitle && <p>{heroSubtitle}</p>}
<button style={{ backgroundColor: primaryColor }}>
{ctaButton}
</button>
</div>
</div>
);
}
function Features() {
const feature1Title = useSalesiveConfig("feature1Title");
const feature1Description = useSalesiveConfig("feature1Description");
const feature2Title = useSalesiveConfig("feature2Title");
const feature2Description = useSalesiveConfig("feature2Description");
const feature3Title = useSalesiveConfig("feature3Title");
const feature3Description = useSalesiveConfig("feature3Description");
const features = [
{ title: feature1Title, description: feature1Description },
{ title: feature2Title, description: feature2Description },
{ title: feature3Title, description: feature3Description },
];
return (
<div className="features">
{features.map((feature, index) => (
<div key={index} className="feature">
<h3>{feature.title}</h3>
<p>{feature.description}</p>
</div>
))}
</div>
);
}
Best Practices from Examples
Logical Organization - Group related fields into sections - Use
descriptive page names for multi-page forms - Keep sections focused on a
single aspect
User-Friendly Defaults All examples include sensible default values to
improve the user experience and provide guidance on what’s expected.
Field ID Naming Notice how field IDs are prefixed when multiple pages
might have similar fields (e.g.,
homeHeroTitle vs aboutHeading) to avoid
conflicts.