Forms — Ciketo HTML

The Ciketo HTML template has one form, the quote request: on Home, on the Contact page and on every service page.

It 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 it runs 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: Google Sheets, Slack, a CRM, your quoting tool	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 form, and check that the submission arrived.

4. Upload config.js with the site.

Every page reads the same config.js, so every copy of the form switches at once.

What the service receives

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

Field	Name	Required
Full Name	name	yes
Company Name	company
Work Email	email	yes
Phone Number	phone
Origin	origin
Destination	destination
Shipping Method	method: Ocean Freight, Air Freight, Road Freight or Multimodal	yes
Estimated Weight	weight
Preferred Departure Date	date, written like 2026-10-05
Tell us about your shipment	message
The consent checkbox	consent: yes, sent only when it is ticked

The form also sends form (quote) and subject (“New quote request”), and access_key when formAccessKey is set. The honeypot field is left out. The request asks for a JSON answer (Accept: application/json), so the service answers the page instead of showing its own thank-you page.

Changing the fields

The fields are ordinary <input>, <select> and <textarea> elements inside the <form>, each in a <label> with its text. Change a label or a placeholder in place; the shipping methods are the <option> elements of the select. To add a field, copy an existing one and give it a new name, and add required to make one mandatory (the consent checkbox too, if it must be ticked). The service receives whatever the form contains, so there are no settings to update.

The form is copied into index.html, contact.html and every page in services/. Change it in all of them (find and replace in files helps). “Thank you” and “Something went wrong” are written twice: in the button, and in the form’s data-success and data-error, which screen readers announce. Change both.

Testing before launch

• Submit the 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.
• The short sample form in style-guide.html posts to the same endpoint once one is set (its form field is demo). Delete the style guide, or don’t submit that form on the live site.

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.

Ciketo comes with sample privacy, terms and cookie pages in legal/: rewrite them for your business before you collect requests. The consent text under the form says the visitor agrees to be contacted about their request; you can link it to your privacy policy.