Forms — Titen HTML

Titen has three forms:

• “Let’s Work Together” at the end of Projects, the category pages and every service page;
• the form on the Contact page;
• the newsletter sign-up in the footer.

Each one checks the required fields, shows a spinner while sending, says “Thank you”, keeps what the visitor typed when something fails, and drops spam with a hidden honeypot field.

Out of the box they run in demo mode: nothing is sent, and 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, and your key in formAccessKey
Getform, Basin	Inbox, email, integrations	The form’s endpoint URL
Zapier, Make, n8n, Pipedream	Send submissions anywhere: Mailchimp (a good fit for the newsletter), 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 each form, and check that the submissions arrived.

4. Upload config.js with the site.

All three forms post to that endpoint; the form and subject fields tell them apart.

What the service receives

Each field by its name, as multipart/form-data. The project form and the Contact page send:

Field	Name	Required
First Name	firstName	yes
Last Name	lastName
Email	email	yes
Phone	phone
Message	message

Both also send form (contact) and subject: “New project enquiry” for the project form, “New contact enquiry” for the Contact page. The newsletter sends email (required) and form (newsletter).

Changing the fields

The fields are ordinary <input> 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, and add required to make one mandatory. The service receives whatever the form contains, so there are no settings to update.

The project form is copied into projects.html, the three category pages and every page in services/. Change it in all of them (find and replace in files helps).

Testing before launch

• Submit each form 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 (a bot that fills the hidden field is shown “Thank you” and nothing is sent); 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 privacy page (copy a page as in Editing the site) and link it under the forms. Ask for consent if you add newsletter subscribers to a marketing list.