The code
<form class="lf-form" action="/api/orders" method="POST">
<div class="field">
<label for="f-product">Product *</label>
<select id="f-product" name="product" required>
<option value="" disabled selected>Choose…</option>
<option value="T-shirt — $25">T-shirt — $25</option>
<option value="Hoodie — $55">Hoodie — $55</option>
<option value="Cap — $20">Cap — $20</option>
<option value="Sticker pack — $8">Sticker pack — $8</option>
</select>
</div>
<div class="field">
<label for="f-quantity">Quantity *</label>
<input id="f-quantity" name="quantity" type="number" placeholder="1" min="1" max="99" required />
</div>
<div class="field">
<label for="f-name">Full name *</label>
<input id="f-name" name="name" type="text" required />
</div>
<div class="field">
<label for="f-email">Email *</label>
<input id="f-email" name="email" type="email" autocomplete="email" required />
</div>
<div class="field">
<label for="f-address">Shipping address *</label>
<textarea id="f-address" name="address" rows="3" placeholder="Street, city, postal code, country" required></textarea>
</div>
<div class="field">
<label for="f-notes">Order notes (optional)</label>
<textarea id="f-notes" name="notes" rows="2"></textarea>
</div>
<button type="submit">Place order</button>
</form>
<style>
.lf-form { max-width: 480px; margin: 0 auto; font-family: system-ui, sans-serif; }
.lf-form .field { margin-bottom: 1rem; }
.lf-form label, .lf-form legend { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }
.lf-form input, .lf-form select, .lf-form textarea {
width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem;
border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff;
font-family: inherit;
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus {
outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb;
}
.lf-form .checkbox, .lf-form .radio { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.lf-form .checkbox input, .lf-form .radio input { width: auto; }
.lf-form button {
width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600;
color: #fff; background: #2563eb; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.lf-form button:hover { background: #1d4ed8; }
</style>Live preview
Rendered in a sandboxed iframe — exactly what you'll get when you paste the snippet.
Frequently asked questions
How do I calculate totals on this order form?
Pure HTML can't compute — write a few lines of JS to multiply price × quantity on change. LemForms has calculation fields that auto-total without code.
How do I add a 'pay now' button?
Wire the submit handler to create a Stripe Checkout session. Or use LemForms' Stripe field — it handles checkout + order confirmation in one flow.
Skip the HTML — build this in 30 seconds
LemForms gives you the same form with a real backend: submissions dashboard, email notifications, conditional logic, file uploads, webhooks, and Stripe payments. No code.
Try LemForms freeRelated snippets
- Signup form HTML templateFree signup form HTML template — plain HTML/CSS and Tailwind versions, accessible labels, working validation. Copy, paste, ship.
- Login form HTML templateFree login form HTML template with accessible labels, remember-me checkbox, and forgot-password link. Plain HTML and Tailwind variants.
- Contact form HTML templateAccessible contact form HTML template you can copy in under a minute. Plain HTML/CSS and Tailwind versions, with name, email, subject, and message fields.
- Subscription form HTML templateEmail subscription form HTML template with plan selector, GDPR consent checkbox, and accessible labels. Copy-paste ready.
- Booking form HTML templateFree booking form HTML template with native date + time pickers, party size, and notes field. Plain HTML and Tailwind variants.
- Survey form HTML templateFree survey form HTML template with rating scale, multiple-choice, and open-ended fields. Accessible, mobile-friendly, copy-paste ready.