Couleurs de fond de champ : Mettre en surbrillance et appliquer un code couleur aux champs signataire

Connexion

S'inscrire

Accueil

Documentation

Perspectives

Tarification

Comparaison

Connexion

S'inscrire

Fonctionnalités : Couleurs de fond des champs

Support de signature multilingue

Couleurs d'arrière-plan personnalisées pour chaque champ

Obtenir la clé API

Note de 4,8 étoiles sur g2.com

Pourquoi les signataires manquent-ils les bons champs

Lorsqu'un signataire ouvre un document avec 15 champs répartis sur quatre pages, les champs qui nécessitent une attention particulière ne se démarquent pas toujours. Les champs obligatoires sont parfois ignorés, les champs facultatifs sont remplis inutilement, et les documents à multiples signataires deviennent un jeu de devinettes : "quels champs sont les miens ?"

Présentation : Couleurs de fond des champs personnalisés

Firma.dev vous permet désormais de définir une couleur de fond personnalisée sur n'importe quel champ via une seule propriété. Mettez en surbrillance les champs requis en jaune afin qu'ils soient impossibles à manquer, codez les champs par couleur suivant le destinataire pour que chaque signataire sache exactement où regarder, ou regroupez visuellement les entrées associées afin que le document se lise comme un formulaire bien conçu plutôt qu'un mur de cases.

Les couleurs d'arrière-plan des champs expédiées dans v1.11.0 et fonctionnent sur tous les types de champs.

Quelles sont les couleurs de fond des champs ?

Une propriété, chaque type de champ

La propriété background_color accepte une chaîne de couleur hexadécimale et l'applique comme remplissage de fond sur n'importe quel champ dans un document de signature. Elle fonctionne sur les signatures, les initiales, les champs de texte, les dates, les cases à cocher, les listes déroulantes, les téléversements de fichiers, et sur tous les autres types de champs que Firma.dev prend en charge.

Comment définir et réinitialiser les couleurs de champ

Définissez background_color sur une valeur hexadécimale comme "#FFFDE7" (jaune clair) ou "#E8F5E9" (vert clair) et le champ s'affiche avec cet arrière-plan dans l'expérience de signature. Définissez-le sur null ou omettez-le complètement pour utiliser l'apparence par défaut.

Formats et types de champ pris en charge

Les formats hexadécimaux à 3 chiffres (#fff) et à 6 chiffres (#FFFDE7) sont acceptés. La propriété est disponible sur les définitions de champs standards, les champs de modèles, les champs de demandes de signature et les définitions de balises d'ancrage.

Obtenir la clé API

Comment utiliser les couleurs de fond

Ajoutez background_color à tout champ dans votre demande de signature ou votre appel de création de modèle :

const réponse = attendre fetch(
  'https://api.Firma.dev/functions/v1/signing-request-api/signing-requests',
  {
    méthode: 'POST',
    en-têtes: {
      'Authorization': `Bearer ${process.fr.FIRMA_API_KEY}`,
      'Content-Type': 'application/json'
    },
    corp: JSON.stringify({
      workspace_id: workspaceId,
      template_id: templateId,
      recipients: [
        {
          id: 'temp_1',
          first_name: 'Sarah',
          last_name: 'Chen',
          email: 'sarah@example.com',
          designation: 'Signataire',
          ordre: 1
        },
        {
          id: 'temp_2',
          first_name: 'Mike',
          last_name: 'Torres',
          email: 'mike@example.com',
          designation: 'Signataire',
          ordre: 2
        }
      ],
      champs: [
        {
          type: 'signature',
          position: { x: 15, y: 80, largeur: 30, hauteur: 8 },
          numéro_de_page: 1,
          requis: true,
          recipient_id: 'temp_1',
          couleur_de_fond: '#E3F2FD'
        },
        {
          type: 'signature',
          position: { x: 55, y: 80, largeur: 30, hauteur: 8 },
          numéro_de_page: 1,
          requis: true,
          recipient_id: 'temp_2',
          couleur_de_fond: '#FFF3E0'
        },
        {
          type: 'date',
          position: { x: 15, y: 90, largeur: 20, hauteur: 5 },
          numéro_de_page: 1,
          requis: true,
          recipient_id: 'temp_1',
          couleur_de_fond: '#E3F2FD'
        },
        {
          type: 'date',
          position: { x: 55, y: 90, largeur: 20, hauteur: 5 },
          numéro_de_page: 1,
          requis: true,
          recipient_id: 'temp_2',
          couleur_de_fond: '#FFF3E0'
        }
      ]
    })
  }
);

Dans cet exemple, les champs de Sarah ont un fond bleu clair et ceux de Mike ont un fond orange clair. Lorsque chaque signataire ouvre le document, leurs champs sont visuellement distincts de ceux de l'autre personne, avant même de commencer à remplir quoi que ce soit.

Vous pouvez également définir des couleurs de fond sur les définitions de balises d'ancrage si vous utilisez le placement des champs basé sur du texte:

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

Les couleurs de fond peuvent également être mises à jour sur les champs existants via des opérations PATCH, afin que vous puissiez ajuster le style visuel sans reconstruire la demande de signature entière.

Modèles pratiques

Codage couleur par signataire

Attribuez une couleur cohérente à chaque destinataire dans tous leurs champs. Bleu clair pour le signataire 1, orange clair pour le signataire 2, vert clair pour le signataire 3. C'est le cas d'utilisation le plus impactant pour les documents multipartites où les signataires doivent identifier rapidement quels champs leur appartiennent.

Mise en évidence des champs obligatoires

Si vos documents mélangent des champs obligatoires et facultatifs, donnez aux champs obligatoires une légère surbrillance jaune (#FFFDE7) et laissez les champs facultatifs avec le fond par défaut. Les signataires voient immédiatement ce qu'ils ne peuvent pas ignorer.

Mise en évidence des champs obligatoires

Regroupement des champs connexes

Utilisez la même couleur de fond sur les champs qui appartiennent logiquement ensemble, comme un ensemble de champs d'adresse ou un bloc de détails d'emploi. Cela crée un regroupement visuel sans avoir besoin de restructurer la mise en page du document.

Regroupement des champs connexes

Signaler des changements

Lors de l'envoi d'une version mise à jour d'un document pour une nouvelle signature, mettez en évidence les champs qui ont changé depuis la dernière version. Un fond rouge clair (#FFEBEE) sur les champs modifiés attire l'attention sur ce qui est différent.

Signaler des changements

Référence API

La propriété background_color est disponible sur ces schémas : Field, TemplateField, SigningRequestField, et AnchorTag.

Type : string | null. Accepte les valeurs de couleur hexadécimales au format 3 chiffres ou 6 chiffres avec le préfixe #. Définissez sur null ou omettez pour utiliser l'apparence par défaut du champ. Les valeurs hexadécimales invalides retourneront une erreur de validation.

La propriété est acceptée lors de la création de demande de signature (POST /signing-requests), la création de modèle (POST /templates), et les opérations de mise à jour (PUT et PATCH sur les demandes de signature et les modèles).

Voir le changelog de l'API pour la référence complète du schéma v1.11.0.

Conseils de conception

Restez avec des pastels clairs pour les arrière-plans des champs

Les couleurs sombres rendent le texte du champ illisible, et les couleurs saturées semblent agressives dans un document professionnel. Bons points de départ : #E3F2FD (bleu), #E8F5E9 (vert), #FFF3E0 (orange), #FFFDE7 (jaune), #F3E5F5 (violet), #FFEBEE (rouge).

Gardez votre schéma de couleurs cohérent dans tous les documents

Si le signataire 1 est toujours bleu et le signataire 2 est toujours orange, les destinataires apprennent le modèle et passent plus rapidement à travers les documents avec le temps.

Gardez votre schéma de couleurs cohérent dans tous les documents

Si le signataire 1 est toujours bleu et le signataire 2 est toujours orange, les destinataires apprennent le modèle et passent plus rapidement à travers les documents avec le temps.

Pour l'accessibilité, ne vous fiez pas uniquement à la couleur pour communiquer une signification.

Les couleurs de fond doivent renforcer les étiquettes des champs et les instructions, pas les remplacer. Un champ mis en évidence en jaune a toujours besoin d'une étiquette claire expliquant quoi saisir.

Pour l'accessibilité, ne vous fiez pas uniquement à la couleur pour communiquer une signification.

Prêt à ajouter des signatures électroniques à votre application ?

Commencez gratuitement. Aucune carte de crédit requise. Payez uniquement 0,029 € par frveloppe lorsque vous êtes prêt à passer en ligne.

Obtenir la clé API

Prêt à ajouter des signatures électroniques à votre application ?

Commencez gratuitement. Aucune carte de crédit requise. Payez uniquement 0,029 € par frveloppe lorsque vous êtes prêt à passer en ligne.

Obtenir la clé API

Prêt à ajouter des signatures électroniques à votre application ?

Commencez gratuitement. Aucune carte de crédit requise. Payez uniquement 0,029 € par frveloppe lorsque vous êtes prêt à passer en ligne.

Obtenir la clé API