Order form template

    Product, quantity, delivery or collection — an order request you confirm and invoice.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    Delivery or collection?

    Only needed for delivery.

    Messages, allergies, sizes or colours.

    Code — replace YOUR_ENDPOINT_ID with your form's ID

    <style>
  .fb-form { display: grid; gap: 1rem; max-width: 36rem; }
  .fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
  .fb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb-label { font-weight: 600; }
  .fb-optional { font-weight: 400; color: #6b7280; }
  .fb-help { margin: 0; font-size: 0.875rem; color: #6b7280; }
  .fb-input { box-sizing: border-box; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #111827; font: inherit; }
  .fb-input:focus { border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: 1px; }
  .fb-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .fb-option { display: flex; align-items: center; gap: 0.5rem; }
  .fb-check { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #2563eb; }
  .fb-button { justify-self: start; min-height: 44px; padding: 0.625rem 1.25rem; border: 0; border-radius: 0.5rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .fb-button:hover { background: #1d4ed8; }
  .fb-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .fb-button:disabled { opacity: 0.6; cursor: wait; }
  .fb-status { margin: 0; min-height: 1.5em; }
  @media (min-width: 640px) {
    .fb-form { grid-template-columns: 1fr 1fr; }
    .fb-field, .fb-button, .fb-status { grid-column: 1 / -1; }
    .fb-field--half { grid-column: auto; }
  }
</style>

<form id="fb-form" class="fb-form" action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <div class="fb-field fb-field--half">
    <label for="fb-name" class="fb-label">Name</label>
    <input type="text" id="fb-name" name="name" class="fb-input" required autocomplete="name">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-email" class="fb-label">Email</label>
    <input type="email" id="fb-email" name="email" class="fb-input" required autocomplete="email">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-phone" class="fb-label">Phone <span class="fb-optional">(optional)</span></label>
    <input type="tel" id="fb-phone" name="phone" class="fb-input" autocomplete="tel">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-product" class="fb-label">Product</label>
    <select id="fb-product" name="product" class="fb-input" required>
      <option value="">Choose…</option>
      <option value="celebration-cake">Celebration cake</option>
      <option value="box-of-12-pastries">Box of 12 pastries</option>
      <option value="bread-subscription">Bread subscription</option>
      <option value="something-custom">Something custom</option>
    </select>
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-quantity" class="fb-label">Quantity</label>
    <input
      type="number"
      id="fb-quantity"
      name="quantity"
      class="fb-input"
      required
      min="1"
      max="100"
    >
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-needed_by" class="fb-label">
      Needed by
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="date" id="fb-needed_by" name="needed_by" class="fb-input">
  </div>
  <fieldset class="fb-field fb-fieldset">
    <legend class="fb-label">Delivery or collection?</legend>
    <div class="fb-options">
      <label class="fb-option">
        <input type="radio" name="fulfilment" value="delivery" class="fb-check" required>
        <span>Delivery</span>
      </label>
      <label class="fb-option">
        <input type="radio" name="fulfilment" value="collection" class="fb-check" required>
        <span>Collection</span>
      </label>
    </div>
  </fieldset>
  <div class="fb-field">
    <label for="fb-address" class="fb-label">
      Delivery address
      <span class="fb-optional">(optional)</span>
    </label>
    <textarea
      id="fb-address"
      name="address"
      class="fb-input"
      autocomplete="street-address"
      aria-describedby="fb-address-help"
      rows="3"
    ></textarea>
    <p id="fb-address-help" class="fb-help">Only needed for delivery.</p>
  </div>
  <div class="fb-field">
    <label for="fb-notes" class="fb-label">
      Anything else?
      <span class="fb-optional">(optional)</span>
    </label>
    <textarea id="fb-notes" name="notes" class="fb-input" aria-describedby="fb-notes-help" rows="3"></textarea>
    <p id="fb-notes-help" class="fb-help">Messages, allergies, sizes or colours.</p>
  </div>
  <!-- Honeypot: keep it hidden. People never see it; bots fill it in and get flagged as spam. -->
  <div
    aria-hidden="true"
    style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"
  >
    <label for="fb-honey">Leave this field empty</label>
    <input type="text" id="fb-honey" name="_honey" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_subject" value="New order request">
  <button type="submit" class="fb-button">Send order request</button>
</form>

    About this template

    This is an order request, not a checkout. It takes no payment and holds no stock; it tells you what someone wants, how many and how they want to receive it, and you reply with a confirmation and an invoice. For a bakery, a print shop, a caterer or anyone selling made-to-order, that is often exactly the right amount of e-commerce.

    Quantity is a number field with a minimum of one, so phones show a number pad and nobody orders zero. Delivery or collection is a required choice; the address box is optional and its help text says it is only needed for delivery, so collection customers are not asked for an address they do not need to give.

    Never add card details to a form like this. Payments belong with a payment provider; take them by invoice or a payment link once the order is confirmed.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    NamenameShort textYesRequired.
    EmailemailEmailYesRequired: it is where the confirmation and invoice go.
    PhonephonePhoneNoOptional, for delivery questions.
    ProductproductDropdownYesRequired dropdown of what you sell.
    QuantityquantityNumberYesRequired number, 1 to 100.
    Needed byneeded_byDateNoOptional date, so you can say no early if it is too soon.
    Delivery or collection?fulfilmentSingle choiceYesRequired: delivery or collection.
    Delivery addressaddressLong textNoOptional, and only asked for delivery.
    Anything else?notesLong textNoOptional details for made-to-order items.

    Each name becomes a column in your dashboard and a row in the notification email. The hidden _honey field is the honeypot; _subject sets the email's subject line. Both are reserved fields and never appear in the field table.

    Make it yours

    • Replace the product list with your own; keep option values stable so old orders stay comparable.
    • Add a second product row as product_2 and quantity_2 if people often order two things.
    • Set the date's min to two days from today with a line of JavaScript if you need lead time.

    Where the submissions go

    • Each order request is stored and emailed to you; export the day's orders to CSV on every plan.
    • Send orders to Google Sheets on Starter and above for a live order book the whole team can see.
    • A Telegram message per order on your phone helps you confirm fast, on any plan.

    Lead Generation: plans, destinations and a worked setup →

    Before you publish it

    1. Create a form in the Formboost dashboard and replace YOUR_ENDPOINT_ID with its ID.
    2. Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with fetch() and stay on the page.
    3. For the plain HTML version, add a hidden _redirect with an https:// thank-you page on the same site as the form — anything else falls back to Formboost's page.
    4. Submit it once from the live page and check the submission in your dashboard. Every request is acknowledged, so the dashboard is the real test. Troubleshooting covers the rest.

    More form templates

    Put the order form live

    Free forever: 500 submissions a month across 10 forms, no card.

    Get a free endpointOpen the form generator