Astro · Contact

Astro Contact Form
Template

Collect a visitor’s name, email address and message in one short form. Use it on a portfolio, business website or product contact page, then review each enquiry in your SiteBackend inbox.

Responsive stylingSpam honeypot includedFree to copy and customize

Try the template Setup instructions

Make it yours

The everyday contact form

Try the form and take the Astro code.

Astro

Interactive demo · submissions stay in this preview

Set up this template in Astro

Astro renders the component to HTML at build time. Its native form sends a POST from the visitor’s browser to SiteBackend, so static deployment works without an Astro Action or an API endpoint in your project.

1. Create your SiteBackend form
Create a site and a form in your dashboard. Copy the form endpoint and replace YOUR_FORM_ID in the downloaded component.

2. Add the .astro component

Save the download as src/components/WorkflowForm.astro. The frontmatter and scoped style block are included. No integration, client directive or server adapter is needed.

Full component: src/components/WorkflowForm.astro

---
// Replace YOUR_FORM_ID with the ID from your dashboard.
---

<form class="sb-form" action="https://api.sitebackend.com/forms/YOUR_FORM_ID" method="POST">
  <h2>Let’s talk.</h2>
  <p>Have a question or an idea? We’d love to hear it.</p>
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" placeholder="Alex Morgan" required>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" placeholder="[email protected]" required>
  <label for="message">What’s on your mind?</label>
  <textarea id="message" name="message" placeholder="Tell us a little about it…" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send message</button>
</form>

<style>
.sb-form { max-width: 440px; padding: 32px; margin: 24px auto; font-family: system-ui, sans-serif; color: #0b0a16; background: #fff; border: 1px solid #e7e5f0; border-radius: 20px; }
.sb-form h2 { font-size: 28px; margin: 0 0 8px; }
.sb-form p { color: #6b6a80; line-height: 1.6; }
.sb-form label { display: block; font-size: 14px; font-weight: 600; margin-top: 20px; }
.sb-form input, .sb-form textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #e7e5f0; border-radius: 8px; font: inherit; }
.sb-form textarea { min-height: 110px; resize: vertical; }
.sb-form button { width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 8px; background: #6d3fe0; color: #fff; font: inherit; cursor: pointer; }
.sb-form :focus-visible { outline: 2px solid #6d3fe0; outline-offset: 3px; }
</style>

3. Use the component on your page
Create src/pages/contact-form.astro, or import the component into an existing page. Adjust the relative import path if your folders differ.
src/pages/contact-form.astro
```
---
import WorkflowForm from "../components/WorkflowForm.astro";
---

<WorkflowForm />
```
4. Connect notifications and test a submission
Enable email notifications in your form settings if you want an alert for each submission. If you restrict allowed origins, include your production URL and local development origin (typically http://localhost:4321). Submit from your own site and confirm it appears in the dashboard. The preview above demonstrates the form without sending data.

Customizing the Astro implementation

Keep styling in the component’s scoped style block. If you add interactive behavior later, a small browser script can submit FormData with fetch; you do not need a React island just to send a form.

Astro integration guide Submit without a page reload

What this form collects

name identifies the person contacting you.
email gives you an address for your reply and associates the submission with a contact.
message captures the question or enquiry without a fixed length in the interface.

Make it fit your workflow

Replace the heading and helper text with your expected response time.
Add a named subject field if enquiries need extra context. SiteBackend stores named fields with the submission.
Configure a custom thank-you redirect in your form settings, and enable email notifications to hear about new messages.

The supplied form uses a native POST and navigates to the endpoint’s thank-you response or your configured redirect. To keep visitors on the same page, use the JavaScript fetch guide and add explicit sending, success and error states.

More Astro templates

Astro Project Enquiry Template

Collect project briefs on an Astro agency website with a static enquiry form, budget field, scoped styling and a hosted SiteBackend inbox.

Astro Waitlist Template

Add a waitlist to an Astro launch page with a static name and email form, scoped CSS and SiteBackend submission storage and CSV export.

All Astro templates

Astro Contact FormTemplate