Astro Quick Start

Integrate RizzForms with an Astro site. Astro is static-first, so a standard HTML form is the natural approach. No server-side code or JavaScript framework needed.

Overview

Astro generates static HTML by default, which pairs perfectly with RizzForms. Your form submits directly to RizzForms via a standard POST request. No build plugins, no client-side JavaScript, no CORS configuration.

HTML Form (Static)

Add a form to any .astro component. The form action points directly to your RizzForms endpoint.

---
// src/pages/contact.astro
const formToken = import.meta.env.PUBLIC_RIZZFORMS_TOKEN;
---

<html lang="en">
<head>
  <title>Contact</title>
</head>
<body>
  <h1>Contact Us</h1>

  <form action={`https://forms.rizzness.com/f/${formToken}`} method="POST">
    <!-- Honeypot: hidden from users, catches bots -->
    <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">

    <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"></textarea>

    <button type="submit">Send</button>
  </form>
</body>
</html>

This works on any hosting platform (Netlify, Vercel, Cloudflare Pages, GitHub Pages, S3) because it is plain HTML. No server runtime required.

SSR Mode

If you are using Astro with SSR (server-side rendering) via an adapter, you can handle the form submission server-side for additional validation or to keep your endpoint token private.

---
// src/pages/contact.astro (SSR mode)
let success = false;
let error = "";

if (Astro.request.method === "POST") {
  const formData = await Astro.request.formData();

  const response = await fetch(
    `https://forms.rizzness.com/json/${import.meta.env.RIZZFORMS_TOKEN}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: formData.get("name"),
        email: formData.get("email"),
        message: formData.get("message"),
        _hp: "",
      }),
    }
  );

  if (response.ok) {
    success = true;
  } else {
    error = "Submission failed. Please try again.";
  }
}
---

<html lang="en">
<head>
  <title>Contact</title>
</head>
<body>
  <h1>Contact Us</h1>

  {success ? (
    <p>Thank you! We'll be in touch.</p>
  ) : (
    <form method="POST">
      <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">

      {error && <p style="color:red">{error}</p>}

      <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"></textarea>

      <button type="submit">Send</button>
    </form>
  )}
</body>
</html>

Environment Variables

Add your endpoint token to .env:

# Exposed to client (used in static HTML form action)
PUBLIC_RIZZFORMS_TOKEN=your_endpoint_token

# Server-only (used in SSR mode)
RIZZFORMS_TOKEN=your_endpoint_token

Astro uses the PUBLIC_ prefix to expose variables to client-side code. Use the non-prefixed version for server-side only access in SSR mode.