ASTRO Integration

Overview

Deploy serverless forms on Astro using native HTML form endpoints or dynamic client-side scripts.

Build with AI (LLM Prompt)

promptprompt

Generate a clean Astro component featuring a contact form styled with Tailwind.
Use vanilla JS in a <script> tag to submit via fetch to:
https://voieform.com/f/<YOUR-FORM-API-KEY-HERE>

What you'll get out of the box:

Works with Static Site Generation (SSG) & SSR

Zero client-side JS overhead option (Direct POST)

Asynchronous state feedback utilizing vanilla fetch() API

Supports Astro Islands (React, Vue, Svelte integrations)

Setup instructions

bashbash

# No installation required. You can submit directly using HTML form actions!

Code Example

javascriptjavascript

---
// src/components/ContactForm.astro
---
<form id="contact-form" class="space-y-4 max-w-md">
  <div>
    <label class="block text-sm font-semibold">Email Address</label>
    <input name="email" type="email" required class="w-full border p-2 rounded" />
  </div>
  <div>
    <label class="block text-sm font-semibold">Message</label>
    <textarea name="message" required class="w-full border p-2 rounded"></textarea>
  </div>
  <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Submit</button>
  <p id="form-status" class="text-sm mt-2 hidden"></p>
</form>

<script>
  const form = document.getElementById('contact-form') as HTMLFormElement;
  const status = document.getElementById('form-status')!;

  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(form);
    
    status.textContent = 'Sending...';
    status.className = 'text-sm mt-2 text-slate-400';
    status.classList.remove('hidden');

    try {
      const response = await fetch('https://voieform.com/f/YOUR_FORM_API_KEY', {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' }
      });
      if (response.ok) {
        status.textContent = 'Thank you for your submission!';
        status.className = 'text-sm mt-2 text-emerald-500 font-bold';
        form.reset();
      } else {
        status.textContent = 'Error sending form. Please try again.';
        status.className = 'text-sm mt-2 text-red-500';
      }
    } catch {
      status.textContent = 'Connection error.';
      status.className = 'text-sm mt-2 text-red-500';
    }
  });
</script>

Need help?

Contact Support