Booking request form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" required />
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <label for="phone">Phone</label>
  <input type="tel" name="phone" id="phone" />
  <label for="service">What would you like to book?</label>
  <input type="text" name="service" id="service" required />
  <label for="preferred_date">Preferred date</label>
  <input type="date" name="preferred_date" id="preferred_date" required />
  <label for="preferred_time">Preferred time of day</label>
  <select name="preferred_time" id="preferred_time" required>
    <option value="Morning">Morning</option>
    <option value="Afternoon">Afternoon</option>
    <option value="Evening">Evening</option>
    <option value="Any time">Any time</option>
  </select>
  <label for="alternative_date">Alternative date</label>
  <input type="date" name="alternative_date" id="alternative_date" />
  <label for="notes">Anything we should know in advance?</label>
  <textarea name="notes" id="notes"></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function BookingRequestForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" required />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="phone">Phone</label>
      <input type="tel" name="phone" id="phone" />
      <label htmlFor="service">What would you like to book?</label>
      <input type="text" name="service" id="service" required />
      <label htmlFor="preferred_date">Preferred date</label>
      <input type="date" name="preferred_date" id="preferred_date" required />
      <label htmlFor="preferred_time">Preferred time of day</label>
      <select name="preferred_time" id="preferred_time" required>
        <option value="Morning">Morning</option>
        <option value="Afternoon">Afternoon</option>
        <option value="Evening">Evening</option>
        <option value="Any time">Any time</option>
      </select>
      <label htmlFor="alternative_date">Alternative date</label>
      <input type="date" name="alternative_date" id="alternative_date" />
      <label htmlFor="notes">Anything we should know in advance?</label>
      <textarea name="notes" id="notes" />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

Does this form check availability?

No. It collects a preferred time and you confirm it. That keeps it simple and works with any diary, but two people can ask for the same slot, so answer in the order requests arrive.

Can I stop requests when I am fully booked?

Yes. The form's response settings take a submission limit and a closing date. Once either is reached, the form stops accepting requests and shows your closed message.

Related

• Request templates

  Support, maintenance, refund and other requests.

• Online forms without a website

  Share the booking form as a link.

• Form data retention

  Clearing out old requests automatically.

• React forms

  The form as a component with inline confirmation.