Forms

Every form (contact, booking, quote, enquiry, newsletter, sign-in, checkout) is ready to connect. Until you connect it, submitting shows a thank-you message and sends nothing, so you can safely demo the site.

How it works#

Forms post their fields to an address you choose, the form handler. A form handler is a small script or online service that receives the fields and emails them to you (or saves them). You set the address once:

src/config/site.json

"formAction": "https://your-form-handler.example/submit",
"newsletterAction": "https://your-mailing-list.example/subscribe"

formAction is used by every contact, booking, enquiry, quote, comment, sign-in and checkout form.
newsletterAction is used by the footer sign-up box, newsletter sections and the coming-soon page. If it's "#" or empty, formAction is used instead.
A single newsletter section can use its own address with "action": "https://…".
While an address is "#", the form shows its thank-you message instead of sending.

Forms send with method="post", and every field has a name (for example name, email, phone, message). Newsletter boxes send a single field called email.

Option 1: a form service (no code)#

Many online services give you a form address that emails you each submission, often with spam filtering and a free tier. Sign up, copy the address they give you (it usually looks like https://…/f/abc123) into formAction, and you're done. Most mailing-list providers similarly give you a sign-up form address you can use as newsletterAction; the field must be called email (it already is).

Option 2: your own PHP script#

If your hosting supports PHP (most shared hosting does), save this as send.php next to your pages, change the two settings at the top, and set "formAction": "send.php". It emails you every field of any form and then returns the visitor to the page they came from.

send.php

&lt;?php
// Where messages go, and the address they are sent from (use one on your own domain).
$to   = 'you@yourdomain.com';
$from = 'website@yourdomain.com';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') { http_response_code(405); exit; }

// Collect the fields, skipping empty ones.
$lines = [];
foreach ($_POST as $key =&gt; $value) {
  if (is_array($value)) { $value = implode(', ', $value); }
  $value = trim(strip_tags($value));
  if ($value !== '') { $lines[] = ucfirst(str_replace(['-', '_'], ' ', $key)) . ': ' . $value; }
}
if (!$lines) { header('Location: ' . ($_SERVER['HTTP_REFERER'] ?? '/')); exit; }

// Only use the visitor's email as Reply-To if it is a valid address (prevents header injection).
$reply = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
$headers = "From: $from\r\n" . ($reply ? "Reply-To: $reply\r\n" : '') . "Content-Type: text/plain; charset=UTF-8\r\n";
$page = parse_url($_SERVER['HTTP_REFERER'] ?? '', PHP_URL_PATH) ?: 'website';

mail($to, 'New message from ' . $page, implode("\n", $lines), $headers);

// Back to the page with ?sent=1 so you can show a message if you like.
$back = strtok($_SERVER['HTTP_REFERER'] ?? '/', '?');
header('Location: ' . $back . '?sent=1');

PHP's mail() depends on your host's mail setup, and messages can land in spam. For reliable delivery ask your host about SMTP, or use a form service. Test by sending yourself a message after publishing.

Changing the fields of a form#

Forms built from settings take a fields list. Each field:

JSON

{ "label": "Your name", "name": "name", "type": "text", "required": true, "col": 6, "placeholder": "Jane Smith" }

Setting	Meaning
`label`	Text above the field (optional; use `placeholder` for a label inside the field).
`name`	The field's name in the email you receive. Use letters and dashes.
`type`	`text`, `email`, `tel`, `number`, `date`, `password`, `textarea` or `select`.
`options`	For `select`: a list of choices, e.g. `["Dinner", "Lunch"]`.
`rows`	For `textarea`: its height in lines.
`required`	`true` makes the field compulsory.
`col`	`6` makes the field half width so two sit side by side.

Sections with forms: contact, form-split, hero (form variant), detail (sidebar form), person, newsletter, auth, checkout.

In the HTML files#

Find the <form … action="#" method="post" data-demo-form> tags and change action="#" to your handler's address. Search all files for action="#" to find them in one go.

These pages are designs only. A real shop or member area needs an e-commerce or membership system; you can use these pages as the design for it or link your buttons to your shop provider.