Website Forms Integration

<form id="mailoo-contact-form" class="space-y-4">
  <div>
    <label for="name" class="block text-sm font-medium">Name *</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      required 
      maxlength="100"
      class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
    />
  </div>

  <div>
    <label for="email" class="block text-sm font-medium">Email *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      required
      class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
    />
  </div>

  <div>
    <label for="subject" class="block text-sm font-medium">Subject</label>
    <input 
      type="text" 
      id="subject" 
      name="subject" 
      maxlength="200"
      class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
    />
  </div>

  <div>
    <label for="message" class="block text-sm font-medium">Message *</label>
    <textarea 
      id="message" 
      name="message" 
      required 
      maxlength="5000"
      rows="5"
      class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
    ></textarea>
  </div>

  <button 
    type="submit" 
    class="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
  >
    Send Message
  </button>
</form>

<div id="mailoo-status" style="display: none;" class="mt-4 p-3 rounded-md">
  <span id="mailoo-status-text"></span>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('mailoo-contact-form');
  const statusDiv = document.getElementById('mailoo-status');
  const statusText = document.getElementById('mailoo-status-text');
  // Your backend route — same origin, no API key in the page
  const YOUR_SUBMIT_URL = '/api/contact/submit';

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Sending...';
    submitBtn.disabled = true;
    try {
      const formData = {
        email: form.email.value.trim(),
        name: form.name.value.trim() || undefined,
        source: window.location.href,
        metadata: {
          timestamp: new Date().toISOString(),
          userAgent: navigator.userAgent,
          referrer: document.referrer
        }
      };
      const response = await fetch(YOUR_SUBMIT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      const result = await response.json();
      if (response.ok && result.success) {
        showStatus('success', 'Message sent successfully! We\'ll get back to you soon.');
        form.reset();
      } else if (response.status === 503 && result.message?.includes('not ready')) {
        showStatus('error', 'Form is not ready. Please try again later or contact support.');
      } else {
        throw new Error(result.message || 'Failed to send message');
      }
    } catch (error) {
      console.error('Form submission error:', error);
      showStatus('error', 'Failed to send message. Please try again or contact us directly.');
    } finally {
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
    }
  });
  function showStatus(type, message) {
    statusText.textContent = message;
    statusDiv.className = 'mt-4 p-3 rounded-md ' + (
      type === 'success'
        ? 'bg-green-100 text-green-800 border border-green-200'
        : 'bg-red-100 text-red-800 border border-red-200'
    );
    statusDiv.style.display = 'block';
    setTimeout(function() { statusDiv.style.display = 'none'; }, 5000);
  }
});
</script>