Forms — Findit Next.js

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, submissions are written to the server log (FORM_PROVIDER=console) — fine while you build, useless once you publish. Pick a destination before launch.

The quickest way to receive submissions

1. Copy the example settings:

   cp .env.example .env.local

2. Choose one:

   You want	Set
   An email for every submission	FORM_PROVIDER=resend + RESEND_API_KEY, FORM_EMAIL_TO, FORM_EMAIL_FROM
   It in your CRM, Slack, a spreadsheet…	FORM_PROVIDER=webhook + FORM_WEBHOOK_URL (Zapier, Make, n8n, Formspree, your own API)
   The sender in a Mailchimp audience	FORM_PROVIDER=mailchimp + MAILCHIMP_API_KEY, MAILCHIMP_AUDIENCE_ID

   Several at once work: FORM_PROVIDER=resend,mailchimp.

3. Restart npm run dev and send a test submission.

4. Put the same variables in your host’s dashboard before deploying — .env.local is not uploaded.

Details for each provider, the webhook payload, Mailchimp consent settings and how to write your own provider: 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.ts, contact.ts and property.ts (the tour block), with each field’s name, label, placeholder and required. A field arrives at your provider under its name, so keep the names you already map somewhere.

What each form sends is decided in src/lib/actions.ts: one function per form lists the fields and which are required. To add a field to Contact or to the tour form, add it in three places — the page content (its label), the form component (ContactSection, PropertyMainSection) and the list in actions.ts. For “Add property”, a field added to the personal, details or utility lists of add-property.ts is picked up by actions.ts on its own.

Testing before launch

• Submit all four forms on your own site after deploying, with a real address.
• Check the destination (inbox, spreadsheet, audience) and reply to the test.
• Try a failure on purpose: set a wrong API key, submit, and confirm the visitor sees “Something went wrong” and their text is still there.

Spam

The honeypot stops the usual bots. If you start getting spam anyway, put a service in front through the webhook provider (Formspree, Web3Forms and Basin all include spam filtering), or add a captcha to the form component.

Privacy

Submissions go only where you point them; nothing is sent anywhere else. Most countries expect you to say what happens to the data people send you, so 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.ts and is a demo to replace with your own. Keep a consent checkbox there if you plan to add senders to a marketing audience.