Neem contact met ons op

Voorbeeldcode

<!-- Accessible Contact Form Implementation -->
<form action="/contact" method="POST" aria-labelledby="contact-heading" novalidate>
  <h2 id="contact-heading">Contact Form</h2>

  <div class="form-group">
    <label for="name">Full Name <span aria-label="required">*</span></label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-describedby="name-help name-error"
      autocomplete="name"
    >
    <div id="name-help" class="help-text">Please enter your full name</div>
    <div id="name-error" class="error-text" aria-live="polite"></div>
  </div>

  <div class="form-group">
    <label for="email">Email Address <span aria-label="required">*</span></label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-describedby="email-help email-error"
      autocomplete="email"
    >
    <div id="email-help" class="help-text">We'll never share your email</div>
    <div id="email-error" class="error-text" aria-live="polite"></div>
  </div>

  <div class="form-group">
    <label for="message">Message <span aria-label="required">*</span></label>
    <textarea
      id="message"
      name="message"
      required
      rows="5"
      aria-describedby="message-help message-error"
    ></textarea>
    <div id="message-help" class="help-text">Please describe your inquiry</div>
    <div id="message-error" class="error-text" aria-live="polite"></div>
  </div>

  <button type="submit" class="submit-btn">
    <span class="btn-text">Send Message</span>
    <span class="btn-spinner" aria-hidden="true"></span>
  </button>
</form>

// Contact Form Enhancement and Validation
class ContactForm {
  constructor(form) {
    this.form = form;
    this.submitButton = form.querySelector('.submit-btn');
    this.init();
  }

  init() {
    this.addEventListeners();
    this.setupValidation();
    this.enableProgressiveEnhancement();
  }

  addEventListeners() {
    this.form.addEventListener('submit', this.handleSubmit.bind(this));

    // Real-time validation
    this.form.querySelectorAll('input, textarea').forEach(field => {
      field.addEventListener('blur', () => this.validateField(field));
      field.addEventListener('input', () => this.clearError(field));
    });
  }

  async handleSubmit(event) {
    event.preventDefault();

    if (!this.validateForm()) {
      return;
    }

    this.setSubmitting(true);

    try {
      const formData = new FormData(this.form);
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });

      if (response.ok) {
        this.showSuccess('Message sent successfully!');
        this.form.reset();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      this.showError('Failed to send message. Please try again.');
    } finally {
      this.setSubmitting(false);
    }
  }

  validateField(field) {
    const value = field.value.trim();
    const errorElement = document.getElementById(`${field.name}-error`);

    if (field.required && !value) {
      this.setFieldError(field, errorElement, 'This field is required');
      return false;
    }

    if (field.type === 'email' && value && !this.isValidEmail(value)) {
      this.setFieldError(field, errorElement, 'Please enter a valid email address');
      return false;
    }

    this.clearFieldError(field, errorElement);
    return true;
  }

  setSubmitting(isSubmitting) {
    this.submitButton.disabled = isSubmitting;
    this.submitButton.classList.toggle('submitting', isSubmitting);
  }
}

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

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

input, textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.error-text {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.help-text {
  color: #718096;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.submit-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

# Contact Form Security and Testing
npm install express-validator helmet express-rate-limit
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
curl -X POST -d "name=Test&email=test@example.com" /api/contact