Merkmale: Hintergrundfarben für Felder

Mehrsprachige Signaturunterstützung

Benutzerdefinierte Hintergrundfarben für jedes Feld

Benutzerdefinierte Hintergrundfarben für jedes Feld

Benutzerdefinierte Hintergrundfarben für jedes Feld

G2-Logo

4,8-Sterne-Bewertung auf g2.com

Einführung: Hintergrundfarben für benutzerdefinierte Felder

Firma.dev ermöglicht es Ihnen jetzt, eine benutzerdefinierte Hintergrundfarbe für jedes Feld über eine einzelne Eigenschaft festzulegen. Markieren Sie erforderliche Felder mit Gelb, damit sie nicht übersehen werden können, kodieren Sie Felder nach Empfänger farblich, damit jeder Unterzeichner genau weiß, wo er hinschauen muss, oder gruppieren Sie verwandte Eingaben visuell, sodass das Dokument wie ein gut gestaltetes Formular und nicht wie eine Ansammlung von Kästchen aussieht.

Feldhintergrundfarben wurden in v1.11.0 ausgeliefert und funktionieren mit jedem Feldtyp.

Was sind die Hintergrundfarben von Feldern?

Ein Attribut, jeder Feldtyp

Die background_color-Eigenschaft akzeptiert einen Hex-Farbcode und wendet ihn als Hintergrundfüllung auf jedes Feld in einem Signaturdokument an. Es funktioniert bei Unterschriften, Initialen, Texteingaben, Daten, Kontrollkästchen, Dropdowns, Datei-Uploads und jedem anderen Feldtyp, den Firma.dev unterstützt.

So setzen und zurücksetzen Sie die Farben von Feldern

Setzen Sie background_color auf einen Hex-Wert wie "#FFFDE7" (hellgelb) oder "#E8F5E9" (hellgrün) und das Feld wird mit diesem Hintergrund im Signatur-Erlebnis angezeigt. Setzen Sie es auf null oder lassen Sie es ganz weg, um das Standard-Erscheinungsbild zu verwenden.

Unterstützte Formate und Feldtypen

Sowohl 3-stellige (#fff) als auch 6-stellige (#FFFDE7) Hex-Formate werden akzeptiert. Die Eigenschaft ist in standardmäßigen Felddefinitionen, Vorlagenfeldern, Unterzeichnungsanforderungsfeldern und Anker-Tag-Definitionen verfügbar.

Wie man Hintergrundfarben verwendet

Fügen Sie background_color zu jedem Feld in Ihrer Signieranfrage oder dem Erstellungsaufruf der Vorlage hinzu:

const antwort = await fetch(
  'https://api.Firma.dev/functions/v1/signing-request-api/signing-requests',
  {
    methode: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.FIRMA_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      arbeitsbereich_id: arbeitsbereichId,
      vorlagen_id: vorlagenId,
      empfänger: [
        {
          id: 'temp_1',
          vorname: 'Sarah',
          nachname: 'Chen',
          email: 'sarah@example.com',
          bezeichnung: 'Unterzeichner',
          reihenfolge: 1
        },
        {
          id: 'temp_2',
          vorname: 'Mike',
          nachname: 'Torres',
          email: 'mike@example.com',
          bezeichnung: 'Unterzeichner',
          reihenfolge: 2
        }
      ],
      felder: [
        {
          typ: 'Unterschrift',
          position: { x: 15, y: 80, breite: 30, höhe: 8 },
          seitennummer: 1,
          erforderlich: true,
          empfänger_id: 'temp_1',
          hintergrundfarbe: '#E3F2FD'
        },
        {
          typ: 'Unterschrift',
          position: { x: 55, y: 80, breite: 30, höhe: 8 },
          seitennummer: 1,
          erforderlich: true,
          empfänger_id: 'temp_2',
          hintergrundfarbe: '#FFF3E0'
        },
        {
          typ: 'Datum',
          position: { x: 15, y: 90, breite: 20, höhe: 5 },
          seitennummer: 1,
          erforderlich: true,
          empfänger_id: 'temp_1',
          hintergrundfarbe: '#E3F2FD'
        },
        {
          typ: 'Datum',
          position: { x: 55, y: 90, breite: 20, höhe: 5 },
          seitennummer: 1,
          erforderlich: true,
          empfänger_id: 'temp_2',
          hintergrundfarbe: '#FFF3E0'
        }
      ]
    })
  }
);

In diesem Beispiel erhalten Sarahs Felder einen hellblauen Hintergrund und Mikes einen hellorangenen. Wenn jeder Unterzeichner das Dokument öffnet, sind ihre Felder optisch deutlich von den anderen Personen unterschieden, noch bevor sie etwas ausfüllen.

Sie können auch Hintergrundfarben für Ankertag-Definitionen festlegen, wenn Sie eine textbasierte Feldplatzierung verwenden:

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

Hintergrundfarben können auch bei vorhandenen Feldern über PATCH-Operationen aktualisiert werden, sodass Sie das visuelle Styling anpassen können, ohne die gesamte Signaturanfrage neu erstellen zu müssen.

Praktische Muster

Praktische Muster

Farbcodierung nach Unterzeichner

Farbcodierung nach Unterzeichner

Weisen Sie jedem Empfänger über alle seine Felder hinweg eine konsistente Farbe zu. Hellblau für Unterzeichner 1, hellorange für Unterzeichner 2, hellgrün für Unterzeichner 3. Dies ist der wirkungsvollste Anwendungsfall für Mehrparteien-Dokumente, bei denen Unterzeichner schnell erkennen müssen, welche Felder ihnen gehören.

Hervorhebung der erforderlichen Felder

Wenn Ihre Dokumente erforderliche und optionale Felder mischen, geben Sie den erforderlichen Feldern einen subtilen gelben Hintergrund (#FFFDE7) und lassen Sie optionale Felder mit dem Standardhintergrund. Unterzeichner sehen sofort, was sie nicht überspringen können.

Hervorhebung der erforderlichen Felder

Wenn Ihre Dokumente erforderliche und optionale Felder mischen, geben Sie den erforderlichen Feldern einen subtilen gelben Hintergrund (#FFFDE7) und lassen Sie optionale Felder mit dem Standardhintergrund. Unterzeichner sehen sofort, was sie nicht überspringen können.

Gruppierung verwandter Felder

Verwenden Sie die gleiche Hintergrundfarbe auf Feldern, die logisch zusammengehören, wie ein Satz von Adressfeldern oder ein Block von Beschäftigungsdetails. Dies schafft eine visuelle Gruppierung, ohne die Dokumentenlayout umstrukturieren zu müssen.

Gruppierung verwandter Felder

Verwenden Sie die gleiche Hintergrundfarbe auf Feldern, die logisch zusammengehören, wie ein Satz von Adressfeldern oder ein Block von Beschäftigungsdetails. Dies schafft eine visuelle Gruppierung, ohne die Dokumentenlayout umstrukturieren zu müssen.

Änderungen kennzeichnen

Beim Senden einer aktualisierten Version eines Dokuments zum erneuten Signieren markieren Sie die Felder, die sich seit der letzten Version geändert haben. Ein hellroter Hintergrund (#FFEBEE) auf geänderten Feldern lenkt die Aufmerksamkeit darauf, was sich genau verändert hat.

Änderungen kennzeichnen

Beim Senden einer aktualisierten Version eines Dokuments zum erneuten Signieren markieren Sie die Felder, die sich seit der letzten Version geändert haben. Ein hellroter Hintergrund (#FFEBEE) auf geänderten Feldern lenkt die Aufmerksamkeit darauf, was sich genau verändert hat.

API-Referenz

Die background_color-Eigenschaft ist verfügbar in diesen Schemata: Field, TemplateField, SigningRequestField und AnchorTag.

Typ: string | null. Akzeptiert Hex-Farbwerte im 3-stelligen oder 6-stelligen Format mit dem Präfix #. Setzen Sie diese auf null oder lassen Sie sie weg, um das standardmäßige Erscheinungsbild des Feldes zu verwenden. Ungültige Hex-Werte führen zu einem Validierungsfehler.

Die Eigenschaft wird bei der Erstellung einer Signing-Anfrage akzeptiert (POST /signing-requests), bei der Erstellung von Vorlagen (POST /templates) und bei Aktualisierungsoperationen (PUT und PATCH auf sowohl Signing-Anfragen als auch Vorlagen).

Siehe das API-Änderungsprotokoll für die vollständige v1.11.0-Schemareferenz.

Gestaltungstipps

Gestaltungstipps

Halten Sie sich an helle Pastelltöne für die Hintergrundgestaltung von Feldern

Halten Sie sich an helle Pastelltöne für die Hintergrundgestaltung von Feldern

Dunkle Farben machen den Text im Feld unleserlich, und gesättigte Farben wirken aggressiv in einem professionellen Dokument. Gute Ausgangspunkte: #E3F2FD (blau), #E8F5E9 (grün), #FFF3E0 (orange), #FFFDE7 (gelb), #F3E5F5 (lila), #FFEBEE (rot).

Halten Sie Ihr Farbschema in allen Dokumenten konsistent

Wenn Unterzeichner 1 immer blau und Unterzeichner 2 immer orange ist, erkennen die Empfänger das Muster und bewegen sich im Laufe der Zeit schneller durch die Dokumente.

Halten Sie Ihr Farbschema in allen Dokumenten konsistent

Wenn Unterzeichner 1 immer blau und Unterzeichner 2 immer orange ist, erkennen die Empfänger das Muster und bewegen sich im Laufe der Zeit schneller durch die Dokumente.

Für die Barrierefreiheit sollte man sich nicht nur auf Farben verlassen, um Bedeutung zu vermitteln.

Hintergrundfarben sollten Feldbezeichnungen und Anweisungen verstärken, nicht sie ersetzen. Ein Feld, das gelb hervorgehoben ist, benötigt weiterhin einen klaren Hinweis, was eingegeben werden soll.

Für die Barrierefreiheit sollte man sich nicht nur auf Farben verlassen, um Bedeutung zu vermitteln.

Hintergrundfarben sollten Feldbezeichnungen und Anweisungen verstärken, nicht sie ersetzen. Ein Feld, das gelb hervorgehoben ist, benötigt weiterhin einen klaren Hinweis, was eingegeben werden soll.

Background Image

Bereit, elektronischen Unterschriften zu Ihrer Anwendung hinzuzufügen?

Kostenlos starten. Keine Kreditkarte erforderlich. Zahlen Sie nur 0,029 € pro Umschlag, wenn Sie bereit sind, live zu gehen.

Background Image

Bereit, elektronischen Unterschriften zu Ihrer Anwendung hinzuzufügen?

Kostenlos starten. Keine Kreditkarte erforderlich. Zahlen Sie nur 0,029 € pro Umschlag, wenn Sie bereit sind, live zu gehen.

Background Image

Bereit, elektronischen Unterschriften zu Ihrer Anwendung hinzuzufügen?

Kostenlos starten. Keine Kreditkarte erforderlich. Zahlen Sie nur 0,029 € pro Umschlag, wenn Sie bereit sind, live zu gehen.