Do I need an Astro endpoint for contact form email?

No. You can keep the .astro component as plain markup and use Form Plume for email notifications, storage, spam filtering, uploads, integrations, and webhooks.

Should I add JavaScript to an Astro contact form?

Only when you want inline status. Start with a real form action, then add a small client script for progressive enhancement.

How do I redirect after an Astro form submit?

Add a hidden _redirect field with a root-relative Astro route like /thanks or an absolute URL.

Can Astro forms upload files through Form Plume?

Yes. Add enctype="multipart/form-data" and a named file input. Form Plume stores the file and keeps the submission in your dashboard.

Does Form Plume work with Astro?

Yes. Form Plume gives you one endpoint that works from your Astro site. Start with the quickstart docs, then drop the endpoint into your form.

Where do Astro form submissions go in Form Plume?

Submissions are stored in your Form Plume dashboard, sent to your email, and can trigger integrations like webhooks, Slack, Discord, Google Sheets, Mailchimp, and ActiveCampaign. See the feature overview for the full flow.

Can I try Form Plume before wiring it into my Astro site?

Yes. You can create an endpoint on the free plan, test it from localhost, preview, or a staging URL, and upgrade only when your form volume or team needs grow. Compare limits on pricing or ask a question on the contact page.

New:Build with AI agents

Astro contact forms
for static sites.

Keep your Astro pages static and fast. Form Plume gives every contact form a hosted backend for email, submissions, spam protection, files, integrations, and webhooks.

Free foreverNo credit cardAstro endpoint ready in under a minute

ContactForm.astro

---
const endpoint = "PASTE_YOUR_FORM_PLUME_ENDPOINT_HERE";
---

<form action={endpoint} method="POST">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button>Send message</button>
</form>

The full guide

A contact form backend that fits Astro.

Use static form actions first, then add a tiny script only when inline confirmation improves the page.

1
Create your Form Plume accountStart free and give your Astro form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
2
Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like https://api.formplume.com/f/your-slug
3
Connect it inside AstroUse a real form action in your .astro component, then add a small client script only if you want inline status. Send one test submission from the real Astro app or preview environment and confirm it reaches Form Plume.

You can use this AI prompt to hand the platform-specific wiring to an assistant without accidentally creating a backend.

You are helping me integrate a Astro contact form with Form Plume.

Important:
- Do not create a Form Plume account or form for me.
- If I have not provided a Form Plume endpoint yet, stop and ask me for it.
- Tell me to get the endpoint by signing up at https://formplume.com/signup, creating a form, copying the endpoint URL, and pasting it back into this chat.
- Only update code after I provide the endpoint or explicitly confirm the placeholder should stay.

FORM_PLUME_ENDPOINT="PASTE_YOUR_FORM_PLUME_ENDPOINT_HERE"

After the endpoint is available:
- Set the form action or submission target to FORM_PLUME_ENDPOINT.
- Use method="POST" for a plain HTML form.
- Do not add a custom backend, database table, SMTP client, PHP mail handler, serverless function, or email provider.
- Preserve the existing visual styling unless I ask you to improve it.
- Make sure every input, textarea, and select that should be submitted has a name attribute.
- Use clear field names such as name, email, message, company, phone, subject, budget, page, source, and attachment.
- If the form includes files, use enctype="multipart/form-data".
- If I want a custom success page, add a hidden _redirect field with the URL or path I provide.
- Follow this implementation guidance: prefer static .astro markup with a form action, then add a small client-side fetch enhancement only when needed.
- Preserve the existing component, template, or page styling unless I ask you to improve it.
- Keep labels, validation, pending states, success states, and error states accessible.
- Use FormData when the form includes files or may add files later.

After implementation, tell me exactly which file or editor area changed, where the endpoint is configured, and how to test one real submission.

Static Astro form

Astro is excellent for content-heavy sites, and a contact form can stay static. Point the form at Form Plume and Astro does not need an API route.

---
const endpoint = "PASTE_YOUR_FORM_PLUME_ENDPOINT_HERE";
---
 
<form action={endpoint} method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />
 
  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required />
 
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>
 
  <button type="submit">Send message</button>
</form>

The deployed page can be static while Form Plume handles email notifications, stored submissions, spam filtering, file uploads, integrations, and webhooks.

Add a thank-you route

Astro sites often use a dedicated success page. Add _redirect when you want Form Plume to send successful visitors there.

<input type="hidden" name="_redirect" value="/thanks" />

Keep the thank-you page in Astro so it can match the rest of the site and explain when the visitor should expect a reply.

Progressive enhancement in Astro

Use a tiny script when you want inline confirmation. The form still works when scripts are blocked.

<form id="contact" action={endpoint} method="POST">
  <!-- fields -->
  <button type="submit">Send message</button>
  <p id="contact-status" role="status"></p>
</form>
 
<script>
  const form = document.querySelector("#contact");
  const status = document.querySelector("#contact-status");
 
  form?.addEventListener("submit", async (event) => {
    event.preventDefault();
    status.textContent = "Sending...";
 
    const response = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
 
    status.textContent = response.ok
      ? "Thanks, we got your message."
      : "Please try again.";
  });
</script>

Astro environment notes

Only expose values to the browser when they are safe to be public. A Form Plume endpoint is public by design, but email provider keys, webhook secrets, and database credentials should never appear in Astro client code.

If you use import.meta.env.PUBLIC_FORM_PLUME_ENDPOINT, remember that PUBLIC_ values are included in the client bundle.

You usually do not need Astro server endpoints for contact forms. Let the static page submit to Form Plume and keep your deployment simple.

Files, spam, and integrations

For uploads, add enctype="multipart/form-data" and an input named attachment.

For spam protection, start with Form Plume defaults. Add stronger checks only when the form starts attracting targeted abuse.

For operations, connect Form Plume to Slack, Discord, Google Sheets, Mailchimp, ActiveCampaign, or a signed webhook so the Astro site does not have to know about every downstream tool.

Primary sources

FAQ

Astro form questions
before publish.

Yes. A static Astro page can post directly to a Form Plume endpoint. Form Plume handles the backend tasks after the browser submits the form.

One line. Zero backend.

The form backend you don’t have to build.

Free foreverNo credit cardSet up in under a minute

Astro contact forms for static sites.