Fulfilment / A4
Goods received note HTML template
The buyer's record of what actually arrived: ordered against delivered against accepted, with every discrepancy explained and signed for.
When this document is the right one
A delivery arrives at goods in. This document is the middle term of a three-way match between the purchase order, the delivery and the invoice, and without it the match is between two documents and a memory.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- Four quantity columns: ordered, delivered, accepted and rejected. Three of them are frequently different and a single quantity column cannot express that.
- The delivery note number and the vehicle, because a dispute about a delivery is traced through the carrier rather than through the supplier.
- A discrepancy section where every rejection has to be explained, since a rejection with no reason cannot be matched against a credit note later.
- A quarantine instruction for unordered goods, because unordered stock that goes onto the shelf is stock that gets used and then invoiced.
- A driver signature as well as a receiver signature, which is what makes a damage claim provable.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Goods received note GRN-2026-0771</title>
<style>
@page { size: A4; margin: 15mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9.5pt/1.4 Arial, sans-serif; color: #111; }
header { display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid #111; padding-bottom: 5mm; }
h1 { margin: 0; font-size: 17pt; }
.ref { text-align: right; font-size: 9pt; }
.ref .no { font-size: 13pt; font-weight: 700; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; margin: 6mm 0; }
.meta .k { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.06em;
color: #666; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th, td { border: 1px solid #bbb; padding: 2.2mm; }
th { background: #f2f2f2; text-align: left; font-size: 8pt;
text-transform: uppercase; letter-spacing: 0.05em; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A discrepancy row is tinted rather than merely different in a column,
because this document is skimmed by someone deciding whether to sign it. */
tr.discrepancy td { background: #fdeceb; }
.discrepancies { margin-top: 6mm; border: 1px solid #111; padding: 4mm;
break-inside: avoid; }
.discrepancies h2 { margin: 0 0 2mm; font-size: 9pt; text-transform: uppercase;
letter-spacing: 0.07em; }
.writein { border-bottom: 1px solid #bbb; height: 7mm; }
.verdict { display: flex; gap: 8mm; margin-top: 4mm; font-weight: 700; }
.verdict label { display: flex; align-items: center; gap: 2mm; }
.box { display: inline-block; width: 4mm; height: 4mm; border: 1.5px solid #111; }
.sign { margin-top: 6mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm;
break-inside: avoid; }
.sign div { border-top: 1px solid #111; padding-top: 1.5mm; margin-top: 14mm;
font-size: 8pt; color: #666; }
</style>
</head>
<body>
<header>
<div>
<h1>Goods received note</h1>
<div style="margin-top:1.5mm">Calder Interiors Ltd · Unit 6, Kirkstall Trade Park, Leeds</div>
</div>
<div class="ref">
<div class="no">GRN-2026-0771</div>
Received 12 May 2026, 09:15
</div>
</header>
<section class="meta">
<div><div class="k">Supplier</div>Northgate Supply Co.</div>
<div><div class="k">Against order</div>PO-88213</div>
<div><div class="k">Delivery note</div>DN-4471</div>
<div><div class="k">Carrier and vehicle</div>Palletways, YK21 HXB</div>
</section>
<table>
<thead>
<tr>
<th>Line</th><th>Description</th><th>Supplier part</th>
<th class="num">Ordered</th><th class="num">Delivered</th>
<th class="num">Accepted</th><th class="num">Rejected</th><th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Oak veneer panel, 2400 x 1200</td><td>NG-OAK-2412</td>
<td class="num">24</td><td class="num">24</td>
<td class="num">22</td><td class="num">2</td><td>2 edge damaged</td>
</tr>
<tr>
<td>2</td><td>Edge banding, 22mm, 50m roll</td><td>NG-EB-22</td>
<td class="num">6</td><td class="num">6</td>
<td class="num">6</td><td class="num">0</td><td>Good</td>
</tr>
<tr class="discrepancy">
<td>3</td><td>Wood adhesive, 5L</td><td>NG-ADH-5</td>
<td class="num">0</td><td class="num">4</td>
<td class="num">0</td><td class="num">4</td><td>Not ordered</td>
</tr>
</tbody>
</table>
<section class="discrepancies">
<h2>Discrepancies and action taken</h2>
<p style="margin:0 0 3mm;font-size:8.5pt">
Every rejected or unordered quantity above needs a line here. A goods received
note with a rejection and no explanation cannot be matched against an invoice,
which is the only reason this document exists.
</p>
<div class="writein">Line 1: 2 panels edge damaged in transit, photographed, returned with the driver. RMA-1142 raised.</div>
<div class="writein">Line 3: 4 units adhesive not on the order. Held in quarantine bay 2, supplier notified 12 May. Do not pay.</div>
<div class="writein"></div>
</section>
<div class="verdict">
<label><span class="box"></span> Accepted in full</label>
<label><span class="box"></span> Accepted with discrepancies noted</label>
<label><span class="box"></span> Refused</label>
</div>
<div class="sign">
<div>Received and checked by, print and sign</div>
<div>Driver signature</div>
<div>Date and time</div>
</div>
</body>
</html>The layout decision worth understanding
Discrepancy rows are tinted rather than only marked in a column. This document is skimmed by someone deciding whether to sign it while a driver waits, and a tinted row survives that reading where a number in the fourth column does not.
The mistake people make adapting it
Signing the driver's paperwork as accepted before checking the delivery. Once it is signed clean, a shortage or damage found an hour later is your word against a signature, and most carrier terms make that argument unwinnable. Sign for the pallet count, check the contents, and raise this note afterwards.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A4" }
}' \
--output goods-received-note.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a goods received note is a A4 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
4x6 shipping label HTML template
A 4 by 6 inch thermal label with a service band, a large delivery address, a routing code and a barcode with real quiet zones.
Returns form HTML template
The form that goes in the box for the customer to send back: numbered steps, a table to fill in, coded reasons and a choice of outcome.
21-per-sheet address label HTML template
Twenty-one addresses in a fixed 3 by 7 grid on A4, with absolute row heights so the print cannot drift out of the die cuts.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.