Forms

The Contact form and the job application form 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 both forms switch at once.

What the service receives

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

Form	Fields
Contact (contact.html)	firstName, lastName, email, phone, services (once per ticked option), message
Application (careers/<role>.html)	firstName, lastName, email, phone, position, linkedin, otherSocial, website, message

plus form (contact or application) and subject (e.g. “New contact enquiry”) so you can tell them apart.

Changing the fields

The fields are ordinary <input>, <textarea> and checkbox 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.

The service checkboxes on the Contact form are what visitors can pick; update them to match your services.

Testing before launch

• Submit both 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 form linking to a privacy page of your own, and a consent checkbox if you plan to add senders to a marketing list.