Form Integration

Contact Form for Astro Websites

Build and launch Astro contact forms effortlessly—no backend or JavaScript required. Use FormBold’s API endpoint to collect form submissions instantly in your static Astro projects.

Astro Contact Form

Astro Contact Form with Backend API

Create fully functional contact forms in your Astro sites without writing any backend logic. With FormBold, setup is quick and seamless. Just copy your unique endpoint URL and paste it into your form's action attribute—no extra tools or servers needed

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

See How It Works

Setting up your Astro form with FormBold is straightforward and fast. No backend setup or server scripting required.

1

Create an Account

Sign up and generate your unique API endpoint on FormBold.

2

Paste the Action URL

Use the example HTML form and replace the action URL with your FormBold endpoint.

3

Start Receiving Submissions

Submissions will instantly appear on your dashboard, inbox, Slack, Notion, or any other connected apps.

Features

Key Features of FormBold

FormBold delivers powerful backend functionality for your Astro forms—without the need for coding or configuration.

No Backend Required

Perfect for Astro’s static architecture—no server, backend, or JavaScript needed.

Instant Email Notifications

Receive form submissions instantly via email or integrated third-party apps.

Spam Protection Built-In

Includes server-side validation and Google reCAPTCHA support to block spambots.

File Upload Support

Let users upload files and receive auto-generated CDN download links.

Connect to 5+ Apps

Integrate with Slack, Notion, Google Sheets, Telegram, and more—no-code required.

FAQ's

Frequently Asked Questions

Answers to common questions about using FormBold with Astro:

Just use the FormBold endpoint in your form’s action and set the method to POST—no JavaScript or backend required.