Home

EZ Form Demo

Getting Started

Follow these simple steps to add EZComponents forms to your project:

Add the scripts to your HTML:

<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsselectMenu.js"></script>


<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsform.js"></script>
Create your first form:
// Create a simple form
const myForm = new EZForm(
    document.getElementById('form-container'),
    {
        title: 'User Information',
        description: 'Please fill out your details',
        fields: [
            {
                id: 'name',
                type: 'text',
                label: 'Full Name',
                placeholder: 'Enter your name',
                required: true
            },
            {
                id: 'email',
                type: 'email',
                label: 'Email Address',
                placeholder: 'Enter your email'
            }
        ],
        onSubmit: (formData) => {
            console.log('Form submitted:', formData);
        }
    }
);

// Render the form
myForm.render();

Registration Form Example

User Registration

Form Events & Data

// Form events will appear here

Conditional Fields Example

Implementation Examples

Form Implementation Code

// Basic Form Implementation
const myForm = new EZForm(
    document.getElementById('form-container'),
    {
        title: 'User Profile',
        description: 'Please fill out your profile information.',
        fields: [
            {
                id: 'name',           // Unique identifier for the field
                type: 'text',         // Field type (text, email, password, textarea, select, etc.)
                label: 'Full Name',   // Display label
                placeholder: 'Enter your full name',
                required: true        // Make field required
            },
            {
                id: 'email',
                type: 'email',
                label: 'Email Address',
                placeholder: 'Enter your email',
                required: true,
                // Custom validation function
                validate: (value) => {
                    if (!value.includes('@')) return 'Please enter a valid email';
                    return true;
                }
            },
            {
                id: 'role',
                type: 'select',
                label: 'Role',
                options: [
                    {
                        value: 'user',
                        label: 'Regular User',
                        description: 'Standard account access',
                        emoji: '👤'
                    },
                    {
                        value: 'admin',
                        label: 'Administrator',
                        description: 'Full system access',
                        emoji: '👑'
                    }
                ]
            },
            {
                id: 'bio',
                type: 'textarea',
                label: 'Biography',
                placeholder: 'Tell us about yourself'
            }
        ],
        // Called when form is submitted and validation passes
        onSubmit: (formData, form) => {
            console.log('Form submitted:', formData);
            // Process form data or send to server
        },
        // Called when any field value changes
        onChange: (fieldId, value, allValues, form) => {
            console.log(`Field "${fieldId}" changed to:`, value);
        },
        submitButton: {
            text: 'Save Profile'
        }
    }
);

// Render the form
myForm.render();

// Form API Methods
myForm.getValue('name');                  // Get a specific field value
myForm.getValues();                       // Get all field values as an object
myForm.setValue('name', 'John Doe');      // Set a specific field value
myForm.setValues({                        // Set multiple field values at once
    name: 'John Doe',
    email: 'john@example.com',
    role: 'user',
    bio: 'Hello, I am John!'
});
myForm.reset();                           // Reset all fields to initial values
myForm.disable();                         // Disable the entire form
myForm.enable();                          // Enable the form

// Form with Conditional Fields
const conditionalForm = new EZForm(
    document.getElementById('form-container'),
    {
        title: 'Payment Information',
        fields: [
            {
                id: 'payment_method',
                type: 'select',
                label: 'Payment Method',
                options: [
                    { value: 'credit_card', label: 'Credit Card', emoji: '💳' },
                    { value: 'paypal', label: 'PayPal', emoji: '📱' },
                    { value: 'bank_transfer', label: 'Bank Transfer', emoji: '🏦' }
                ]
            },
            {
                id: 'card_number',
                type: 'text',
                label: 'Card Number',
                placeholder: 'Enter your card number',
                // This field only shows when payment_method is credit_card
                dependsOn: {
                    field: 'payment_method',
                    condition: 'equals',
                    value: 'credit_card'
                }
            },
            {
                id: 'paypal_email',
                type: 'email',
                label: 'PayPal Email',
                placeholder: 'Enter your PayPal email',
                // This field only shows when payment_method is paypal
                dependsOn: {
                    field: 'payment_method',
                    condition: 'equals',
                    value: 'paypal'
                }
            },
            {
                id: 'bank_info',
                type: 'textarea',
                label: 'Bank Information',
                placeholder: 'Enter your bank details',
                // This field only shows when payment_method is bank_transfer
                dependsOn: {
                    field: 'payment_method',
                    condition: 'equals',
                    value: 'bank_transfer'
                }
            }
        ],
        onSubmit: (formData) => {
            console.log('Payment information:', formData);
        }
    }
);

conditionalForm.render();