Forms — Kalme Astro

The Contact form works as soon as you run the site: it checks the required fields, shows a sending state, says “Thank you”, keeps what the visitor typed when something fails, and drops spam with a hidden honeypot field.

Out of the box it runs in demo mode: nothing is sent, the fields are logged in the browser console. Fine while you build — pick a destination before you publish.

Choose a mode

You want	Mode	Hosting
Submissions by email, with no server to run	Static — a form service (Formspree, Web3Forms, Getform, Basin)	Any static host
Submissions in a CRM, a spreadsheet, Slack…	Static — a webhook (Zapier, Make, n8n, Pipedream)	Any static host
Mailchimp or Resend directly, no third party	Server — the site’s own route	A host with an Astro adapter

Most sites want static mode: it keeps the site 100 % static and takes two minutes.

Static mode in two minutes

1. Create a form at your service and copy its endpoint URL (Formspree: https://formspree.io/f/<id>).
2. Copy the example settings and paste the URL:

   cp .env.example .env

   PUBLIC_FORM_ENDPOINT=https://formspree.io/f/abcdwxyz

   Web3Forms also needs PUBLIC_FORM_ACCESS_KEY.
3. Restart npm run dev, send a test submission, and check it arrived.
4. Set the same variable in your host’s dashboard (or keep .env if you build locally) — the value is baked into the pages at build time, so rebuild after changing it.

Server mode

For Mailchimp or Resend without a third-party service:

1. Add the adapter for your host: npx astro add vercel (or netlify, node, cloudflare).
2. Set PUBLIC_FORM_MODE=server and choose where submissions go with FORM_PROVIDER (console, webhook, mailchimp, resend, or several comma-separated), plus that provider’s keys from .env.example.
3. The form now posts to /api/forms/contact on your own site. Every other page stays static.

Every detail — what each service needs, the fields sent, Mailchimp consent settings, writing your own provider — is in Forms reference.

What the form asks for

Field	Name it arrives under	Required
First Name	firstName	yes
Last Name	lastName
Email	email	yes
Phone Number	phone
Services (one choice)	service
Message	message

Every submission also carries form (contact) and subject (“New contact form submission”). The service choices are the titles of your services (src/content/collections/services.json), so a new service appears in the form by itself. In server mode, Resend puts the sender’s first and last name in the email’s subject, and Mailchimp stores them as FNAME and LNAME.

The labels, placeholders, button texts (“Submit”, “Thank you”, “Something went wrong”) and the notification title are content: form in src/content/pages/contact.json, with each field’s name, label and placeholder. A field arrives at your service under its name, so keep the names you already map somewhere.

What the form sends in server mode is listed in src/lib/forms/definitions.ts: the fields, and which are required. To add a field, add it in three places: the page content (its label), the section (src/components/sections/ContactSection.astro) and the list in definitions.ts. To make a field required, add required to it in ContactSection.astro (the browser checks it first) and its name to required in definitions.ts.

Testing before launch

• Submit the form on the live site with a real address, and reply to the test.
• Check the “Something went wrong” path once: point the endpoint at a wrong URL in a preview build, submit, and confirm the visitor’s text is still there.

Spam and privacy

The honeypot stops the usual bots (a bot that fills the hidden field is shown “Thank you” and nothing is sent), and form services filter spam on their side. Submissions go only where you point them. Add a line under the form (its copy is in src/content/pages/contact.json) linking to the Privacy Policy — its text is in src/content/collections/legal.json and is a demo to replace with your own — and a consent checkbox if you plan to add senders to a marketing audience.