Bakery order

Take custom bakery and cake orders.

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 but remains optional.
Item: Item keeps answers consistent for filtering and routing but remains optional.
Quantity: Quantity collects a value that can be validated and compared and is required to complete the request.
Pickup date: Pickup date collects an unambiguous date and is required to complete the request.
Special requests: Special requests leaves room for context and detail but remains optional.

Fields

NametextrequiredEmailemailrequiredPhonetelItemselectQuantitynumberrequiredPickup datedaterequiredSpecial requeststextarea

Preview

Code

<script lang="ts">
  let sent = $state(false);

  async function onSubmit(e: SubmitEvent) {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    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) {
      sent = true;
      form.reset();
    }
  }
</script>

{#if sent}
  <p>Thanks! Your message has been sent.</p>
{:else}
  <form onsubmit={onSubmit}>
    <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="item">Item</label>
    <select name="item" id="item">
      <option value="Cake">Cake</option>
      <option value="Cupcakes">Cupcakes</option>
      <option value="Cookies">Cookies</option>
      <option value="Bread">Bread</option>
      <option value="Pastries">Pastries</option>
    </select>
    <label for="quantity">Quantity</label>
    <input type="number" name="quantity" id="quantity" required />
    <label for="pickup_date">Pickup date</label>
    <input type="date" name="pickup_date" id="pickup_date" required />
    <label for="notes">Special requests</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>
{/if}

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 →