Forms — Findit HTML

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

Out of the box they run in demo mode: nothing is sent, the fields are logged in the browser console. Pick a destination before you publish.

Connect a form service

A static site has no server of its own, so submissions go to a form service or a webhook. All of these have a free tier:

Service	What it does	formEndpoint
Formspree	Emails you each submission	https://formspree.io/f/<form id>
Web3Forms	Emails you each submission, no account needed	https://api.web3forms.com/submit + your key in formAccessKey
Getform, Basin	Inbox, email, integrations	the form’s endpoint URL
Zapier, Make, n8n, Pipedream	Send submissions anywhere: Mailchimp, Google Sheets, Slack, a CRM	the webhook (“catch hook”) URL

1. Create a form at the service and copy its endpoint.
2. Open assets/js/config.js and paste it:

   window.siteConfig = {
     formEndpoint: "https://formspree.io/f/abcdwxyz",
     formAccessKey: "", // Web3Forms only
   };

3. Serve the folder (npx serve .), submit the Contact form, and check it arrived.
4. Upload config.js with the site.

Every page reads the same config.js, so all four forms switch at once.

What the service receives

Each field by its name, as multipart/form-data:

Form	Fields
Newsletter (every page)	email
Contact (contact.html)	name, email, phone, message
Schedule a tour (property/<slug>.html)	propertyId, propertyName, name, email, phone, message
Add property (add-property.html)	name, email, phone; propertyName, description, location, category, for, price, duration; features; size, bedrooms, bathrooms, floor, additionalSpace, furnishing, ceilingHeight, constructionYear, renovation; heating, airCondition, fireplace, elevator, ventilation, intercom, windowType, cableTv, wifi; message

plus form (newsletter, contact, tour or property) and subject (e.g. “New contact enquiry”) so you can tell them apart. A tour request arrives with the property it is about, so you know which listing the visitor wants to see.

Changing the fields

The fields are ordinary <input> (text fields and radio buttons) and <textarea> elements inside each <form>. Change a label or a placeholder in place; to add a field, copy an existing one and give it a new name. Add required to make one mandatory. The service receives whatever the form contains — no settings to update.

Testing before launch

• Submit all four forms on the live site with a real address, and reply to the test.
• The service must answer with a success status (2xx). If it doesn’t, the visitor sees “Something went wrong” and keeps what they typed — try it once by pasting a wrong endpoint into config.js on your local copy.

Spam and privacy

The honeypot stops the usual bots; the services above filter spam on their side as well. The endpoint is visible in the page source, which is how these services are designed to work. Add a line under the forms linking to a Privacy Policy (the page in legal/ is a demo text — replace it with your own), and a consent checkbox if you plan to add senders to a marketing list.