Field operations / A4
Work order HTML template for field service
A job sheet issued to an engineer: the asset, the reported fault, space to record what was done and what parts were used, and two signatures.
When this document is the right one
A fault is reported and someone is dispatched. Half this document is printed and half is written on at the site, which is a constraint most generated documents never have to deal with.
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.
- The asset tag and its location, because a site with forty air handling units needs the one, not the category.
- The reported fault in the reporter's words, including when it happens, since an intermittent fault is diagnosed from the pattern.
- Ruled lines for the work carried out rather than an empty box, because an unruled space gets one sentence written across the middle of it.
- A parts table with empty rows, since parts used on site are the single most commonly lost piece of information in field service.
- Two signatures: the engineer and the customer. The customer signature is what converts the visit into an invoiceable event.
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>Work order WO-4471</title>
<style>
@page { size: A4; margin: 14mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9.5pt/1.4 Arial, sans-serif; color: #111; }
header { display: grid; grid-template-columns: 1fr auto; border: 2px solid #111;
padding: 4mm; align-items: center; }
h1 { margin: 0; font-size: 16pt; text-transform: uppercase; letter-spacing: 0.05em; }
.priority { border: 2px solid #b3261e; color: #b3261e; padding: 2mm 4mm;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.block { border: 1px solid #999; margin-top: 4mm; }
.block h2 { margin: 0; background: #eee; padding: 2mm 3mm; font-size: 8pt;
text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid #999; }
.block .inner { padding: 3mm; }
.kv { display: grid; grid-template-columns: 32mm 1fr 30mm 1fr; gap: 1.5mm 3mm;
font-size: 9pt; }
.kv .k { color: #555; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th, td { border: 1px solid #999; padding: 2mm; font-size: 8.5pt; }
th { background: #eee; text-align: left; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Lines the engineer fills in on site. Ruled, not blank: an unruled space
gets one word written across the middle of it. */
.write-in { border-bottom: 1px solid #bbb; height: 7mm; }
.write-in + .write-in { margin-top: 0; }
.times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.times div { border: 1px solid #999; padding: 2.5mm; }
.times .k { font-size: 7.5pt; text-transform: uppercase; color: #555; }
.times .v { height: 8mm; }
.signoff { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 4mm;
break-inside: avoid; }
.signoff div { border: 1px solid #999; padding: 3mm; }
.sigline { border-bottom: 1px solid #111; height: 13mm; margin-top: 2mm; }
</style>
</head>
<body>
<header>
<div>
<h1>Work order WO-4471</h1>
<div style="margin-top:1.5mm">Ravenshill Facilities · raised 14 May 2026, 08:12</div>
</div>
<div class="priority">P2 · 24h</div>
</header>
<div class="block">
<h2>Site and asset</h2>
<div class="inner">
<div class="kv">
<span class="k">Site</span><span>Ravenshill Hotel, Bath</span>
<span class="k">Building</span><span>Main house, basement</span>
<span class="k">Asset</span><span>AHU-03, Daikin FXMQ125</span>
<span class="k">Asset tag</span><span>RVH-AHU-003</span>
<span class="k">Access</span><span>Plant room, key from duty manager</span>
<span class="k">Contact</span><span>D. Quinn, 07700 900 118</span>
</div>
</div>
</div>
<div class="block">
<h2>Reported fault</h2>
<div class="inner">
Intermittent high-pressure trip on the basement air handling unit, three times
in the last week, always between 17:00 and 19:00 when the kitchen extract is at
full load. Unit restarts on manual reset and runs normally afterwards.
Condenser was cleaned in the February PPM visit.
</div>
</div>
<div class="block">
<h2>Work carried out</h2>
<div class="inner">
<div class="write-in"></div><div class="write-in"></div>
<div class="write-in"></div><div class="write-in"></div>
<div class="write-in"></div>
</div>
</div>
<div class="block">
<h2>Parts and materials used</h2>
<div class="inner">
<table>
<thead>
<tr><th>Part number</th><th>Description</th><th class="num">Qty</th>
<th class="num">Unit</th><th class="num">Total</th></tr>
</thead>
<tbody>
<tr><td style="height:7mm"></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="height:7mm"></td><td></td><td></td><td></td><td></td></tr>
<tr><td style="height:7mm"></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
</div>
<div class="block">
<h2>Time on site</h2>
<div class="inner">
<div class="times">
<div><div class="k">Arrived</div><div class="v"></div></div>
<div><div class="k">Started</div><div class="v"></div></div>
<div><div class="k">Completed</div><div class="v"></div></div>
<div><div class="k">Total hours</div><div class="v"></div></div>
</div>
</div>
</div>
<div class="signoff">
<div>
<strong>Engineer</strong><br>
Name and company
<div class="sigline"></div>
Signature and date
</div>
<div>
<strong>Customer acceptance</strong><br>
Work complete / follow-up required
<div class="sigline"></div>
Signature, name and date
</div>
</div>
</body>
</html>The layout decision worth understanding
Everything is set in bordered blocks with grey section headings, which is a form rather than a document. The priority flag is bordered in red and set in the header: an engineer looking at six job sheets sorts them by that one field before reading anything else.
The mistake people make adapting it
Designing the write-in areas as generous empty rectangles. On a clipboard in a plant room, an unruled space produces four words and a scrawl. Ruled lines at seven millimetres produce sentences, which is what the office needs back.
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 work-order.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 work order 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.
Inspection checklist PDF template
A structured pass, fail or not-applicable list grouped by section, with a comment column and an overall verdict.
Permit to work PDF template
A time-limited authorisation for hazardous work, with precautions as an initialled checklist, a fire watch requirement and a formal hand back.
Incident report HTML template
A factual record of what happened, kept separate from any judgement about why, with corrective actions that have an owner and a date.
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.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
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.