Astro Forms

Astro is designed to create lightning-fast, content-driven websites. By default, Astro websites are pre-rendered statically (SSG). Because static pages do not have a server backend to process form submissions, you can use Lucid Forms to handle the backend without configuring SSR adapters or custom server endpoints.

1. Simple HTML Submission (Standard)

The easiest way to submit forms in Astro is a standard HTML POST request. This will redirect the user to the default Lucid Forms success page (or your custom redirect URL if you are on the Pro Plan).

Create a file named src/components/ContactForm.astro:

---
// You can define variables or props here if needed
---
<form action="https://api.lucidforms.co/f/{your-form-id}" method="POST">
  <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>

  <!-- Honeypot Bot Trap -->
  <div style="display: none;">
    <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" />
  </div>

  <button type="submit">Send Message</button>
</form>

2. Asynchronous AJAX Submission (Astro Script)

If you want to keep visitors on your Astro site without page redirection, you can add a client-side <script> tag inside your Astro component to handle submissions asynchronously.

---
---
<div class="form-wrapper">
  <div id="success-alert" style="display: none; color: green; margin-bottom: 10px;">
    ✓ Thank you! Your message was sent successfully.
  </div>
  <div id="error-alert" style="display: none; color: red; margin-bottom: 10px;">
    ✗ Something went wrong. Please try again.
  </div>

  <form id="contact-form">
    <!-- Honeypot -->
    <input type="text" name="_honeypot" style="display: none;" tabindex="-1" autocomplete="off" />

    <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" id="submit-btn">Send Message</button>
  </form>
</div>

<script>
  const form = document.getElementById('contact-form') as HTMLFormElement;
  const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
  const successAlert = document.getElementById('success-alert') as HTMLDivElement;
  const errorAlert = document.getElementById('error-alert') as HTMLDivElement;

  form?.addEventListener('submit', async (e) => {
    e.preventDefault();

    // Disable button during loading
    submitBtn.disabled = true;
    submitBtn.innerText = 'Sending...';
    successAlert.style.display = 'none';
    errorAlert.style.display = 'none';

    const formData = new FormData(form);

    // Bot honeypot check client-side (optional check)
    if (formData.get('_honeypot')) {
      successAlert.style.display = 'block';
      form.reset();
      submitBtn.disabled = false;
      submitBtn.innerText = 'Send Message';
      return;
    }

    try {
      const response = await fetch('https://api.lucidforms.co/f/{your-form-id}', {
        method: 'POST',
        headers: {
          'Accept': 'application/json'
        },
        body: formData
      });

      if (response.ok) {
        successAlert.style.display = 'block';
        form.reset();
      } else {
        errorAlert.style.display = 'block';
      }
    } catch (error) {
      errorAlert.style.display = 'block';
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerText = 'Send Message';
    }
  });
</script>

3. Best Practices for Astro

Astro Island Hydration: If you are importing React, Vue, or Svelte form components into your Astro project, make sure to add the client:load or client:visible directives so the component’s client-side JavaScript is hydrated.
```
---
import ReactContactForm from '../components/ReactContactForm.tsx';
---

<ReactContactForm client:load />
```
Static Hosting Friendly: Since Lucid Forms endpoints process data via standard POST endpoints, your Astro site can remain 100% static. You can deploy to free static hosting providers like Netlify, Vercel, Cloudflare Pages, or GitHub Pages.