Free Order Form Template — HTML Code You Can Copy

An order form is essential for any business collecting customer purchases online. This free HTML template gives you a professional, functional form you can copy and use immediately on your website. The template includes all necessary fields for order processing—customer information, product details, quantities, and shipping addresses—with clean styling that works on desktop and mobile.

Complete Order Form Template

Here’s a complete, production-ready order form. Copy the entire code below and save it as an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #1a1a1a;
            margin-bottom: 10px;
            font-size: 28px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 600px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }

        .required {
            color: #e74c3c;
        }

        button {
            width: 100%;
            padding: 14px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: #0052a3;
            box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
        }

        button:active {
            transform: scale(0.98);
        }

        .success-message {
            display: none;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Place Your Order</h1>
        <p class="subtitle">Fill out the form below to submit your order</p>
        <div class="success-message" id="successMessage">
            Thank you! Your order has been submitted successfully.
        </div>

        <form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="fullName">Full Name <span class="required">*</span></label>
                    <input type="text" id="fullName" name="fullName" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address <span class="required">*</span></label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone Number <span class="required">*</span></label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="product">Product/Item Name <span class="required">*</span></label>
                    <input type="text" id="product" name="product" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="quantity">Quantity <span class="required">*</span></label>
                    <input type="number" id="quantity" name="quantity" min="1" value="1" required>
                </div>
                <div class="form-group">
                    <label for="variant">Size/Variant <span class="required">*</span></label>
                    <select id="variant" name="variant" required>
                        <option value="">Select an option</option>
                        <option value="Small">Small</option>
                        <option value="Medium">Medium</option>
                        <option value="Large">Large</option>
                        <option value="Extra Large">Extra Large</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="address">Shipping Address <span class="required">*</span></label>
                <textarea id="address" name="address" required placeholder="Street address, city, state, zip code"></textarea>
            </div>

            <div class="form-group">
                <label for="notes">Order Notes (Optional)</label>
                <textarea id="notes" name="notes" placeholder="Any special instructions or requests?"></textarea>
            </div>

            <button type="submit">Submit Order</button>
        </form>
    </div>

    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch(this.action, {
                method: this.method,
                body: formData
            }).then(response => {
                if (response.ok) {
                    document.getElementById('successMessage').style.display = 'block';
                    this.reset();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            }).catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

How to Use This Template

Getting this form live on your website takes just three simple steps:

Step 1: Copy the Code Select all the code above and copy it into a new text file. Save it with a .html extension (for example, order-form.html). You can open it directly in your browser to see how it looks.

Step 2: Create a FormBackend Account Go to FormBackend.com and sign up for a free account. This service captures all form submissions and sends them to your email automatically. You’ll get a unique form ID after creating your first form.

Step 3: Update Your Form Action Replace YOUR_FORM_ID in the code with your actual FormBackend ID. The action URL should look like https://www.formbackend.com/f/abc123def456. Save the file and test the form by submitting a test order.

Template Variations

Simple Order Form

Use this version for basic orders with minimal information:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="product">Product Name <span class="required">*</span></label>
        <input type="text" id="product" name="product" required>
    </div>

    <div class="form-group">
        <label for="quantity">Quantity <span class="required">*</span></label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" required>
    </div>

    <button type="submit">Order Now</button>
</form>

Wholesale/Bulk Order Form

Include company details and purchase order numbers:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="company">Company Name <span class="required">*</span></label>
        <input type="text" id="company" name="company" required>
    </div>

    <div class="form-group">
        <label for="contactName">Contact Name <span class="required">*</span></label>
        <input type="text" id="contactName" name="contactName" required>
    </div>

    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="poNumber">Purchase Order Number</label>
        <input type="text" id="poNumber" name="poNumber">
    </div>

    <div class="form-group">
        <label for="product">Product <span class="required">*</span></label>
        <input type="text" id="product" name="product" required>
    </div>

    <div class="form-group">
        <label for="quantity">Quantity <span class="required">*</span></label>
        <input type="number" id="quantity" name="quantity" min="1" required>
    </div>

    <button type="submit">Request Quote</button>
</form>

T-Shirt Order Form

Specialized for apparel with size and color options:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Full Name <span class="required">*</span></label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="size">Size <span class="required">*</span></label>
        <select id="size" name="size" required>
            <option value="">Select size</option>
            <option value="XS">Extra Small</option>
            <option value="S">Small</option>
            <option value="M">Medium</option>
            <option value="L">Large</option>
            <option value="XL">Extra Large</option>
            <option value="2XL">2XL</option>
        </select>
    </div>

    <div class="form-group">
        <label for="color">Color <span class="required">*</span></label>
        <select id="color" name="color" required>
            <option value="">Select color</option>
            <option value="Black">Black</option>
            <option value="White">White</option>
            <option value="Navy">Navy</option>
            <option value="Red">Red</option>
            <option value="Gray">Gray</option>
        </select>
    </div>

    <div class="form-group">
        <label for="quantity">Quantity <span class="required">*</span></label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" required>
    </div>

    <button type="submit">Add to Order</button>
</form>

How to Customize This Template

Change Colors and Styling Modify the CSS style section to match your brand. Update the button color by changing background: #0066cc; to your preferred hex color. Adjust the gradient background or change fonts as needed.

Add or Remove Fields Each field is contained in a <div class="form-group">. Duplicate a group to add new fields, or delete a group to remove them. Make sure the name attribute on each input is unique and descriptive.

Adjust Layout The form uses CSS Grid for responsive layout. The .form-row class creates two-column layouts on desktop that stack on mobile. Modify grid-template-columns: 1fr 1fr; to change the ratio or wrap different fields.

Add Validation Messages Add a <span class="error" style="color: #e74c3c; font-size: 12px;"></span> below inputs to show validation errors. Use JavaScript to validate before submission.

FAQ

Is this order form template really free? Yes, completely. The HTML template itself is free to download and use on any website. FormBackend has a free tier that receives up to 50 form submissions per month, and you can upgrade for higher submission limits if needed.

How do I receive order notifications by email? After you sign up for FormBackend and create your form, the service automatically sends you an email notification for every submission. You can configure multiple email recipients, set up automatic replies to customers, and customize notification settings in your FormBackend dashboard.

Can I add a payment field or payment processing? This basic template doesn’t include payment processing. However, you can add a Stripe or PayPal button using their embed codes, or collect payment information with a separate payment gateway while using FormBackend to capture order details. See our using AJAX documentation for advanced integrations.

Does this work on Shopify, WordPress, and other platforms? Yes. You can add this form to WordPress by using the Custom HTML block, Shopify using the page builder, or any platform that allows HTML/custom code. If your platform has restrictions, check our documentation on platform integrations for platform-specific guidance.

Next Steps

Customize this template with your company colors and brand voice, then get it live on your website. See our HTML form generator for tools to create forms visually, or check out our guides section for additional form templates and best practices.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Contact Form Template — Collect name, email, and messages from website visitors
Registration Form Template — Event, workshop, and conference signups
Application Form Template — Job applications and program enrollments
Feedback Form Template — Customer feedback with star ratings and comments
Newsletter Signup Template — Grow your email list with lightweight signup forms

Need a custom form? Use our HTML form generator to build one visually.