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');
  
  // Replace with your actual values (project UID and integration ID from dashboard)
  const MAILOO_API_URL = 'https://api.mailoo.app/api/v1';
  const PROJECT_UID = 'your-project-uid';
  const INTEGRATION_ID = 'your-form-integration-id';
  const API_KEY = 'your-api-key';

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Show loading state
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Sending...';
    submitBtn.disabled = true;
    
    try {
      // Collect form data (only email required; name optional; notification is built from template)
      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
        }
      };
      
      // Submit to Mailoo (project UID and integration ID required)
      const response = await fetch(`${MAILOO_API_URL}/webhooks/forms/${PROJECT_UID}/${INTEGRATION_ID}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-API-Key': API_KEY,
          'Origin': window.location.origin
        },
        body: JSON.stringify(formData)
      });
      
      const result = await response.json();
      
      if (response.ok && result.success) {
        // 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', 'Subscription form is not ready. Please try again later or contact support.');
      } else {
        // API error
        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 {
      // Reset button
      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';
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
      statusDiv.style.display = 'none';
    }, 5000);
  }
});
</script>