Forms — Findit Astro

The four forms — the newsletter in the footer, Contact, “Schedule a tour” on every property and “Add property” — work as soon as you run the site: they validate, show a sending state, say “Thank you”, keep what the visitor typed when something fails, and drop spam with a honeypot field.

Out of the box they run 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 forms now post to /api/forms/newsletter, /api/forms/contact, /api/forms/tour and /api/forms/property 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 forms ask for

Form	Where	Fields
Newsletter	Footer of every page	Email
Contact	/contact	Name, email, phone (all required), message
Schedule a tour	Every property page	The property’s reference and name (filled in for the visitor), name, email, phone (all required), message
Add property	/add-property	Your details (name, email, phone); the property (name, description, location, category, for sale or rent, price, duration); features; details (size, bedrooms, bathrooms, floor, additional space, furnishing, ceiling height, construction year, renovation); utilities (heating, air condition, fireplace, elevator, ventilation, intercom, window type, cable TV, Wi-Fi); a message

A tour request arrives with the property it is about, so your notification says which listing the visitor wants to see.

The labels, placeholders and which fields of “Add property” are required are content: they are in src/content/pages/add-property.json, contact.json and property.json (the tour block), with each field’s name, label, placeholder and required. A field arrives at your service under its name, so keep the names you already map somewhere.

What each form sends in server mode is listed in src/lib/forms/definitions.ts: the fields, and which are required — keep required in step with the flags in the copy, which the browser checks first. To add a field to Contact or to the tour form, add it in three places: the page content (its label), the section (ContactSection.astro, PropertyMainSection.astro) and the list in definitions.ts. For “Add property”, a field added to the personal, details or utility lists of add-property.json is picked up by definitions.ts on its own.

Testing before launch

• Submit all four forms 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, and form services filter spam on their side. Submissions go only where you point them. Add a line under the forms (their copy is in src/content/pages/) 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.