Interactive Form Components

A complete collection of modern, interactive form components featuring real-time validation, smooth animations, accessibility features, and enhanced user experience for web applications.

Features

• Multiple Input Types: Text, email, password, select, textarea, file upload, and more
• Real-time Validation: Instant feedback with custom validation rules
• Smooth Animations: CSS-powered transitions and micro-interactions
• Accessibility: Full keyboard navigation and screen reader support
• Responsive Design: Adapts to all screen sizes and devices
• Custom Styling: Easy theming and customization options
• Error Handling: Clear error messages and visual indicators
• Progress Indicators: Multi-step form progress tracking

Demo

<div class="form-container">
  <!-- Contact Form -->
  <form class="interactive-form contact-form" id="contactForm">
    <div class="form-header">
      <h2 class="form-title">Contact Us</h2>
      <p class="form-description">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
    </div>

    <div class="form-grid">
      <!-- Name Field -->
      <div class="form-group">
        <label for="name" class="form-label">Full Name</label>
        <div class="input-wrapper">
          <input type="text" id="name" name="name" class="form-input" required>
          <span class="input-focus-border"></span>
          <div class="input-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
        </div>
        <div class="form-feedback"></div>
      </div>

      <!-- Email Field -->
      <div class="form-group">
        <label for="email" class="form-label">Email Address</label>
        <div class="input-wrapper">
          <input type="email" id="email" name="email" class="form-input" required>
          <span class="input-focus-border"></span>
          <div class="input-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
            </svg>
          </div>
        </div>
        <div class="form-feedback"></div>
      </div>
    </div>

    <!-- Phone Field -->
    <div class="form-group">
      <label for="phone" class="form-label">Phone Number</label>
      <div class="input-wrapper">
        <input type="tel" id="phone" name="phone" class="form-input">
        <span class="input-focus-border"></span>
        <div class="input-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
          </svg>
        </div>
      </div>
      <div class="form-feedback"></div>
    </div>

    <!-- Subject Field -->
    <div class="form-group">
      <label for="subject" class="form-label">Subject</label>
      <div class="select-wrapper">
        <select id="subject" name="subject" class="form-select" required>
          <option value="">Choose a subject</option>
          <option value="general">General Inquiry</option>
          <option value="support">Technical Support</option>
          <option value="sales">Sales Question</option>
          <option value="feedback">Feedback</option>
          <option value="other">Other</option>
        </select>
        <div class="select-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M7 10l5 5 5-5z"/>
          </svg>
        </div>
      </div>
      <div class="form-feedback"></div>
    </div>

    <!-- Message Field -->
    <div class="form-group">
      <label for="message" class="form-label">Message</label>
      <div class="textarea-wrapper">
        <textarea id="message" name="message" class="form-textarea" rows="5" required placeholder="Tell us more about your inquiry..."></textarea>
        <span class="input-focus-border"></span>
        <div class="character-count">
          <span class="current-count">0</span>/<span class="max-count">500</span>
        </div>
      </div>
      <div class="form-feedback"></div>
    </div>

    <!-- File Upload -->
    <div class="form-group">
      <label for="attachment" class="form-label">Attachment (Optional)</label>
      <div class="file-upload-wrapper">
        <input type="file" id="attachment" name="attachment" class="file-input" accept=".pdf,.doc,.docx,.jpg,.png" multiple>
        <div class="file-upload-area">
          <div class="file-upload-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
            </svg>
          </div>
          <div class="file-upload-text">
            <span class="file-upload-title">Drop files here or click to browse</span>
            <span class="file-upload-subtitle">PDF, DOC, JPG, PNG up to 10MB</span>
          </div>
        </div>
        <div class="file-list"></div>
      </div>
      <div class="form-feedback"></div>
    </div>

    <!-- Checkbox -->
    <div class="form-group">
      <div class="checkbox-wrapper">
        <input type="checkbox" id="newsletter" name="newsletter" class="form-checkbox">
        <label for="newsletter" class="checkbox-label">
          <span class="checkbox-custom">
            <svg class="checkbox-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
          </span>
          Subscribe to our newsletter for updates and news
        </label>
      </div>
    </div>

    <!-- Privacy Policy -->
    <div class="form-group">
      <div class="checkbox-wrapper">
        <input type="checkbox" id="privacy" name="privacy" class="form-checkbox" required>
        <label for="privacy" class="checkbox-label">
          <span class="checkbox-custom">
            <svg class="checkbox-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
          </span>
          I agree to the <a href="#" class="privacy-link">Privacy Policy</a> and <a href="#" class="privacy-link">Terms of Service</a>
        </label>
      </div>
      <div class="form-feedback"></div>
    </div>

    <!-- Submit Button -->
    <div class="form-actions">
      <button type="submit" class="btn-submit">
        <span class="btn-text">Send Message</span>
        <span class="btn-loading">
          <svg class="loading-spinner" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="32">
              <animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
              <animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
            </circle>
          </svg>
        </span>
        <span class="btn-success">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
          </svg>
        </span>
      </button>
    </div>
  </form>

  <!-- Multi-step Form -->
  <form class="interactive-form multi-step-form" id="multiStepForm">
    <div class="form-header">
      <h2 class="form-title">Create Account</h2>
      <div class="progress-bar">
        <div class="progress-step active" data-step="1">
          <div class="step-number">1</div>
          <div class="step-label">Personal Info</div>
        </div>
        <div class="progress-step" data-step="2">
          <div class="step-number">2</div>
          <div class="step-label">Account Details</div>
        </div>
        <div class="progress-step" data-step="3">
          <div class="step-number">3</div>
          <div class="step-label">Preferences</div>
        </div>
        <div class="progress-step" data-step="4">
          <div class="step-number">4</div>
          <div class="step-label">Confirmation</div>
        </div>
      </div>
    </div>

    <!-- Step 1: Personal Info -->
    <div class="form-step active" data-step="1">
      <div class="form-grid">
        <div class="form-group">
          <label for="firstName" class="form-label">First Name</label>
          <div class="input-wrapper">
            <input type="text" id="firstName" name="firstName" class="form-input" required>
            <span class="input-focus-border"></span>
          </div>
          <div class="form-feedback"></div>
        </div>
        <div class="form-group">
          <label for="lastName" class="form-label">Last Name</label>
          <div class="input-wrapper">
            <input type="text" id="lastName" name="lastName" class="form-input" required>
            <span class="input-focus-border"></span>
          </div>
          <div class="form-feedback"></div>
        </div>
      </div>
      <div class="form-group">
        <label for="birthDate" class="form-label">Date of Birth</label>
        <div class="input-wrapper">
          <input type="date" id="birthDate" name="birthDate" class="form-input" required>
          <span class="input-focus-border"></span>
        </div>
        <div class="form-feedback"></div>
      </div>
    </div>

    <!-- Step 2: Account Details -->
    <div class="form-step" data-step="2">
      <div class="form-group">
        <label for="username" class="form-label">Username</label>
        <div class="input-wrapper">
          <input type="text" id="username" name="username" class="form-input" required>
          <span class="input-focus-border"></span>
          <div class="input-validation-icon"></div>
        </div>
        <div class="form-feedback"></div>
      </div>
      <div class="form-group">
        <label for="password" class="form-label">Password</label>
        <div class="input-wrapper">
          <input type="password" id="password" name="password" class="form-input" required>
          <span class="input-focus-border"></span>
          <button type="button" class="password-toggle" aria-label="Toggle password visibility">
            <svg class="eye-open" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
            </svg>
            <svg class="eye-closed" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
              <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
            </svg>
          </button>
        </div>
        <div class="password-strength">
          <div class="strength-bar">
            <div class="strength-fill"></div>
          </div>
          <div class="strength-text">Password strength: <span class="strength-level">Weak</span></div>
        </div>
        <div class="form-feedback"></div>
      </div>
    </div>

    <!-- Step 3: Preferences -->
    <div class="form-step" data-step="3">
      <div class="form-group">
        <label class="form-label">Notification Preferences</label>
        <div class="radio-group">
          <div class="radio-wrapper">
            <input type="radio" id="emailNotif" name="notifications" value="email" class="form-radio">
            <label for="emailNotif" class="radio-label">
              <span class="radio-custom"></span>
              Email notifications only
            </label>
          </div>
          <div class="radio-wrapper">
            <input type="radio" id="smsNotif" name="notifications" value="sms" class="form-radio">
            <label for="smsNotif" class="radio-label">
              <span class="radio-custom"></span>
              SMS notifications only
            </label>
          </div>
          <div class="radio-wrapper">
            <input type="radio" id="bothNotif" name="notifications" value="both" class="form-radio" checked>
            <label for="bothNotif" class="radio-label">
              <span class="radio-custom"></span>
              Both email and SMS
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- Step 4: Confirmation -->
    <div class="form-step" data-step="4">
      <div class="confirmation-content">
        <div class="success-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
          </svg>
        </div>
        <h3>Account Created Successfully!</h3>
        <p>Welcome to our platform. Your account has been created and you can now start using our services.</p>
      </div>
    </div>

    <!-- Navigation Buttons -->
    <div class="form-navigation">
      <button type="button" class="btn-secondary btn-prev" disabled>
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
        Previous
      </button>
      <button type="button" class="btn-primary btn-next">
        Next
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
        </svg>
      </button>
      <button type="submit" class="btn-primary btn-submit" style="display: none;">
        Create Account
      </button>
    </div>
  </form>
</div>

.form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Base Form Styles */
.interactive-form {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
}

.form-description {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Form Groups */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input Wrapper */
.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  outline: none;
}

.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:valid {
  border-color: #10b981;
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

.input-focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width 0.3s ease;
}

.form-input:focus + .input-focus-border {
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  transition: color 0.3s ease;
}

.input-icon svg {
  width: 20px;
  height: 20px;
}

.form-input:focus ~ .input-icon {
  color: #3b82f6;
}

/* Select Styles */
.select-wrapper {
  position: relative;
}

.form-select {
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: all 0.3s ease;
}

.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.select-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.select-icon svg {
  width: 20px;
  height: 20px;
}

.form-select:focus ~ .select-icon {
  transform: translateY(-50%) rotate(180deg);
  color: #3b82f6;
}

/* Textarea Styles */
.textarea-wrapper {
  position: relative;
}

.form-textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  outline: none;
  transition: all 0.3s ease;
}

.form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.character-count {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
  font-size: 0.75rem;
  color: #9ca3af;
  background: white;
  padding: 0.25rem;
}

/* File Upload */
.file-upload-wrapper {
  position: relative;
}

.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.file-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: #9ca3af;
}

.file-upload-icon svg {
  width: 100%;
  height: 100%;
}

.file-upload-title {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.file-upload-subtitle {
  display: block;
  font-size: 0.875rem;
  color: #9ca3af;
}

.file-list {
  margin-top: 1rem;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.file-icon {
  width: 24px;
  height: 24px;
  color: #6b7280;
}

.file-details {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

.file-size {
  font-size: 0.75rem;
  color: #9ca3af;
}

.file-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.file-remove:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Checkbox Styles */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.form-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.checkbox-icon {
  width: 14px;
  height: 14px;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.form-checkbox:checked + .checkbox-label .checkbox-custom {
  background: #3b82f6;
  border-color: #3b82f6;
}

.form-checkbox:checked + .checkbox-label .checkbox-icon {
  opacity: 1;
  transform: scale(1);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #374151;
}

.privacy-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

.privacy-link:hover {
  text-decoration: underline;
}

/* Radio Styles */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.radio-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.form-radio:checked + .radio-label .radio-custom {
  border-color: #3b82f6;
}

.form-radio:checked + .radio-label .radio-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

/* Password Toggle */
.password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.3s ease;
}

.password-toggle:hover {
  color: #6b7280;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* Password Strength */
.password-strength {
  margin-top: 0.5rem;
}

.strength-bar {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.strength-fill {
  height: 100%;
  width: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-fill.weak {
  width: 25%;
  background: #ef4444;
}

.strength-fill.fair {
  width: 50%;
  background: #f59e0b;
}

.strength-fill.good {
  width: 75%;
  background: #3b82f6;
}

.strength-fill.strong {
  width: 100%;
  background: #10b981;
}

.strength-text {
  font-size: 0.75rem;
  color: #6b7280;
}

.strength-level {
  font-weight: 600;
}

/* Form Feedback */
.form-feedback {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-feedback.error {
  color: #ef4444;
}

.form-feedback.success {
  color: #10b981;
}

.form-feedback.warning {
  color: #f59e0b;
}

.feedback-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Buttons */
.form-actions {
  margin-top: 2rem;
}

.btn-submit {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-text,
.btn-loading,
.btn-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-loading,
.btn-success {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(100%);
}

.btn-submit.loading .btn-text {
  opacity: 0;
  transform: translateY(-100%);
}

.btn-submit.loading .btn-loading {
  opacity: 1;
  transform: translateY(0);
}

.btn-submit.success .btn-text,
.btn-submit.success .btn-loading {
  opacity: 0;
  transform: translateY(-100%);
}

.btn-submit.success .btn-success {
  opacity: 1;
  transform: translateY(0);
}

.loading-spinner {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Multi-step Form */
.progress-bar {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  position: relative;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.progress-step.active .step-number {
  background: #3b82f6;
  color: white;
}

.progress-step.completed .step-number {
  background: #10b981;
  color: white;
}

.step-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  font-weight: 500;
}

.progress-step.active .step-label {
  color: #3b82f6;
  font-weight: 600;
}

.form-step {
  display: none;
  animation: fadeInSlide 0.3s ease;
}

.form-step.active {
  display: block;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary svg {
  width: 16px;
  height: 16px;
}

/* Confirmation Step */
.confirmation-content {
  text-align: center;
  padding: 2rem 0;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
}

.success-icon svg {
  width: 40px;
  height: 40px;
}

.confirmation-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1rem 0;
}

.confirmation-content p {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Dark Theme */
.dark .interactive-form {
  background: #1f2937;
  border-color: #374151;
}

.dark .form-title {
  color: white;
}

.dark .form-description {
  color: #d1d5db;
}

.dark .form-label {
  color: #e5e7eb;
}

.dark .form-input,
.dark .form-select,
.dark .form-textarea {
  background: #374151;
  border-color: #4b5563;
  color: white;
}

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .file-upload-area {
  border-color: #4b5563;
  background: #374151;
}

.dark .file-upload-area:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.dark .checkbox-custom,
.dark .radio-custom {
  border-color: #4b5563;
  background: #374151;
}

.dark .step-number {
  background: #374151;
  color: #d1d5db;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-container {
    padding: 1rem;
  }
  
  .interactive-form {
    padding: 1.5rem;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .form-title {
    font-size: 1.5rem;
  }
  
  .progress-bar {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .step-label {
    display: none;
  }
  
  .form-navigation {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .form-input {
    padding: 0.875rem 0.875rem 0.875rem 2.5rem;
  }
  
  .input-icon {
    left: 0.75rem;
  }
  
  .input-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .btn-submit {
    padding: 0.875rem 1.5rem;
  }
}

class InteractiveForms {
  constructor() {
    this.forms = document.querySelectorAll('.interactive-form');
    this.validationRules = {
      email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      phone: /^[\+]?[1-9][\d]{0,2}[\s\-]?[\(]?[\d]{1,3}[\)]?[\s\-]?[\d]{3,4}[\s\-]?[\d]{3,4}$/,
      password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
    };
    
    this.init();
  }

  init() {
    this.forms.forEach(form => {
      this.setupFormValidation(form);
      this.setupFileUpload(form);
      this.setupPasswordToggle(form);
      this.setupCharacterCount(form);
      this.setupMultiStep(form);
    });
  }

  setupFormValidation(form) {
    const inputs = form.querySelectorAll('.form-input, .form-select, .form-textarea');
    
    inputs.forEach(input => {
      // Real-time validation
      input.addEventListener('input', () => {
        this.validateField(input);
      });
      
      input.addEventListener('blur', () => {
        this.validateField(input);
      });
      
      // Username availability check
      if (input.name === 'username') {
        let debounceTimer;
        input.addEventListener('input', () => {
          clearTimeout(debounceTimer);
          debounceTimer = setTimeout(() => {
            this.checkUsernameAvailability(input);
          }, 500);
        });
      }
      
      // Password strength
      if (input.type === 'password') {
        input.addEventListener('input', () => {
          this.updatePasswordStrength(input);
        });
      }
    });
    
    // Form submission
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.handleFormSubmit(form);
    });
  }

  validateField(field) {
    const value = field.value.trim();
    const fieldName = field.name;
    const feedback = field.closest('.form-group').querySelector('.form-feedback');
    
    let isValid = true;
    let message = '';
    let type = 'success';
    
    // Required field validation
    if (field.hasAttribute('required') && !value) {
      isValid = false;
      message = 'This field is required';
      type = 'error';
    }
    
    // Email validation
    else if (field.type === 'email' && value && !this.validationRules.email.test(value)) {
      isValid = false;
      message = 'Please enter a valid email address';
      type = 'error';
    }
    
    // Phone validation
    else if (field.type === 'tel' && value && !this.validationRules.phone.test(value)) {
      isValid = false;
      message = 'Please enter a valid phone number';
      type = 'error';
    }
    
    // Password validation
    else if (field.type === 'password' && value && !this.validationRules.password.test(value)) {
      isValid = false;
      message = 'Password must be at least 8 characters with uppercase, lowercase, number and special character';
      type = 'error';
    }
    
    // Success message
    else if (value && field.checkValidity()) {
      message = 'Looks good!';
      type = 'success';
    }
    
    this.showFieldFeedback(feedback, message, type);
    
    // Update field styling
    field.classList.toggle('valid', isValid && value);
    field.classList.toggle('invalid', !isValid && value);
    
    return isValid;
  }

  showFieldFeedback(feedbackElement, message, type) {
    feedbackElement.className = `form-feedback ${type}`;
    
    const icon = this.getValidationIcon(type);
    feedbackElement.innerHTML = message ? `${icon}<span>${message}</span>` : '';
  }

  getValidationIcon(type) {
    const icons = {
      success: '<svg class="feedback-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>',
      error: '<svg class="feedback-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
      warning: '<svg class="feedback-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>'
    };
    return icons[type] || '';
  }

  async checkUsernameAvailability(input) {
    const username = input.value.trim();
    if (username.length < 3) return;
    
    const wrapper = input.closest('.input-wrapper');
    const validationIcon = wrapper.querySelector('.input-validation-icon');
    
    if (!validationIcon) {
      const icon = document.createElement('div');
      icon.className = 'input-validation-icon';
      wrapper.appendChild(icon);
    }
    
    // Simulate API call
    try {
      const isAvailable = await this.simulateUsernameCheck(username);
      const feedback = input.closest('.form-group').querySelector('.form-feedback');
      
      if (isAvailable) {
        this.showFieldFeedback(feedback, 'Username is available', 'success');
        input.classList.add('valid');
        input.classList.remove('invalid');
      } else {
        this.showFieldFeedback(feedback, 'Username is already taken', 'error');
        input.classList.add('invalid');
        input.classList.remove('valid');
      }
    } catch (error) {
      console.error('Username check failed:', error);
    }
  }

  simulateUsernameCheck(username) {
    return new Promise((resolve) => {
      setTimeout(() => {
        // Simulate some usernames being taken
        const takenUsernames = ['admin', 'user', 'test', 'demo'];
        resolve(!takenUsernames.includes(username.toLowerCase()));
      }, 1000);
    });
  }

  updatePasswordStrength(input) {
    const password = input.value;
    const strengthBar = input.closest('.form-group').querySelector('.strength-fill');
    const strengthText = input.closest('.form-group').querySelector('.strength-level');
    
    if (!strengthBar || !strengthText) return;
    
    const strength = this.calculatePasswordStrength(password);
    
    strengthBar.className = `strength-fill ${strength.level}`;
    strengthText.textContent = strength.text;
  }

  calculatePasswordStrength(password) {
    let score = 0;
    
    if (password.length >= 8) score++;
    if (/[a-z]/.test(password)) score++;
    if (/[A-Z]/.test(password)) score++;
    if (/\d/.test(password)) score++;
    if (/[@$!%*?&]/.test(password)) score++;
    
    const levels = {
      0: { level: 'weak', text: 'Very Weak' },
      1: { level: 'weak', text: 'Weak' },
      2: { level: 'fair', text: 'Fair' },
      3: { level: 'good', text: 'Good' },
      4: { level: 'strong', text: 'Strong' },
      5: { level: 'strong', text: 'Very Strong' }
    };
    
    return levels[score] || levels[0];
  }

  setupFileUpload(form) {
    const fileInputs = form.querySelectorAll('.file-input');
    
    fileInputs.forEach(input => {
      const uploadArea = input.closest('.file-upload-wrapper').querySelector('.file-upload-area');
      const fileList = input.closest('.file-upload-wrapper').querySelector('.file-list');
      
      // Drag and drop
      uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
      });
      
      uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('dragover');
      });
      
      uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = Array.from(e.dataTransfer.files);
        this.handleFileSelection(files, fileList);
      });
      
      // File selection
      input.addEventListener('change', (e) => {
        const files = Array.from(e.target.files);
        this.handleFileSelection(files, fileList);
      });
    });
  }

  handleFileSelection(files, fileList) {
    files.forEach(file => {
      if (this.validateFile(file)) {
        this.addFileToList(file, fileList);
      }
    });
  }

  validateFile(file) {
    const maxSize = 10 * 1024 * 1024; // 10MB
    const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png'];
    
    if (file.size > maxSize) {
      alert(`File ${file.name} is too large. Maximum size is 10MB.`);
      return false;
    }
    
    if (!allowedTypes.includes(file.type)) {
      alert(`File ${file.name} is not a supported format.`);
      return false;
    }
    
    return true;
  }

  addFileToList(file, fileList) {
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    
    fileItem.innerHTML = `
      <div class="file-info">
        <div class="file-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
          </svg>
        </div>
        <div class="file-details">
          <div class="file-name">${file.name}</div>
          <div class="file-size">${this.formatFileSize(file.size)}</div>
        </div>
      </div>
      <button type="button" class="file-remove" aria-label="Remove file">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </svg>
      </button>
    `;
    
    // Remove file functionality
    fileItem.querySelector('.file-remove').addEventListener('click', () => {
      fileItem.remove();
    });
    
    fileList.appendChild(fileItem);
  }

  formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }

  setupPasswordToggle(form) {
    const passwordToggles = form.querySelectorAll('.password-toggle');
    
    passwordToggles.forEach(toggle => {
      toggle.addEventListener('click', () => {
        const input = toggle.closest('.input-wrapper').querySelector('input');
        const eyeOpen = toggle.querySelector('.eye-open');
        const eyeClosed = toggle.querySelector('.eye-closed');
        
        if (input.type === 'password') {
          input.type = 'text';
          eyeOpen.style.display = 'none';
          eyeClosed.style.display = 'block';
        } else {
          input.type = 'password';
          eyeOpen.style.display = 'block';
          eyeClosed.style.display = 'none';
        }
      });
    });
  }

  setupCharacterCount(form) {
    const textareas = form.querySelectorAll('.form-textarea');
    
    textareas.forEach(textarea => {
      const counter = textarea.closest('.textarea-wrapper').querySelector('.current-count');
      const maxCount = textarea.closest('.textarea-wrapper').querySelector('.max-count');
      
      if (counter && maxCount) {
        const max = parseInt(maxCount.textContent);
        
        textarea.addEventListener('input', () => {
          const current = textarea.value.length;
          counter.textContent = current;
          
          // Update styling based on character count
          const percentage = (current / max) * 100;
          if (percentage > 90) {
            counter.style.color = '#ef4444';
          } else if (percentage > 75) {
            counter.style.color = '#f59e0b';
          } else {
            counter.style.color = '#9ca3af';
          }
        });
      }
    });
  }

  setupMultiStep(form) {
    if (!form.classList.contains('multi-step-form')) return;
    
    const steps = form.querySelectorAll('.form-step');
    const progressSteps = form.querySelectorAll('.progress-step');
    const prevBtn = form.querySelector('.btn-prev');
    const nextBtn = form.querySelector('.btn-next');
    const submitBtn = form.querySelector('.btn-submit');
    
    let currentStep = 1;
    const totalSteps = steps.length;
    
    // Navigation event listeners
    nextBtn.addEventListener('click', () => {
      if (this.validateCurrentStep(form, currentStep)) {
        this.goToStep(currentStep + 1, form);
      }
    });
    
    prevBtn.addEventListener('click', () => {
      this.goToStep(currentStep - 1, form);
    });
    
    // Update current step reference
    form.addEventListener('step-changed', (e) => {
      currentStep = e.detail.step;
    });
  }

  validateCurrentStep(form, step) {
    const currentStepElement = form.querySelector(`.form-step[data-step="${step}"]`);
    const inputs = currentStepElement.querySelectorAll('.form-input, .form-select, .form-textarea');
    
    let isValid = true;
    inputs.forEach(input => {
      if (!this.validateField(input)) {
        isValid = false;
      }
    });
    
    return isValid;
  }

  goToStep(step, form) {
    const steps = form.querySelectorAll('.form-step');
    const progressSteps = form.querySelectorAll('.progress-step');
    const prevBtn = form.querySelector('.btn-prev');
    const nextBtn = form.querySelector('.btn-next');
    const submitBtn = form.querySelector('.btn-submit');
    
    const totalSteps = steps.length;
    
    if (step < 1 || step > totalSteps) return;
    
    // Update step visibility
    steps.forEach((stepEl, index) => {
      stepEl.classList.toggle('active', index + 1 === step);
    });
    
    // Update progress
    progressSteps.forEach((progressStep, index) => {
      const stepNumber = index + 1;
      progressStep.classList.toggle('active', stepNumber === step);
      progressStep.classList.toggle('completed', stepNumber < step);
    });
    
    // Update navigation buttons
    prevBtn.disabled = step === 1;
    
    if (step === totalSteps) {
      nextBtn.style.display = 'none';
      submitBtn.style.display = 'flex';
    } else {
      nextBtn.style.display = 'flex';
      submitBtn.style.display = 'none';
    }
    
    // Dispatch step change event
    form.dispatchEvent(new CustomEvent('step-changed', {
      detail: { step }
    }));
  }

  async handleFormSubmit(form) {
    const submitBtn = form.querySelector('.btn-submit');
    const btnText = submitBtn.querySelector('.btn-text');
    
    // Validate all fields
    const inputs = form.querySelectorAll('.form-input, .form-select, .form-textarea');
    let isValid = true;
    
    inputs.forEach(input => {
      if (!this.validateField(input)) {
        isValid = false;
      }
    });
    
    if (!isValid) {
      this.showFormMessage(form, 'Please fix the errors above', 'error');
      return;
    }
    
    // Show loading state
    submitBtn.classList.add('loading');
    submitBtn.disabled = true;
    
    try {
      // Simulate form submission
      await this.submitFormData(form);
      
      // Show success state
      submitBtn.classList.remove('loading');
      submitBtn.classList.add('success');
      
      setTimeout(() => {
        this.showFormMessage(form, 'Form submitted successfully!', 'success');
        
        // Reset form after delay
        setTimeout(() => {
          this.resetForm(form);
        }, 2000);
      }, 1000);
      
    } catch (error) {
      console.error('Form submission failed:', error);
      submitBtn.classList.remove('loading');
      submitBtn.disabled = false;
      this.showFormMessage(form, 'Submission failed. Please try again.', 'error');
    }
  }

  async submitFormData(form) {
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    
    // Simulate API call
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // Simulate random success/failure for demo
        if (Math.random() > 0.1) {
          resolve(data);
        } else {
          reject(new Error('Network error'));
        }
      }, 2000);
    });
  }

  showFormMessage(form, message, type) {
    let messageEl = form.querySelector('.form-message');
    
    if (!messageEl) {
      messageEl = document.createElement('div');
      messageEl.className = 'form-message';
      form.insertBefore(messageEl, form.firstChild);
    }
    
    messageEl.className = `form-message ${type}`;
    messageEl.innerHTML = `
      ${this.getValidationIcon(type)}
      <span>${message}</span>
    `;
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
      messageEl.remove();
    }, 5000);
  }

  resetForm(form) {
    form.reset();
    
    // Reset validation states
    const inputs = form.querySelectorAll('.form-input, .form-select, .form-textarea');
    inputs.forEach(input => {
      input.classList.remove('valid', 'invalid');
      const feedback = input.closest('.form-group').querySelector('.form-feedback');
      if (feedback) feedback.innerHTML = '';
    });
    
    // Reset file uploads
    const fileLists = form.querySelectorAll('.file-list');
    fileLists.forEach(list => list.innerHTML = '');
    
    // Reset multi-step forms
    if (form.classList.contains('multi-step-form')) {
      this.goToStep(1, form);
    }
    
    // Reset submit button
    const submitBtn = form.querySelector('.btn-submit');
    if (submitBtn) {
      submitBtn.classList.remove('loading', 'success');
      submitBtn.disabled = false;
    }
    
    // Remove form messages
    const messages = form.querySelectorAll('.form-message');
    messages.forEach(msg => msg.remove());
  }

  // Public API methods
  validateForm(formId) {
    const form = document.getElementById(formId);
    if (!form) return false;
    
    const inputs = form.querySelectorAll('.form-input, .form-select, .form-textarea');
    let isValid = true;
    
    inputs.forEach(input => {
      if (!this.validateField(input)) {
        isValid = false;
      }
    });
    
    return isValid;
  }

  getFormData(formId) {
    const form = document.getElementById(formId);
    if (!form) return null;
    
    const formData = new FormData(form);
    return Object.fromEntries(formData.entries());
  }

  setFormData(formId, data) {
    const form = document.getElementById(formId);
    if (!form) return;
    
    Object.entries(data).forEach(([key, value]) => {
      const input = form.querySelector(`[name="${key}"]`);
      if (input) {
        input.value = value;
        this.validateField(input);
      }
    });
  }
}

// Initialize forms when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  new InteractiveForms();
});

// Export for module usage
if (typeof module !== 'undefined' && module.exports) {
  module.exports = InteractiveForms;
}