📝 Dynamic Form Manager - Template Form Speech 📝

🎯 Dynamic and configurable form management system for talks and presentations. 🎤 A modern and flexible template that allows you to create feedback forms quickly and efficiently, with automatic validation and responsive design.

✨ This project is developed by susarroDEV with vanilla JavaScript to offer a lightweight, fast and easy-to-integrate solution for any website. ✨

📜 Table of contents

• 📝 Dynamic Form Manager - Template Form Speech 📝
  • 🚀 Project Features
  • 📖 Getting Started
    • 🔧 Installation
    • 🎯 Basic Usage
  • ⚙️ Configuration
    • 📋 Form Structure
    • 🔍 Available Field Types
    • ✅ Validation System
  • 🎨 Customization
    • CSS Styles
  • 🤝 Contributing
  • 🛠️ Stack
  • 📬 Contact

🚀 Project Features

Some of the main features of the system include:

• 📱 Fully responsive design: Optimized for all devices and screen sizes.
• 🔧 Flexible configuration: JSON-based system to define forms dynamically.
• ✅ Automatic validation: Real-time validation with customizable error messages.
• 🎨 Modern interface: Clean design with CSS animations and interactive effects.
• 📤 Asynchronous submission: Form handling with fetch API and JSON responses.
• 🎯 Varied field types: Input, textarea, select, radio, checkbox and more.

(back to top)

📖 Getting Started

🔧 Installation

1. Clone the repository

   git clone https://github.com/susarrodev/template-form-speech.git

2. Navigate to the project directory

   cd template-form-speech

3. Serve the files from a local web server

   # Example with Live Server in VS Code
   # Or with Python
   python -m http.server 8000
   
   # Or with Node.js
   npx serve .

🎯 Basic Usage

1. Include the FormManager in your HTML:

   <div id="main-form-container"></div>
   
   <script type="module">
     import FormManager from './src/form-manager/index.js'
     const mainForm = new FormManager('main-form-container', 'contact', 'en')
   </script>

2. Configure your form in src/data/forms.js:

   export const formsConfig = {
     myForm: {
       id: "my-form",
       name: "My Custom Form",
       // ... form configuration
     }
   }

(back to top)

⚙️ Configuration

📋 Form Structure

Each form is defined with the following structure:

{
  id: "form-id",                    // Unique form ID
  name: "Form Name",                // Descriptive name
  action: "/api/endpoint",          // Submission URL
  method: "POST",                   // HTTP method
  className: "custom-class",        // Additional CSS class
  submitButtonText: "Submit",       // Button text
  successMessage: "Success!",       // Success message
  errorMessage: "Error...",         // Error message
  sections: [...]                   // Form sections
}

🔍 Available Field Types

• text: Simple text field
• email: Email field with validation
• tel: Phone field
• textarea: Text area with auto-resize
• select: Dropdown list
• radio: Radio buttons
• checkbox: Checkboxes
• number: Numeric fields

✅ Validation System

validation: {
  minLength: 10,                    // Minimum length
  maxLength: 500,                   // Maximum length
  pattern: "^[a-zA-Z]+$",          // Regular expression
  errorMessage: "Custom message"    // Custom error message
}

(back to top)

🎨 Customization

CSS Styles

Styles are organized in modular files:

• styles/global.css - Global styles
• styles/header.css - Header styles
• styles/form-manager.css - Form styles
• styles/footer.css - Footer styles

(back to top)

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated! 💖

Here's a quick guide:

1. Fork the Project (fork)
2. Clone your fork (git clone <fork URL>)
3. Add the original repository as remote (git remote add upstream <original repository URL>)
4. Create your Feature Branch (git switch -c feature/AmazingFeature)
5. Commit your Changes (git commit -m 'Add: some AmazingFeature')
6. Push to the Branch (git push origin feature/AmazingFeature)
7. Open a pull request

(back to top)

🛠️ Stack

• 
• 
• 
• 

(back to top)

📬 Contact

If you have questions or suggestions, feel free to contact susarroDEV. 💌