Catering order

Request catering for an event.

Why these fields

Name: Name captures a short, searchable answer and is required to complete the request.
Email: Email provides a validated reply address and is required to complete the request.
Phone: Phone provides a direct callback option and is required to complete the request.
Event date: Event date collects an unambiguous date and is required to complete the request.
Number of guests: Number of guests collects a value that can be validated and compared and is required to complete the request.
Menu preference: Menu preference keeps answers consistent for filtering and routing but remains optional.
Dietary requirements: Dietary requirements leaves room for context and detail but remains optional.

Fields

NametextrequiredEmailemailrequiredPhonetelrequiredEvent datedaterequiredNumber of guestsnumberrequiredMenu preferenceselectDietary requirementstextarea

Preview

Code

<form action="https://forms.formward.eu/f/your-form-id" method="POST" class="space-y-4 max-w-lg">
  <label for="name" class="block text-sm font-medium mb-1">Name</label>
  <input type="text" name="name" id="name" required class="block w-full rounded border border-gray-300 p-2" />
  <label for="email" class="block text-sm font-medium mb-1">Email</label>
  <input type="email" name="email" id="email" required class="block w-full rounded border border-gray-300 p-2" />
  <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
  <input type="tel" name="phone" id="phone" required class="block w-full rounded border border-gray-300 p-2" />
  <label for="event_date" class="block text-sm font-medium mb-1">Event date</label>
  <input type="date" name="event_date" id="event_date" required class="block w-full rounded border border-gray-300 p-2" />
  <label for="guests" class="block text-sm font-medium mb-1">Number of guests</label>
  <input type="number" name="guests" id="guests" required class="block w-full rounded border border-gray-300 p-2" />
  <label for="menu" class="block text-sm font-medium mb-1">Menu preference</label>
  <select name="menu" id="menu" class="block w-full rounded border border-gray-300 p-2">
    <option value="Buffet">Buffet</option>
    <option value="Plated">Plated</option>
    <option value="Family style">Family style</option>
    <option value="Cocktail">Cocktail</option>
  </select>
  <label for="dietary" class="block text-sm font-medium mb-1">Dietary requirements</label>
  <textarea name="dietary" id="dietary" class="block w-full rounded border border-gray-300 p-2"></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true" />
  <button type="submit" class="rounded bg-black text-white px-4 py-2">Send</button>
</form>

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →