Form Integration

Astro contact form with zero client JavaScript

Astro ships no client JavaScript by default, and this form doesn't need any. Point it at your Formbold endpoint and each submission is stored and emailed to you, even on a fully static build.

Astro Contact Form

What goes in my Astro component?

A plain HTML form in src/components/ContactForm.astro. Import it into a page with import ContactForm from "../components/ContactForm.astro", render <ContactForm />, and swap FORM_ID for your own.

astro.html
---
// src/components/ContactForm.astro
---

<form
  action="https://formbold.com/s/FORM_ID"
  method="POST"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Full Name -->
  <div class="flex flex-col gap-2">
    <label for="name" class="text-sm font-medium text-gray-700">
      Full Name<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Enter your full name"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>
</form>
How it works

Adding the form to an Astro site

Create the component, point it at Formbold, deploy. No adapter and no server output mode.

1

Create a form

Open the dashboard and click Create New Form. Free gives you 10 forms, so there is room for a separate test form.

2

Set the action

Copy https://formbold.com/s/FORM_ID from Form Setup into the action attribute. Keep method="POST".

3

Build and test

Run astro dev, submit once and check Submissions. The same form works after astro build on any static host.

Features

Why does this work on a static Astro site?

Because the browser posts straight to Formbold. Your site never handles the request, so the default static output is fine.

No server endpoint

No API route in src/pages and no SSR adapter. Keep deploying to Netlify, Vercel, Cloudflare Pages or GitHub Pages as you do now.

Automatic reCAPTCHA

This is a native HTML post, so Automatic reCAPTCHA works without keys. Turn it on next to Basic Spam Filter.

File uploads

Add enctype="multipart/form-data" and a file input. Available on Starter and higher.

Send people to /thanks

On Starter and higher, set a Redirect URL and visitors land on a thank-you page you build in src/pages.

FAQs

What else do Astro users ask?

Answers for static builds, MDX and inline success messages.

No. Formbold receives the post, so your site can stay fully static.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs