Field Types

Salesive Form Builder supports multiple field types to collect different kinds of configuration data. Each field type has specific properties and validation rules.

Text Fields

Text fields collect string data with various input types for different use cases.

Basic Text Input

Single-line text input for short strings.

{
    "id": "storeName",
    "type": "text",
    "inputType": "text",
    "label": "Store Name",
    "placeholder": "Enter your store name",
    "default": "My Store",
    "required": true
}

string

required

Must be "text" for single-line input

string

Example text shown in empty field

Textarea

Multi-line text input for longer content.

{
    "id": "aboutUs",
    "type": "text",
    "inputType": "textarea",
    "label": "About Us Description",
    "placeholder": "Tell your story...",
    "default": "",
    "required": false
}

string

required

Must be "textarea" for multi-line input

Use cases: Descriptions, long-form content, paragraphs

Email Input

Email address input with validation.

{
    "id": "contactEmail",
    "type": "text",
    "inputType": "email",
    "label": "Contact Email",
    "placeholder": "email@example.com",
    "required": true
}

string

required

Must be "email" for email validation

Validation: Ensures valid email format (user@domain.com)

Phone Number Input

Phone number input with tel keyboard on mobile.

{
    "id": "phoneNumber",
    "type": "text",
    "inputType": "tel",
    "label": "Phone Number",
    "placeholder": "+1 (555) 123-4567",
    "required": true
}

string

required

Must be "tel" for telephone input

Note: Triggers numeric keyboard on mobile devices

URL Input

URL input with validation.

{
    "id": "websiteUrl",
    "type": "text",
    "inputType": "url",
    "label": "Website URL",
    "placeholder": "https://example.com",
    "required": false
}

string

required

Must be "url" for URL validation

Validation: Ensures valid URL format (https://domain.com)

Number Input

Numeric input with increment/decrement controls.

{
    "id": "itemsPerPage",
    "type": "text",
    "inputType": "number",
    "label": "Items Per Page",
    "placeholder": "10",
    "default": "10",
    "required": true
}

string

required

Must be "number" for numeric input

Note: Value is still stored as string in config

Media Fields

Media fields allow users to upload or select images, videos, and other files.

Single Image

Upload a single image file.

{
    "id": "logo",
    "type": "media",
    "mediaType": "image",
    "label": "Store Logo",
    "description": "Upload your store logo",
    "default": "https://example.com/logo.png",
    "required": true,
    "multiple": false
}

string

required

Must be "image" for image uploads

boolean

Set to false for single file Default: false

Output: Single URL string

Multiple Images

Upload multiple image files.

{
    "id": "heroBanners",
    "type": "media",
    "mediaType": "image",
    "label": "Hero Banners",
    "description": "Upload hero banner images",
    "default": [
        "https://example.com/banner1.jpg",
        "https://example.com/banner2.jpg"
    ],
    "required": true,
    "multiple": true,
    "minItems": 1,
    "maxItems": 5
}

boolean

required

Must be true for multiple files

number

Minimum number of images required

number

Maximum number of images allowed

Output: Array of URL strings

Video Upload

Upload video files.

{
    "id": "promotionalVideo",
    "type": "media",
    "mediaType": "video",
    "label": "Promotional Video",
    "description": "Upload your promotional video",
    "required": false
}

string

required

Must be "video" for video uploads

Supported formats: MP4, WebM, OGG

General File Upload

Upload any file type.

{
    "id": "policyDocument",
    "type": "media",
    "mediaType": "file",
    "label": "Policy Document",
    "description": "Upload your policy document (PDF)",
    "required": false
}

string

required

Must be "file" for general file uploads

Note: Accept all file types; consider adding description with allowed formats

Color Fields

Color fields provide a color picker interface for selecting brand colors.

Color Picker

{
    "id": "primaryColor",
    "type": "color",
    "label": "Primary Brand Color",
    "default": "#0d65d9",
    "required": true
}

string

required

Must be "color" for color picker

string

Hex color code (e.g., "#0d65d9")

Output: Hex color code string (e.g., "#ff6b6b") Use cases: Brand colors, theme colors, text colors, background colors

Multiple Color Palette

Create a full color scheme:

{
    "sections": [
        {
            "id": "brand-colors",
            "title": "Brand Colors",
            "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
                }
            ]
        }
    ]
}

Select Fields

Select fields provide dropdown menus for choosing from predefined options.

Single Select

Choose one option from a list.

{
    "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"
        },
        {
            "label": "Masonry Layout",
            "value": "masonry"
        }
    ]
}

string

required

Value data type: "text", "number", or "boolean"

boolean

Set to false for single selection Default: false

array

required

Array of option objects with label and value properties

Output: Single value (string, number, or boolean depending on selectType)

Multi Select

Choose multiple options from a list.

{
    "id": "enabledFeatures",
    "type": "select",
    "selectType": "text",
    "label": "Enabled Features",
    "description": "Select which features to enable",
    "default": ["wishlist", "cart"],
    "required": true,
    "multiple": true,
    "options": [
        {
            "label": "Wishlist",
            "value": "wishlist"
        },
        {
            "label": "Shopping Cart",
            "value": "cart"
        },
        {
            "label": "Reviews",
            "value": "reviews"
        },
        {
            "label": "Live Chat",
            "value": "chat"
        }
    ]
}

boolean

required

Must be true for multiple selections

Output: Array of selected values

Number Select

Select numeric values.

{
    "id": "itemsPerPage",
    "type": "select",
    "selectType": "number",
    "label": "Products Per Page",
    "default": 12,
    "required": true,
    "options": [
        {
            "label": "12 items",
            "value": 12
        },
        {
            "label": "24 items",
            "value": 24
        },
        {
            "label": "48 items",
            "value": 48
        }
    ]
}

string

required

Must be "number" for numeric values

Note: Values in options must be numbers, not strings

Boolean Select

Select true/false values.

{
    "id": "enableNewsletter",
    "type": "select",
    "selectType": "boolean",
    "label": "Newsletter Signup",
    "description": "Show newsletter signup form",
    "default": true,
    "required": true,
    "options": [
        {
            "label": "Enabled",
            "value": true
        },
        {
            "label": "Disabled",
            "value": false
        }
    ]
}

string

required

Must be "boolean" for true/false values

Note: Values must be boolean true or false, not strings

Field Type Summary

Text

Types: text, textarea, email, tel, url, number Best for: Names, descriptions, contact info, numbers

Media

Types: image, video, file Best for: Logos, banners, backgrounds, videos, documents

Color

Output: Hex color codes Best for: Brand colors, theme customization

Select

Types: text, number, boolean Best for: Predefined options, feature toggles, layouts

Validation Rules

Required Fields

{
    "required": true
}

Users must fill required fields before submitting the form.

Media Constraints

{
    "multiple": true,
    "minItems": 2,
    "maxItems": 8
}

Control the number of media files users can upload.

Default Values

Always provide sensible defaults to improve user experience:

{
    "default": "Default value"
}

Best Practices

Choose the Right Input Type - Use tel for phone numbers (mobile keyboard optimization) - Use email for email addresses (validation + mobile keyboard) - Use textarea for long-form content - Use select when you have predefined options

Validation Considerations - Mark essential fields as required: true - Set realistic minItems and maxItems for media uploads - Provide clear descriptions for complex fields - Test all validation rules in preview mode

Improve User Experience - Always provide helpful placeholder text - Set sensible default values - Group related fields in sections - Add descriptions for fields that need clarification

Next Steps

View Examples

See real-world examples of forms using different field types

Getting Started

Schema Reference

Implementation

Text Fields

Basic Text Input

Textarea

Email Input

Phone Number Input

URL Input

Number Input

Media Fields

Single Image

Multiple Images

Video Upload

General File Upload

Color Fields

Color Picker

Multiple Color Palette

Select Fields

Single Select

Multi Select

Number Select

Boolean Select

Field Type Summary

Text

Media

Color

Select

Validation Rules

Required Fields

Media Constraints

Default Values

Best Practices

Next Steps

View Examples

​Text Fields

​Basic Text Input

​Textarea

​Email Input

​Phone Number Input

​URL Input

​Number Input

​Media Fields

​Single Image

​Multiple Images

​Video Upload

​General File Upload

​Color Fields

​Color Picker

​Multiple Color Palette

​Select Fields

​Single Select

​Multi Select

​Number Select

​Boolean Select

​Field Type Summary

Text

Media

Color

Select

​Validation Rules

​Required Fields

​Media Constraints

​Default Values

​Best Practices

​Next Steps

View Examples

Text Fields

Basic Text Input

Textarea

Email Input

Phone Number Input

URL Input

Number Input

Media Fields

Single Image

Multiple Images

Video Upload

General File Upload

Color Fields

Color Picker

Multiple Color Palette

Select Fields

Single Select

Multi Select

Number Select

Boolean Select

Field Type Summary

Validation Rules

Required Fields

Media Constraints

Default Values

Best Practices

Next Steps