Astro Integration Guide

npm create astro@latest my-staticbox-app
cd my-staticbox-app
npm install
npm run dev

---
// components/ContactForm.astro
---

<form id="contact-form">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <button type="submit">Send Message</button>
  <div id="form-status"></div>
</form>

<script>
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');
  
  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(form);
    const button = form.querySelector('button[type="submit"]');
    
    button.disabled = true;
    button.textContent = 'Sending...';
    status.textContent = '';
    
    try {
      const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        status.innerHTML = '<p style="color: green;">Thank you! Your message has been sent.</p>';
        form.reset();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      status.innerHTML = '<p style="color: red;">Error sending message. Please try again.</p>';
    } finally {
      button.disabled = false;
      button.textContent = 'Send Message';
    }
  });
</script>

<style>
  form {
    max-width: 500px;
    margin: 0 auto;
  }
  
  div {
    margin-bottom: 1rem;
  }
  
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
  }
  
  input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button {
    background: #4f46e5;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

---
// src/pages/contact.astro
import ContactForm from '../components/ContactForm.astro';
import Layout from '../layouts/Layout.astro';
---

<Layout title="Contact Us">
  <main>
    <h1>Contact Us</h1>
    <ContactForm />
  </main>
</Layout>

// Install React integration
npm astro add react

// components/ContactFormReact.tsx
import { useState } from 'react';

export default function ContactFormReact() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    const formData = new FormData(e.target as HTMLFormElement);
    
    try {
      const response = await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        setIsSubmitted(true);
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isSubmitted) {
    return <div>Thank you! Your message has been sent.</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

// Use in Astro page with client directive
---
import ContactFormReact from '../components/ContactFormReact.tsx';
---

<ContactFormReact client:load />