Field Background Colors: Highlight and Color-Code Signer Fields

Signup

Home

Documentation

Insights

Pricing

Comparison

Signup

Features: Field Background Colors

Multi-Language Signature Support

Custom Background Colors for Every Field

Get your API key now

4.8-star rating on g2.com

Why Signers Miss the Right Fields

When a signer opens a document with 15 fields spread across four pages, the fields that need attention don't always stand out. Required fields get skipped, optional ones get filled in unnecessarily, and multi-signer documents become a guessing game of "which fields are mine."

Introducing: Custom Field Background Colors

Firma.dev now lets you set a custom background color on any field via a single property. Highlight required fields in yellow so they're impossible to miss, color-code fields by recipient so each signer knows exactly where to look, or group related inputs visually so the document reads like a well-designed form instead of a wall of boxes.

Field background colors shipped in v1.11.0 and work on every field type.

What are field background colors?

One Property, Every Field Type

The background_color property accepts a hex color string and applies it as the background fill on any field in a signing document. It works on signatures, initials, text inputs, dates, checkboxes, dropdowns, file uploads, and every other field type Firma.dev supports.

How to Set and Reset Field Colors

Set background_color to a hex value like "#FFFDE7" (light yellow) or "#E8F5E9" (light green) and the field renders with that background in the signing experience. Set it to null or omit it entirely to use the default apperance.

Supported Formats and Field Types

Both 3-digit (#fff) and 6-digit (#FFFDE7) hex formats are accepted. The property is available on standard field definitions, template fields, signing request fields, and anchor tag definitions.

Get your API key now

How to use background colors

Add background_color to any field in your signing request or template creation call:

const response = await fetch(
  'https://api.firma.dev/functions/v1/signing-request-api/signing-requests',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.FIRMA_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      workspace_id: workspaceId,
      template_id: templateId,
      recipients: [
        {
          id: 'temp_1',
          first_name: 'Sarah',
          last_name: 'Chen',
          email: 'sarah@example.com',
          designation: 'Signer',
          order: 1
        },
        {
          id: 'temp_2',
          first_name: 'Mike',
          last_name: 'Torres',
          email: 'mike@example.com',
          designation: 'Signer',
          order: 2
        }
      ],
      fields: [
        {
          type: 'signature',
          position: { x: 15, y: 80, width: 30, height: 8 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_1',
          background_color: '#E3F2FD'
        },
        {
          type: 'signature',
          position: { x: 55, y: 80, width: 30, height: 8 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_2',
          background_color: '#FFF3E0'
        },
        {
          type: 'date',
          position: { x: 15, y: 90, width: 20, height: 5 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_1',
          background_color: '#E3F2FD'
        },
        {
          type: 'date',
          position: { x: 55, y: 90, width: 20, height: 5 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_2',
          background_color: '#FFF3E0'
        }
      ]
    })
  }
);

In this example, Sarah's fields get a light blue background and Mike's get a light orange. When each signer opens the document, their fields are visually distinct from the other person's, even before they start filling anything in.

You can also set background colors on anchor tag definitions if you're using text-based field placement:

{
  "anchor_string": "{{SIGN_HERE}}",
  "type": "signature",
  "recipient_id": "temp_1",
  "required": true,
  "background_color": "#FFFDE7"

Background colors can also be updated on existing fields via PATCH operations, so you can adjust the visual styling without rebuilding the entire signing request.

Practical patterns

Color-coding by signer

Assign a consistent color to each recipient across all their fields. Light blue for signer 1, light orange for signer 2, light green for signer 3. This is the most impactful use case for multi-party documents where signers need to quickly identify which fields belong to them.

Highlighting required fields

If your documents mix required and optional fields, give required fields a subtle yellow highlight (#FFFDE7) and leave optional fields with the default background. Signers immediately see what they can't skip.

Highlighting required fields

Grouping related fields

Use the same background color on fields that logically belong together, like a set of address fields or a block of employment details. This creates visual grouping without needing to restructure the document layout.

Grouping related fields

Flagging changes

When sending an updated version of a document for re-signing, highlight the fields that changed since the last version. A light red background (#FFEBEE) on modified fields calls attention to exactly what's different.

Flagging changes

API reference

The background_color property is available on these schemas: Field, TemplateField, SigningRequestField, and AnchorTag.

Type: string | null. Accepts hex color values in 3-digit or 6-digit format with the # prefix. Set to null or omit to use the default field appearance. Invalid hex values will return a validation error.

The property is accepted on signing request creation (POST /signing-requests), template creation (POST /templates), and update operations (PUT and PATCH on both signing requests and templates).

See the API changelog for the complete v1.11.0 schema reference.

Design tips

Stick to light pastels for field backgrounds

Dark colors make field text unreadable, and saturated colors look aggressive on a professional document. Good starting points: #E3F2FD (blue), #E8F5E9 (green), #FFF3E0 (orange), #FFFDE7 (yellow), #F3E5F5 (purple), #FFEBEE (red).

Keep your color scheme consistent across documents

If signer 1 is always blue and signer 2 is always orange, recipients learn the pattern and move through documents faster over time.

Keep your color scheme consistent across documents

If signer 1 is always blue and signer 2 is always orange, recipients learn the pattern and move through documents faster over time.

For accessibility, don't rely on color alone to communicate meaning

Background colors should reinforce field labels and instructions, not replace them. A field highlighted in yellow still needs a clear label explaining what to enter.

For accessibility, don't rely on color alone to communicate meaning

Background colors should reinforce field labels and instructions, not replace them. A field highlighted in yellow still needs a clear label explaining what to enter.

Ready to add e-signatures to your application?

Get started for free. No credit card required. Pay only €0.029 per envelope when you're ready to go live.

Get your API key now

Ready to add e-signatures to your application?

Get started for free. No credit card required. Pay only €0.029 per envelope when you're ready to go live.

Get your API key now

Ready to add e-signatures to your application?

Get started for free. No credit card required. Pay only €0.029 per envelope when you're ready to go live.

Get your API key now