Order Form template
Product, quantity, delivery details, done. This is the order form I deploy for small shops that take orders by form instead of a full cart — rendered live below with the exact HTML behind it.
What your visitor sees
Plain semantic HTML rendered through the same default form theme Core Forms applies on the front-end. Try it — this demo confirms inline and sends nothing.
Demo only. On your site, the same markup wires into the normal Core Forms action loop — email, Slack, Google Sheets, webhook, whatever you configure.
The HTML behind it
Copy this block, paste into Core Forms → Add New Form → Fields tab, save. Field names map to merge tags automatically in your action templates.
<p>
<label for="cf-order-name">Your name <span aria-hidden="true">*</span></label>
<input type="text" id="cf-order-name" name="NAME" autocomplete="name" required aria-required="true" />
</p>
<p>
<label for="cf-order-email">Email address <span aria-hidden="true">*</span></label>
<input type="email" id="cf-order-email" name="EMAIL" autocomplete="email" required aria-required="true" />
</p>
<p>
<label for="cf-order-phone">Phone</label>
<input type="tel" id="cf-order-phone" name="PHONE" autocomplete="tel" />
</p>
<p>
<label for="cf-order-product">Product <span aria-hidden="true">*</span></label>
<select id="cf-order-product" name="PRODUCT" required aria-required="true">
<option value="">Choose a product…</option>
<option>Sourdough loaf</option>
<option>Baguette (pack of 3)</option>
<option>Cinnamon rolls (box of 6)</option>
</select>
</p>
<p>
<label for="cf-order-qty">Quantity <span aria-hidden="true">*</span></label>
<input type="number" id="cf-order-qty" name="QUANTITY" min="1" value="1" required aria-required="true" />
</p>
<fieldset>
<legend>Delivery or pickup <span aria-hidden="true">*</span></legend>
<p>
<label><input type="radio" name="FULFILLMENT" value="Pickup" required /> Pickup</label>
<label><input type="radio" name="FULFILLMENT" value="Delivery" /> Delivery</label>
</p>
</fieldset>
<p>
<label for="cf-order-address1">Address line 1</label>
<input type="text" id="cf-order-address1" name="ADDRESS1" autocomplete="address-line1" />
</p>
<p>
<label for="cf-order-address2">Address line 2</label>
<input type="text" id="cf-order-address2" name="ADDRESS2" autocomplete="address-line2" />
</p>
<p>
<label for="cf-order-date">Preferred date</label>
<input type="date" id="cf-order-date" name="DATE" />
</p>
<p>
<label for="cf-order-notes">Order notes</label>
<textarea id="cf-order-notes" name="NOTES" rows="4"></textarea>
</p>
<p>
<button type="submit">Place order</button>
</p>
What this order form template is for
An order form beats a full e-commerce stack when the catalog is small and the fulfillment is personal: bakeries taking weekend pre-orders, print shops quoting custom runs, wholesalers taking repeat orders from known buyers. You don't need a cart, an account system, and a checkout funnel for twelve products.
The template collects who is ordering, what they want, and where it goes. Every submission lands in your submissions inbox and can fire an email, a Slack message, or a row in Google Sheets the moment it arrives.
What it deliberately doesn't do: take payment. If you invoice after confirming stock (most form-based sellers do), this is complete as-is. If you want payment at submit time, wire the Stripe action and the same form charges on submit.
Every field, and why it's there
| Field | Type | Required | Why it's there |
|---|---|---|---|
| Your name | text | Yes | Who placed the order — maps to [NAME] in your action templates. |
| Email address | email | Yes | Order confirmations and follow-up questions go here. |
| Phone | tel | Optional | Optional — useful when a delivery driver needs it. |
| Product | select | Yes | Swap the options for your own catalog. One select keeps small menus honest. |
| Quantity | number | Yes | min="1" stops zero-quantity submissions at the browser. |
| Delivery or pickup | radio group | Yes | Two options, fieldset-wrapped for screen readers. |
| Delivery address | text + text | Optional | Address line 1 and optional line 2 — only needed when delivery is chosen. |
| Preferred date | date | Optional | Native datepicker; no JavaScript widget needed. |
| Order notes | textarea | Optional | Allergies, gift messages, loading-dock instructions. |
From this HTML to a working form
-
Paste the markup into the Fields tab
Core Forms → Add New Form → Fields tab. Paste the HTML above, swap the product options for your own catalog, save. The markup IS the form — no field picker.
-
Wire the order notification
In the Actions tab, add Send Email. Subject: "New order: [PRODUCT] × [QUANTITY] — [NAME]". Add a Google Sheets or Slack action next to it if orders need to reach the kitchen, not just an inbox.
-
Embed it on your order page
Drop the Gutenberg block on your Order page, or use the shortcode in a classic editor. Delivery fields can be hidden until "Delivery" is picked with two data-show-if attributes.
Three upgrades worth considering
Show address fields only for delivery
Add data-show-if attributes so the two address lines appear only when the Delivery radio is selected. Two attributes, no logic builder.
Conditional logic →Take payment on submit
Attach the Stripe action and the form charges the order total before it hits your inbox. Keep the invoice-later flow if you confirm stock manually.
Stripe integration →Send orders to a spreadsheet
A Google Sheets action appends every order as a row — the closest thing to a free order-management system a small shop needs.
Google Sheets integration →Order Form template questions
Does this order form template take payments?
Not by default — it collects the order and notifies you, which suits invoice-after-confirmation sellers. To charge at submit time, add the Stripe action to the same form; the markup does not change.
How do customers pick multiple products?
Duplicate the product select and quantity pair, or switch the select to a checkbox group with a quantity note. For more than a handful of products per order, a real cart starts earning its keep.
Can I calculate an order total on the form?
Yes — data variables can multiply quantity by a per-product price and show a running total before submit. The calculation lives in the form config, not in custom JavaScript.
Where do the orders go?
Every submission is stored in the Core Forms submissions inbox in wp-admin, and each configured action fires on top: email, Slack, Google Sheets, webhook. Losing an email never loses the order.
The template is free. The plumbing is the product.
Core Forms turns this HTML into stored submissions, spam-filtered
email, and 30+ integrations. Use
CFLAUNCH for 20% off.