# Order form template A free order form with product, quantity, delivery address and notes. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form collects the product, the quantity and a delivery address. It suits shops that confirm each order and arrange payment themselves, like bakeries, makers and pre-orders. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/order-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Phone | `phone` | Phone | No | | Product | `product` | Dropdown (Sourdough loaf, Box of 6 pastries, Celebration cake) | Yes | | Quantity | `quantity` | Number | Yes | | Delivery address | `address` | Long text | Yes | | Notes | `notes` | Long text | No | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html

Place an order

Order by noon for next-day delivery. We’ll email you to confirm and arrange payment.

``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html
``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function OrderForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We got your order and will email you to confirm.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function OrderForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We got your order and will email you to confirm.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks! We got your order and will email you to confirm.

{:else}
{#if status === 'error'}

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
``` ## When to use it - Bakeries, caterers and local food businesses - Pre-orders for a product that is not out yet - Makers selling a few products from a portfolio site - Internal orders for merchandise or office supplies ## Customize it ### List your own products Change the `