MultiStep Form Documentation

The MultiStep Form is a versatile, customizable multi-step form solution that provides a smooth user experience with validation, progress saving, and responsive design.

Key Features

• 6-step form with progress tracking
• Responsive design for all devices
• Form data persistence using localStorage
• Customizable validation rules
• Easy theming with CSS variables
• API integration for form submission
• Review step before submission

Installation Guide

Basic Setup

To use the MultiStep Form, include the following files in your project:

<!-- CSS -->
<link rel="stylesheet" href="path/to/styles.css">
<link rel="stylesheet" href="path/to/tailwind.css">

<!-- JavaScript -->
<script src="path/to/config.js"></script>
<script src="path/to/script.js"></script>

HTML Structure

The form requires a specific HTML structure. Here's the basic template:

<div class="form-container">
    <div class="form-card">
        <h1 class="form-title">MultiPurpose MultiStep Form</h1>
        
        <div class="form-wrapper">
            <!-- Sidebar with step indicators -->
            <div class="sidebar">
                <div class="step-indicator" data-step="1">
                    <div class="step-circle">1</div>
                    <div class="step-label">Basic Information</div>
                </div>
                <!-- Add more steps as needed -->
            </div>
            
            <!-- Form content -->
            <div class="form-content">
                <form id="multiStepForm">
                    <!-- Step 1 Content -->
                    <div class="step-content active" data-step="1">
                        <h2 class="step-title">Basic Information</h2>
                        <!-- Form fields go here -->
                    </div>
                    
                    <!-- Navigation buttons -->
                    <div class="form-navigation">
                        <button type="button" id="backBtn" class="btn-back">Back</button>
                        <button type="button" id="nextBtn" class="btn-next">Next</button>
                        <button type="submit" id="submitBtn" class="btn-submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Customization Guide

Modifying Form Steps

The form steps are defined in config.js. You can modify the steps array to add, remove, or reorder steps:

steps: [
    {
        id: 1,
        title: "Basic Info",
        label: "Basic Information",
        fields: [
            {
                name: "fullName",
                type: "text",
                label: "Full Name",
                required: true,
                placeholder: "Enter your full name"
            },
            // More fields...
        ]
    },
    // More steps...
]

Field Types

The form supports several field types:

• text - Standard text input
• email - Email input with validation
• tel - Phone number input
• date - Date picker
• select - Dropdown menu
• checkbox - Checkbox input
• textarea - Multi-line text input

Configuration Options

The MultiStepFormConfig object in config.js contains all customizable options:

Color Scheme

colors: {
    primary: "#1a2b49",      // Main brand color
    secondary: "#007bff",    // Accent color
    background: "#ffffff",   // Form background
    pageBackground: "#f5f5f5", // Page background
    text: "#333333",         // Main text color
    muted: "#666666"         // Secondary text color
}

Border Radius

borderRadius: {
    card: "20px",   // Form container
    button: "8px",  // Buttons
    input: "8px"    // Input fields
}

Validation Rules

validation: {
    email: {
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        message: "Please enter a valid email address"
    },
    phone: {
        pattern: /^[\d\s\-\+\(\)]+$/,
        minLength: 10,
        message: "Please enter a valid phone number"
    }
}

API Integration

The form can submit data to an API endpoint. Configure the API settings in config.js:

api: {
    endpoint: "/api/submit",
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    }
}

Handling Submission

The form data is automatically collected and sent as JSON. You can access the form data before submission:

// Get current form data
const formData = multiStepForm.getFormData();

// Modify before submission
multiStepForm.setConfig({
    api: {
        endpoint: "/custom-endpoint",
        headers: {
            "Authorization": "Bearer token"
        }
    }
});

Styling & Theming

The form uses CSS variables for easy theming. Override these variables to customize the appearance:

:root {
    --primary-color: #1a2b49;
    --secondary-color: #007bff;
    --background-color: #ffffff;
    --page-background: #f5f5f5;
    --text-color: #333333;
    --border-radius-card: 20px;
    --border-radius-button: 8px;
}

Responsive Design

The form includes responsive breakpoints at 768px and 480px. You can customize these in styles.css.

Using Tailwind CSS

The form includes Tailwind CSS for utility classes. You can extend or modify the Tailwind configuration as needed.