Características: Colores de fondo del campo

Soporte de firma multilingüe

Colores de fondo personalizados para cada campo

Colores de fondo personalizados para cada campo

Colores de fondo personalizados para cada campo

Logo de G2

Calificación de 4.8 estrellas en g2.com

Presentamos: Colores de fondo de campo personalizado

Firma.dev ahora te permite establecer un color de fondo personalizado en cualquier campo mediante una sola propiedad. Resalta los campos requeridos en amarillo para que sean imposibles de pasar por alto, codifica por colores los campos por destinatario para que cada firmante sepa exactamente dónde mirar, o agrupa visualmente entradas relacionadas para que el documento se lea como un formulario bien diseñado en lugar de una pared de casillas.

Colores de fondo de campo enviados en v1.11.0 y funcionan en todos los tipos de campo.

¿Cuáles son los colores de fondo de los campos?

Una propiedad, cada tipo de campo

La propiedad background_color acepta una cadena de color hexadecimal y la aplica como relleno de fondo en cualquier campo de un documento de firma. Funciona en firmas, iniciales, entradas de texto, fechas, casillas de verificación, listas desplegables, cargas de archivos y todos los demás tipos de campos que Firma.dev admite.

Cómo establecer y restablecer los colores del campo

Establezca background_color a un valor hexadecimal como "#FFFDE7" (amarillo claro) o "#E8F5E9" (verde claro) y el campo se renderiza con ese fondo durante la experiencia de firma. Establézcalo en null o omítalo por completo para usar la apariencia predeterminada.

Formatos y tipos de campo compatibles

Se aceptan formatos hexadecimales de 3 dígitos (#fff) y de 6 dígitos (#FFFDE7). La propiedad está disponible en definiciones de campos estándar, campos de plantillas, campos de solicitudes de firma y definiciones de etiquetas ancla.

Cómo usar colores de fondo

Agregue background_color a cualquier campo en su solicitud de firma o llamada para crear una plantilla:

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: 'Firmante',
          order: 1
        },
        {
          id: 'temp_2',
          first_name: 'Mike',
          last_name: 'Torres',
          email: 'mike@example.com',
          designation: 'Firmante',
          order: 2
        }
      ],
      fields: [
        {
          type: 'firma',
          position: { x: 15, y: 80, width: 30, height: 8 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_1',
          background_color: '#E3F2FD'
        },
        {
          type: 'firma',
          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'
        }
      ]
    })
  }
);

En este ejemplo, los campos de Sarah tienen un fondo azul claro y los de Mike tienen un fondo naranja claro. Cuando cada firmante abre el documento, sus campos son visualmente distintos de los de la otra persona, incluso antes de que empiecen a llenar cualquier cosa.

También puedes establecer colores de fondo en las definiciones de etiquetas de anclaje si estás usando la ubicación de campos basada en texto:

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

Los colores de fondo también se pueden actualizar en los campos existentes mediante operaciones de PATCH, por lo que puede ajustar el estilo visual sin reconstruir la solicitud de firma completa.

Patrones prácticos

Patrones prácticos

Codificación por colores según el firmante

Codificación por colores según el firmante

Asignar un color coherente a cada destinatario en todos sus campos. Azul claro para el firmante 1, naranja claro para el firmante 2, verde claro para el firmante 3. Este es el caso de uso más impactante para documentos multipartidarios donde los firmantes necesitan identificar rápidamente a qué campos les pertenecen.

Resaltando los campos obligatorios

Si tus documentos mezclan campos obligatorios y opcionales, da a los campos obligatorios un sutil resaltado amarillo (#FFFDE7) y deja los campos opcionales con el fondo predeterminado. Los firmantes ven inmediatamente lo que no pueden omitir.

Resaltando los campos obligatorios

Si tus documentos mezclan campos obligatorios y opcionales, da a los campos obligatorios un sutil resaltado amarillo (#FFFDE7) y deja los campos opcionales con el fondo predeterminado. Los firmantes ven inmediatamente lo que no pueden omitir.

Agrupando campos relacionados

Utiliza el mismo color de fondo en campos que lógicamente pertenecen juntos, como un conjunto de campos de dirección o un bloque de detalles de empleo. Esto crea un agrupamiento visual sin necesidad de reestructurar el diseño del documento.

Agrupando campos relacionados

Utiliza el mismo color de fondo en campos que lógicamente pertenecen juntos, como un conjunto de campos de dirección o un bloque de detalles de empleo. Esto crea un agrupamiento visual sin necesidad de reestructurar el diseño del documento.

Marcar cambios

Al enviar una versión actualizada de un documento para volver a firmar, destaca los campos que cambiaron desde la última versión. Un fondo rojo claro (#FFEBEE) en los campos modificados llama la atención sobre exactamente qué es diferente.

Marcar cambios

Al enviar una versión actualizada de un documento para volver a firmar, destaca los campos que cambiaron desde la última versión. Un fondo rojo claro (#FFEBEE) en los campos modificados llama la atención sobre exactamente qué es diferente.

Referencia de la API

La propiedad background_color está disponible en estos esquemas: Field, TemplateField, SigningRequestField y AnchorTag.

Tipo: string | null. Acepta valores de color hexadecimales en formato de 3 dígitos o 6 dígitos con el prefijo #. Establezca en null u omita para usar la apariencia predeterminada del campo. Los valores hexadecimales no válidos devolverán un error de validación.

La propiedad se acepta en la creación de solicitudes de firma (POST /signing-requests), creación de plantillas (POST /templates), y operaciones de actualización (PUT y PATCH tanto en las solicitudes de firma como en las plantillas).

Consulte el registro de cambios de la API para la referencia completa del esquema v1.11.0.

Consejos de diseño

Consejos de diseño

Apuesta por tonos pastel claros para los fondos de campo

Apuesta por tonos pastel claros para los fondos de campo

Los colores oscuros hacen que el texto del campo sea ilegible, y los colores saturados parecen agresivos en un documento profesional. Buenos puntos de partida: #E3F2FD (azul), #E8F5E9 (verde), #FFF3E0 (naranja), #FFFDE7 (amarillo), #F3E5F5 (morado), #FFEBEE (rojo).

Mantén tu esquema de colores consistente en todos los documentos

Si el firmante 1 es siempre azul y el firmante 2 es siempre naranja, los destinatarios aprenden el patrón y avanzan más rápido a través de los documentos con el tiempo.

Mantén tu esquema de colores consistente en todos los documentos

Si el firmante 1 es siempre azul y el firmante 2 es siempre naranja, los destinatarios aprenden el patrón y avanzan más rápido a través de los documentos con el tiempo.

Para la accesibilidad, no confíes únicamente en el color para comunicar significado.

Los colores de fondo deben reforzar las etiquetas de los campos e instrucciones, no reemplazarlas. Un campo resaltado en amarillo aún necesita una etiqueta clara que explique qué ingresar.

Para la accesibilidad, no confíes únicamente en el color para comunicar significado.

Los colores de fondo deben reforzar las etiquetas de los campos e instrucciones, no reemplazarlas. Un campo resaltado en amarillo aún necesita una etiqueta clara que explique qué ingresar.

Background Image

¿Listo para añadir firmas electrónicas a tu aplicación?

Comienza gratis. No se requiere tarjeta de crédito. Paga solo 0,029 € por sobre cuando estés listo para ponerlo en marcha.

Background Image

¿Listo para añadir firmas electrónicas a tu aplicación?

Comienza gratis. No se requiere tarjeta de crédito. Paga solo 0,029 € por sobre cuando estés listo para ponerlo en marcha.

Background Image

¿Listo para añadir firmas electrónicas a tu aplicación?

Comienza gratis. No se requiere tarjeta de crédito. Paga solo 0,029 € por sobre cuando estés listo para ponerlo en marcha.