Astro Contact Form Setup

Forms and static Astro sites

Astro is built for static-first output. That's its strength — fast pages, minimal JavaScript, great SEO. But static sites can't process form submissions. The typical Astro advice is to switch to SSR mode, install a server adapter (Node, Vercel, Netlify), and write an API endpoint in src/pages/api/.

That's a lot of complexity for a contact form. You go from a simple static deploy to managing a server runtime, just to receive a "Hey, I liked your blog" message.

A form backend keeps your Astro site fully static. You point a plain HTML form at an external API, and the service handles email delivery, spam filtering, and submission storage. Optaristo is built for this — free during beta, no setup on your end.

Get your access key

1. Create a free account.
2. Create a form in the dashboard (e.g., "Astro Blog Contact").
3. Copy your access key.

Option 1: plain HTML form (zero JavaScript)

This is the simplest option. It uses a standard HTML form that submits with a full page navigation — no JavaScript at all:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Contact">
  <h1>Get in touch</h1>

  <form
    action="https://app.optaristo.com/api/submit"
    method="POST">

    <input type="hidden" name="access_key"
           value="YOUR_ACCESS_KEY" />
    <input type="hidden" name="_gotcha"
           style="display:none" />

    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Message</label>
    <textarea id="message" name="message"
              rows="5" required></textarea>

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

This works with output: 'static' (Astro's default). No adapter needed. The form submits as a standard POST, and the visitor sees a confirmation page from Optaristo.

Option 2: interactive form with client-side JS

If you want to show a success message without a page reload, add a <script> tag in your Astro component:

<!-- Same form as above, but with id -->
<form id="contact-form" ...>
  <!-- fields here -->
</form>
<p id="success" hidden>Thanks! We'll be in touch.</p>

<script>
  const form = document.getElementById('contact-form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(
      new FormData(form)
    );

    const res = await fetch(
      'https://app.optaristo.com/api/submit',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      }
    );

    if (res.ok) {
      form.hidden = true;
      document.getElementById('success').hidden = false;
    }
  });
</script>

Astro processes <script> tags and bundles them automatically. This adds a tiny amount of JavaScript — just enough to intercept the form submit and show a success message inline.

Option 3: React/Preact island

If you're already using React or Preact islands in your Astro project, you can use the same component from our React contact form guide. Just hydrate it with client:load:

---
import ContactForm from '../components/ContactForm';
---

<ContactForm client:load />

Use environment variables

To keep your access key out of the source code and swappable between environments, use Astro's built-in env support:

PUBLIC_OPTARISTO_KEY=your_access_key_here

Then reference it in your Astro component's frontmatter:

---
const key = import.meta.env.PUBLIC_OPTARISTO_KEY;
---

<input type="hidden" name="access_key" value={key} />

Frequently asked questions