Service Agreement Template HTML and JSON

This guide uses the Service Agreement template from the Gallery.

Contract documents need predictable sections and readable paragraph spacing. The template below keeps each legal block explicit.

Step 1 - Service agreement HTML template

HTML

<style>
  body {
    font-family: 'Georgia', serif;
    padding: 48px;
    color: #2d3436;
    line-height: 1.7;
    font-size: 13px;
  }

  .doc-header {
    text-align: center;
    margin-bottom: 28px;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 16px;
  }

  .parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
  }

  .section {
    margin-bottom: 16px;
  }

  .sig-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
  }
</style>

<div class="doc-header">
  <h1>Service Agreement</h1>
  <p>Agreement No: {{agreement_number}} | Effective Date: {{effective_date}}</p>
</div>

<div class="parties">
  <div>
    <strong>Service Provider</strong>
    <p>{{provider_name}}</p>
    <p>{{provider_address}}</p>
    <p>{{provider_email}}</p>
  </div>
  <div>
    <strong>Client</strong>
    <p>{{client_name}}</p>
    <p>{{client_address}}</p>
    <p>{{client_email}}</p>
  </div>
</div>

<div class="section">
  <h2>1. Scope of Services</h2>
  <p>{{scope_text}}</p>
</div>

<div class="section">
  <h2>2. Compensation</h2>
  <p>
    The Client agrees to pay {{compensation}}.
    Payment terms: {{payment_terms}}.
  </p>
</div>

<div class="section">
  <h2>3. Term and Termination</h2>
  <p>
    Agreement starts on {{effective_date}}, continues for {{duration}},
    and may be terminated with {{notice_period}} written notice.
  </p>
</div>

<div class="sig-area">
  <div>{{provider_name}} - Date</div>
  <div>{{client_name}} - Date</div>
</div>

Step 2 - JSON payload for the contract template

JSON

{
  "agreement_number": "SA-2026-0451",
  "effective_date": "March 15, 2026",
  "provider_name": "TechFlow Solutions LLC",
  "provider_address": "100 Innovation Way, Austin, TX",
  "provider_email": "legal@techflow.io",
  "client_name": "StartupXYZ Inc.",
  "client_address": "500 Market St, San Francisco, CA",
  "client_email": "ops@startupxyz.com",
  "scope_text": "The Service Provider shall provide software development services including frontend and backend development, code review, testing, and deployment support.",
  "compensation": "$15,000 per month",
  "payment_terms": "Net 15",
  "duration": "12 months",
  "notice_period": "30 days"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Contract rendering checklist

Keep legal paragraphs as already formatted strings.
Keep date format consistent in all placeholders.
Validate line length for party names and addresses.

Step 5 - Render request

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<service_agreement_template_id>",
    "payload": {
      "agreement_number": "SA-2026-0451",
      "effective_date": "March 15, 2026",
      "provider_name": "TechFlow Solutions LLC",
      "client_name": "StartupXYZ Inc.",
      "scope_text": "Software development services for e-commerce platform.",
      "compensation": "$15,000 per month",
      "payment_terms": "Net 15",
      "duration": "12 months",
      "notice_period": "30 days"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Service Agreement Template: HTML + JSON Payload