Order form template

Free order form
template, HTML and React.

For bakeries, makers and pre-orders where you invoice by hand. Customers choose a product and quantity, and tell you where to deliver.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your order form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

order-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #fffaf0; color: #483c32; font: 16px/1.5 Georgia, serif; border: 1px solid #483c3230; border-radius: 2px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 24px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 0; border-bottom: 1px solid #483c3280; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; color: #483c32; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #483c3280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #92452e; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 16px; padding: 12px 22px; border: 0; border-radius: 2px; background: #92452e; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #92452e; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Place an order.">
<h2>Place an order.</h2>
<p>We’ll confirm availability and send payment details by email.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="phone">Phone number</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="product">Product</label>
  <select id="product" name="product" required>
    <option value="">Choose one</option>
    <option value="Sourdough loaf">Sourdough loaf</option>
    <option value="Cinnamon rolls (6)">Cinnamon rolls (6)</option>
    <option value="Birthday cake">Birthday cake</option>
  </select>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="quantity">Quantity</label>
  <input id="quantity" name="quantity" type="number" placeholder="1" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="needed_by">Needed by</label>
  <input id="needed_by" name="needed_by" type="date">
  </div>
  <div class="formkoi-field">
  <label for="address">Delivery address</label>
  <textarea id="address" name="address" required></textarea>
  </div>
  <div class="formkoi-field">
  <label for="message">Notes</label>
  <textarea id="message" name="message"></textarea>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send order</button>
</form>
</section>

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this order form.

Product is a dropdown so values stay consistent. Quantity is a number field. Delivery address is a text area to allow several lines.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Phone number	`phone`	Phone	Yes
Product	`product`	Dropdown: Sourdough loaf, Cinnamon rolls (6), Birthday cake	Yes
Quantity	`quantity`	Number	Yes
Needed by	`needed_by`	Date	No
Delivery address	`address`	Long text	Yes
Notes	`message`	Long text	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Order form
questions.

Does this take payment?

No. It collects the order; you send payment details in your reply or from your invoicing tool.

Can I list many products?

Add up to twenty options to the dropdown, or add a second dropdown for sizes and flavours.

Can orders reach my kitchen and my inbox?

Add more verified recipients, or route by product so each maker gets only their orders.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free order formtemplate, HTML and React.