Liquid Mode para la experiencia de firma web para móviles

Nota:

Actualmente, Liquid Mode solo está disponible en los entornos NA1, NA2 y NA4.

Identifique su entorno aquí >

Introducción

La experiencia de firma Liquid Mode mejora la visualización de los documentos en función del tipo de dispositivo del destinatario, lo que reduce la necesidad de pellizcar y hacer zoom y se centra fácilmente en los campos que se deben rellenar.

Los acuerdos compatibles con el Liquid Mode se generan con dos vistas para el destinatario:

  1. Una vista de PDF creada con toda la información de estilo presente en el HTML cargado, que corresponde a la versión firmada del acuerdo que está disponible para su descarga, al igual que la vista de PDF que Adobe Sign genera para todos los acuerdos.
  2. Una vista de Liquid Mode que reajusta el documento HTML introducido y se optimiza para los tamaños de pantalla pequeños. La vista de Liquid Mode presenta una experiencia muy seleccionada que anula el estilo especificado en el documento HTML original.

La interfaz permite que el destinatario cambie fácilmente entre el Liquid Mode y las vistas PDF tradicionales del documento, según sus preferencias, y captura las mismas firmas legalmente vinculantes que espera.

 

Los acuerdos compatibles con el Liquid Mode se crean con un solo archivo HTML como contenido de origen.

Hay algunas restricciones en las construcciones de HTML y campos de formulario en el documento HTML cargado. Concretamente:

  • el acuerdo debe crearse con un único documento HTML (solo un archivo)
    • Si se utiliza más de un documento para crear el acuerdo, solo se genera una vista de PDF
  • el documento HTML no puede contener JavaScript. No se permite el uso de etiquetas <script> como JavaScript insertado o como referencia a archivos JavaScript externos, ni tampoco en atributos de etiquetas HTML.
    • Si se encuentra JavaScript en el documento HTML, Adobe Sign solo crea la vista de PDF.
  • el documento HTML solo puede utilizar las etiquetas HTML admitidas en la sección <body> del documento HTML, tal y como se describe en la sección Etiquetas HTML admitidas.
    • Si hay etiquetas HTML no compatibles en el cuerpo del documento HTML, Adobe Sign solo crea la vista de PDF.

Como la vista de Liquid Mode tiene una experiencia muy precisa, el CSS especificado en el archivo HTML se omite (SOLO para la vista de Liquid Mode) y solo los atributos de las etiquetas HTML compatibles influirán en la vista de Liquid Mode. Sin embargo, no existen restricciones de este tipo para la vista de PDF. Adobe Sign utiliza toda la gama de atributos disponibles para las etiquetas admitidas, así como el CSS especificado en el documento HTML, para generar la vista de PDF.

La notación de etiqueta de texto de Adobe Sign se utiliza para especificar los campos de formulario en el documento HTML.

Flujo de trabajo del Liquid Mode

Nota:

Si la función Liquid Mode está activada pero la vista de Liquid Mode no se puede generar por algún motivo, el acuerdo se crea solo con la vista de PDF.

En el correo electrónico de confirmación enviado al remitente se mostrarán los motivos por los que no se pudo generar la vista de Liquid Mode.

El Liquid Mode se admite actualmente en dispositivos móviles, con compatibilidad adicional en desarrollo.


Habilitar/enviar acuerdos compatibles con el Liquid Mode

  1. Asegúrese de que el Liquid Mode esté activado en el menú Administración de Adobe Sign:

    • Vaya a Configuración de envío > Liquid Mode.
      • La configuración se puede modificar en el nivel de cuenta o de grupo.
    Vaya a los controles del Liquid Mode.

  2. Enviar un único archivo HTML mediante uno de los siguientes métodos:

    Enviar documento HTML


Etiquetas HTML compatibles

Para crear correctamente un acuerdo con la vista de Liquid Mode, el documento HTML NO puede contener construcciones de JavaScript. 

Solo se pueden utilizar las etiquetas siguientes en el cuerpo del documento HTML:

Categoría

Etiquetas HTML

Atributos que afectan a la vista de Liquid Mode

Restricciones

Encabezados

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

NINGUNO

 

División de contenido

<div>

alinear

 

Salto

<br>

NINGUNO

 

Regla horizontal

<hr>

NINGUNO

 

Párrafo

<p>

alinear

 

Imágenes

<img>

src, alt, altura, anchura

Consulte la sección “Compatibilidad de las imágenes

Texto insertado

<b>, <i>, <u>, <s>, <strong>, <em>, <span>, <sub>, <sup>

NINGUNO

 

Lista ordenada

<ol>, <li>

valor, tipo, invertido, inicio

 

Lista sin ordenar

<ul>, <li>

valor, invertido, inicio

 

Hipervínculo

<a>

href

El protocolo de URL está restringido a http, https y mailto

Tabla

<table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>, <col>, <colgroup>

NINGUNO

1. NO se admiten tablas anidadas

2. NO se admiten campos de formulario en las tablas

Etiqueta de campo de formulario

<label>

durante

Consulte la sección “Etiquetas de campos de formulario”.

Agrupación de campos de formulario

<fieldset>, <legend>

NINGUNO

Consulte la sección “Etiquetado de grupos de campos”.


Especificación de campos de formulario

Los campos de formulario deben especificarse en el documento HTML mediante la notación etiqueta de texto de Adobe Sign.

La siguiente tabla muestra campos de formulario de ejemplo con etiquetas de texto de Adobe Sign:

Campo

Etiquetas de texto de Sign

Campos de firma (firma, iniciales, bloque de firma, sello)

{{Sig_es_:signer1:signature}}



{{Int_es_:signer1:initials}}



{{SigB_es_:signer1:signatureblock}}



{{OSig_es_:signer1:optsignature}}



{{OInt_es_:signer1:optinitials}}



{{SigStamp_es_:signer1:stampimage(25)}}

Campos del firmante

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

Campos del remitente

{{*Ttl_es_:sender:title}}

Campos prerrellenados

{{price_es_:prefill}}

Sello de participación e ID de transacción

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

Campo de solo lectura

{{!price}}

{{price_es_:readonly}}

Entrada de texto

{{address_es_:signer1}}

{{*city_es_:signer1}}

Casillas de verificación

{{CB1_es_:checkbox(checked)}}

Botón de opción

{{(Red)Color_es_:signer1:label(“Red”)}}

{{(Blue)Color_es_:signer1:label(“Blue”)}}

{{(Green)Color_es_:signer1:label(“Green”)}}

Imagen

{{Image1_es_:signer1:inlineimage(4)}}

Menú desplegable

{{Color_es_:signer1:dropdown(options="Red,Green,Blue”, values=”R,G,B”)}}


Hipervínculo

{{companywebsite_es_:link(http://www.adobe.com):label(Adobe)}}


Archivo adjunto

{{*DriversLicense_es_:signer1:attachment}}

Información

{{Car_color_es:signer1:tooltip('Choose a color')}}

Firma digital

{{digsig1_es_:signer1:digitalsignature}}

Validación de campos

{{*Mobile_es_:signer1:phone}}

{{d_es_:signer1:num(>0,<60)}}

Reglas condicionales

p. ej. {{field_es_:showif(price>60)}}

Campos calculados

{{TV_es_:calc([SubTotal]+[Tax])}}

Nota:

Todas las construcciones de campos de formulario de Adobe Sign son compatibles excepto las siguientes:

Categoría

Construcciones no compatibles

Excepciones

Campo de formulario de firma digital

:digitalsignature no será compatible.



Flujos de trabajo de prerrellenado

La directiva :prefill no será compatible.



Flujos de trabajo de varios firmantes

:signer2, :signer3, etc. no serán compatibles.

La directiva :sender no será compatible.

La directiva :signer1 será compatible.

Campo de formulario de hipervínculo

La directiva :page(N) no será compatible.

:link con protocolos distintos de http, https y mailto.

Las directivas :signer1 y :everyone serán compatibles.

Campos de formulario sin nombre

Los campos de formulario sin nombre no serán compatibles.

Las casillas de verificación sin nombre serán compatibles.

Campos de formulario con nombre cambiado

Varios campos de formulario con el mismo nombre pero con diferentes directivas no serán compatibles.




Etiquetas de campos de formulario

Cada campo de formulario debe tener una etiqueta asociada. Aunque las etiquetas no son obligatorias para todos los campos de formulario, se recomienda encarecidamente que los campos de formulario tengan etiquetas.

Específicamente, en el Liquid Mode:

  • Las etiquetas se utilizan para mejorar la representación visual del campo.
  • Una etiqueta asociada a un campo proporciona sugerencias de accesibilidad. Cuando un campo está seleccionado, un lector de pantalla utiliza la etiqueta para anunciar el campo al usuario.
  • Se puede hacer clic en una etiqueta para seleccionar un campo o para cambiar el valor de un botón de opción o una casilla de verificación.

Los campos de formulario se pueden enlazar a etiquetas mediante la etiqueta HTML <label> de una de las siguientes maneras:

  1. Campo de formulario de Adobe Sign incluido dentro de una etiqueta <label>
    • <label>Firma: {{sig_es_:signer1:signature}}</label>
  2. El atributo “for” de la etiqueta <label> puede hacer referencia al nombre del campo de formulario para vincularlo a un campo de formulario.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Firma: </label>

Las etiquetas que no se pueden enlazar con campos de formulario según las reglas anteriores se representarán como texto de etiqueta no enlazado.

Además, las etiquetas de texto de Adobe Sign admiten la directiva :label para los tipos de campos de formulario:

  • Archivos adjuntos
  • Hipervínculos
  • Casillas de verificación
  • Botones de opción

La directiva :label y la etiqueta <label> de etiquetas de texto de Adobe Sign se pueden combinar de las siguientes maneras:

Tipo de campo de formulario

Función de la directiva :label

Función de la etiqueta HTML <label>

Archivos adjuntos,

Hipervínculos

Especifica la etiqueta que se muestra dentro del cuadro de campo de formulario.

La etiqueta <label> especifica la etiqueta o el encabezado del campo de formulario.

Casilla de verificación,

Opción de botón de opción

Especifica la etiqueta o el encabezado del campo de formulario.

Si la directiva :label de la etiqueta de texto de Adobe Sign no existe, <label> ocupará su lugar en el campo de formulario.

Si tanto :label como <label> están presentes, la vista de Liquid Mode no se creará.

Ejemplos:

  • {{CB_es_:checkbox: signer1:label("Acepto.")}}} <label for=” CB”> Sí</label>
  • {{(Red_v)Color_es_:signer1::label(“Red Color“)} <label for=”(Red_v)Color”>Rojo</label>
Nota:

Las etiquetas para las casillas de verificación se pueden especificar de las siguientes maneras:

  • {{CB_es_:checkbox: signer1:label("Acepto.")}}
  • <label> {{CB_es_:checkbox:signer1}} Acepto.</label>
  • {{CB_es_:checkbox:signer1}} <label for="CB"> Acepto.</label>

Las etiquetas para las opciones de botón de opción se pueden especificar de las siguientes maneras:

  • {{(Red_v)Color_es_:signer1:label(“Rojo”)}}
  • <label> {{(Red_v)Color_es_:signer1}} Rojo </label>
  • {{(Red_v)Color_es_:signer1}} <label for=”(Red_v)Color”>Rojo</label>
Precaución:

Normalmente, en HTML, el atributo “for” hace referencia a un valor de id. de campo. El Liquid Mode utiliza el atributo “for” para hacer referencia a nombres de campo. Esto puede provocar ambigüedad en los campos de formulario clonados, donde hay varias instancias de campos de formulario con la misma directiva de etiqueta de texto de Adobe Sign. En este caso, debemos evitar utilizar el atributo “for” y asociar etiquetas incluyendo la etiqueta de texto dentro de un elemento <label>.

Por ejemplo, el siguiente uso creará campos de formulario clonados con etiquetas diferentes para cada una de las dos instancias en la vista reflow móvil:

  • <label> Oficial {{name_of_official_es_:signer1}} </label>
  • <label> Nombre {{name_of_official_es_:signer1}} </label>

Si un campo de formulario clonado especifica una etiqueta con un atributo “for”, las referencias son ambiguas y no se pueden resolver. En este caso, no se creará una vista de Liquid Mode.

 Por ejemplo, el siguiente uso solo creará una vista de PDF:

  • <label for="name_of_official> Oficial </label> {{name_of_official_es_:signer1}}
  • <label for="name_of_official> Nombre</label> {{name_of_official_es_:signer1}}


Etiquetado de grupos de campos

Las etiquetas se asocian a un solo campo de formulario. Cuando queremos asociar una etiqueta o un pie a un grupo de campos (en particular, a grupos de botones de opción), recomendamos el uso de elementos de conjunto de campos y de leyenda. El conjunto de campos se utiliza para agrupar los elementos y la leyenda se utiliza para proporcionar una leyenda/etiqueta para el grupo. De forma similar a la etiqueta, las ventajas en el Liquid Mode son las siguientes:

  • Una mejor representación visual de un pie/encabezado asociado al grupo de campos.
  • Una buena experiencia de accesibilidad. Los lectores de pantalla anunciarán correctamente el grupo de campos utilizando el contenido de la leyenda.

Por ejemplo:

<fieldset>

        <legend>Elija su color principal favorito</legend>             

        {{(Red)Color_es_:signer1:label("Red")}}<br/>       

        {{(Blue)Color_es_:signer1:label("Blue")}}<br/>       

        {{(Green)Color_es_:signer1:label("Green")}}<br/>       

</fieldset>

Nota:

Para la mayoría de los documentos, el autor no desea la representación predeterminada de un conjunto de campos. 

El cuadro delimitador se puede eliminar con este CSS:

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

Compatibilidad de las imágenes

Se admiten imágenes con las restricciones siguientes:

  • Solo se admite el elemento <img>.
  • El src de un <img> se puede facilitar como datos incrustados (data: scheme) o como una URL web (https: scheme only).
  • Se admiten los formatos siguientes: JPEG, PNG, GIF, BMP y TIFF.
    • En el caso de los GIF animados, el primer fotograma se utilizará como imagen estática.
  • El tamaño de una imagen recuperada de una URL web está limitado a 5 MB.


Flujos de trabajo de Adobe Sign no compatibles

El Liquid Mode no admite los siguientes flujos de trabajo de Adobe Sign:

  • Acuerdo creado a partir de varios documentos
  • Acuerdo creado a partir de documentos que no son HTML
  • Acuerdos creados a partir de plantillas de biblioteca
  • Acuerdos creados en estado DRAFT o AUTHORING
  • Flujos de trabajo de firma digital
  • Flujos de trabajo de varios firmantes
  • Flujos de trabajo de firma escrita
  • Flujos de trabajo de modificación al vuelo
  • Formularios web
  • Flujos de trabajo de grupos en los que la casilla de verificación Previsualizar está activada de forma predeterminada
  • Acuerdos con motivos de firma activados
  • Acuerdos configurados para obligar al firmante a autenticarse cada vez que haga clic en un campo de firma

Si se intenta crear una vista de Liquid Mode en los flujos de trabajo anteriores, solo se crea un acuerdo con la vista de PDF. El correo electrónico de confirmación enviado al remitente enumera las razones por las que no se pudo generar el Liquid Mode.


Notificación de error del Liquid Mode

Si el remitente ha intentado generar un acuerdo con una vista de Liquid Mode, pero Adobe Sign no ha podido generarlo, se le notificará en el correo electrónico de confirmación del acuerdo los problemas específicos que impidieron la creación de la vista de Liquid Mode. El remitente puede resolver los problemas notificados e intentar crear el acuerdo con una vista de Liquid Mode en intentos posteriores.

Los problemas notificados se pueden agrupar en las siguientes categorías:

  • Construcciones HTML no compatibles
  • Etiquetas de texto de Adobe Sign no compatibles
  • Flujos de trabajo de Adobe Sign no compatibles
  • Error interno del Liquid Mode

Los errores internos del Liquid Mode se producen cuando el servidor encuentra condiciones de error inesperadas al intentar crear la vista de Liquid Mode.

Para las otras categorías de error, puede encontrar detalles de los problemas notificados en las siguientes subsecciones:

Si no se puede generar la vista de Liquid Mode debido a construcciones HTML no compatibles, el correo electrónico de confirmación enviado al remitente incluirá una o varias de las siguientes cadenas de error:

Cadenas de error

Elemento no compatible [+nombreEtiqueta]

Protocolo URL no compatible [+URL]

No se admiten campos de formulario en las tablas [+nombreEtiqueta]

No se admiten tablas anidadas

Elemento secundario de etiqueta no válido [+nombreEtiqueta]

Consulte la sección sobre Etiquetas HTML compatibles para obtener más información.

Si no se puede generar la vista de Liquid Mode debido a construcciones de etiquetas de texto de Adobe Sign no compatibles, el correo electrónico de confirmación enviado al remitente incluirá una o varias de las siguientes cadenas de error:

Cadenas de error

No se encuentra la etiqueta de definición de la referencia [+nombreCorto]

No se admiten campos prerrellenados [+nombre]

No se admiten hipervínculos internos [+nombre]

Solo se admiten campos sin nombre para las casillas de verificación

No se admiten campos con el mismo nombre y directivas diferentes [+nombre]

No se admiten las firmas digitales [+nombre]

Los campos no pueden tener un elemento de etiqueta y una directiva de etiqueta [+nombre]

Falta el campo de formulario de Sign para la etiqueta de texto: [+nombre]

Consulte la sección sobre Especificación de campos de formulario para obtener más información.

Si no se pudo generar la vista de Liquid Mode debido a flujos de trabajo de Adobe Sign no compatibles, el correo electrónico de confirmación enviado al remitente incluirá una o varias de las siguientes cadenas de error:

Cadenas de error

El acuerdo es una plantilla de biblioteca

El acuerdo requiere una firma escrita

El acuerdo tiene habilitada la opción CFR como motivo de firma

El acuerdo tiene habilitada la opción CFR de reautenticación de firma electrónica

No se admiten acuerdos con varios firmantes

Consulte la sección sobre Especificación de campos de formulario para obtener más información.


Documento HTML de muestra: Solicitud de informe de crédito

Las cualidades de formulario que son los principales objetivos para la creación del Liquid Mode son:

  • documentos que tienen bloques grandes de texto que pueden requerir mucho pellizco y zoom
  • formularios en los que no hay superposición de campos y el flujo de campos en Liquid Mode es aceptable

Descargar

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>Sample Title</title>

    <link rel="stylesheet" href="css/all.css">

    <style>

    body {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px

    }

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

 

    legend {

        float: left;

    }

 

    h2 {

        margin: 10px 0;

        font-size: 13px;

        margin: 20px 0 0 0;

    }

 

    h3 {

        margin: 0;

        font-size: 12px;

    }

 

    ul {

        margin: 0;

    }

 

    li {

        margin-bottom: 3px;

        padding-left: 5px;

    }

     

    p {

        margin: 4px 0;

    }

 

    .header {

        border-bottom: 2px solid #000;

        margin: 0 5px 15px 5px;

    }

 

    .header h1 {

        font-weight: 700;

        margin: 0;

        font-size: 15px;

    }

 

    .body {

        border: 1px solid #000;

        padding: 0 5px 10px 5px;

    }

   

    .page {

        padding: 0 25px;

        margin: 0 auto;

    }

     

    .txt_logo {

        font-size: 30px;

        color:blue;

        font-style:oblique

    }

 

    .textTag {

        padding: 9px 0;

        border-bottom: 2px solid #000;

        margin: 0 -4px 5px 0

    }

 

    .underline {

        text-decoration: underline;

        font-weight: 700;

        font-size: 12px

    }

     

    .columns-2 .item {

        width: 49%

    }

 

    .columns-3 .item {

        width: 33%

    }

 

    .item {

        display: inline-block

    }

     

    .address .item {

        width: 16%

    }

 

    .item.big {

        width: 30%

    }

 

    .checkbox {

        margin: 15px 0

    }

 

    .checkbox span {

        font-weight: 700;

        font-size: 11px

    }

 

    .card-info label {

        width: 12%;

        font-size: 11px;

        text-transform: capitalize

    }

 

    .card-info p {

        border-bottom: 1px solid #000;

        margin-right: 10px;

        padding-bottom:5px;

        display: inline-block

    }

 

    .card-number {

        width: 40%;

    }

 

    .expiry-date {

        width: 25%;

    }

 

    .radio-button label {

        width: 55%

    }

     

    .radio-button .item {

        width: 16%

    }

     

    .note {

        font-size: 12px

    }

 

    .footer {

        padding: 0 10px;

        font-size: 11px;

    }

    </style>

</head>

 

<body>

    <div class="page">

        <div class="header">

            <h2 class="txt_logo"><b>SAMPLE COMPANY</b></h2>

            <h1 class="h1_header">SAMPLE REQUEST TO OBTAIN MY FREE CREDIT REPORT </h1>

        </div>

        <div class="body">

            <h3>Sample Important Information & Instructions:</h3>

            <p>In order to protect your personal information we will validate your identity before mailing your credit report to your <u>confirmed</u>

                home address. You must provide a photocopy of the front and back of:</p>

            <ul class="info">

              <li class="info__item">Two pieces of government-issued identification</li>

              <li class="info__item">If your address is not up-to-date on either identification, you <u>must also</u> provide an additional document showing your <u>current home address</u> (e.g. a utility bill).</li>

              <li class="info__item">If you provide your <b>Social Insurance Number</b>, we will cross-reference it with our records to ensure that we disclose the correct information to you. Knowing it helps us avoid delays and confusion in case another individual's identifying information (such as name and address) is similar to the one you provided.</li>

              <li class="info__item">If you provide a <b>credit card </b>statement or copy of your <b>credit card</b> as proof, please ensure to <b>blackout</b> your private information.</li>

            </ul>

            <p>The information you provide on the form will be used to confirm your identity and may also be used to update your credit report. Such updated information will be stored, safeguarded, used and/or disclosed in the normal course as part of your credit file. For more information about SAMPLE COMPANY’s privacy practices, please see our Privacy Policy at https://www.adobe.com/privacy/policy.html. For clarity, in any case, we will keep a copy of the information you provide to demonstrate that we complied with our obligation to obtain reasonable identification from you.

            </p>

            <p>Please send your completed form with proof of identity to: <b>Lorem inseam dolor sit amen, consenttetur</b>or by fax to: <b>XXX-XX-XXXX.</b>Kindly allow X-Y days for delivery. If any corrections to your credit report are necessary you must complete the Credit Report Update form enclosed with your package, or visit <a href="http://sampleurl">SampleURL</a> and click on “How to File a Something” under Our Sample Assistance.

            </p>

        </div>

        <div class="form">

            <div class="columns-3">

                <div class="item">

                    <p class="textTag">{{*LastName_es_:signer1}}</p>

                    <label for="LastName">LAST NAME </label>

                </div>

                <div class="item">

                    <p class="textTag">{{*FirstName_es_:signer1}}</p>

                    <label for="FirstName">FIRST NAME, INITIAL</label>

                </div>

                <div class="item">

                    <p class="textTag">{{Suffix_es_:signer1}}</p>

                    <label for="Suffix">SUFFIX (Sr., Jr., etc.)</label>

                </div>

            </div>

            <div class="address">

                <div class="item big">

                    <p class="textTag">{{*StreetAddress_es_:signer1&nbsp;}}</p>

                    <label for="StreetAddress">CURRENT STREET ADDRESS </label>

                </div>

                <div class="item">

                    <p class="textTag">{{*Apt_es_:signer1}}</p>

                    <label for="Apt">APT.</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*City_es_:signer1}}</p>

                    <label for="City">CITY</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*Prov_es_:signer1}}</p>

                    <label for="Prov">PROVINCE</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*Zip_es_:signer1:zip}}</p>

                    <label for="Zip">POSTAL CODE</label>

                </div>

            </div>

            <h2>PREVIOUS ADDRESS(ES) WITHIN LAST 3 YEARS</h2>

            <div class="address">

                <div class="item big">

                    <p class="textTag">{{*StreetAddressPr_es_:signer1&nbsp;}}</p>

                    <label for="StreetAddressPr">PREVIOUS STREET ADDRESS </label>

                </div>

                <div class="item">

                    <p class="textTag">{{*AptPr_es_:signer1}}</p>

                    <label for="AptPr">APT.</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*CityPr_es_:signer1}}</p>

                    <label for="CityPr">CITY</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*PrvPr_es_:signer1}}</p>

                    <label for="PrvPr">PROVINCE</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*ZipPr_es_:signer1:zip}}</p>

                    <label for="ZipPr">POSTAL CODE</label>

                </div>

            </div>

            <div>

                <p class="textTag">{{*EmailAddress_es_:signer1:isemail}}</p>

                    <label for="EmailAddress">EMAIL</label>

            </div>

            <div class="columns-2">

                <div class="item">

                    <p class="textTag">{{$DATEOFBIRTH}}</p>

                    <label for="Date">DATE OF BIRTH </label>

                </div>

                <div class="item">

                    <p class="textTag">{{SocialSecurityNumber_es_:signer1:ssn}}</p>

                    <label for="SocialSecurityNumber">S.I.N.:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

                    <p class="textTag">{{$NAMEMAJORCARD}}</p>

                    <label for="NameMajorCard">NAME OF MAJOR CREDIT CARD:</label>

                </div>

                <div class="item">

                    <p class="textTag">{{$LAST4}}</p> <label for="Last4">LAST 4 DIGITS OF MAJOR CREDIT CARD:</label>

                </div>

            </div>

            <div class="columns-2">

                <div class="item">

                    <p class="textTag">{{*Signature_es_:signer1:signature}}</p><label for="Signature">Signature</label>

                </div>

                <div class="item">

                    <p class="textTag">{{*DateOfSignature_es_:signer1:date}}</p><label for="DateOfSignature">Date</label>

                </div>

            </div>

            <div class="checkbox">

                 <label class="underline">{{$PAY}}  YES, I WOULD ALSO LIKE TO PURCHASE MY Sample Company SCORE* FOR $X.XX (tax included)</label>

            </div>
            <fieldset>
            <legend> I authorize Sample Company to charge the payment to my credit card:</legend>

              <div class="radio-button">

                <div class="item"><label>{{$V}}Visa</label></div>

                <div class="item"><label>{{$M}}MasterCard</label></div>

                <div class="item"><label>{{$A}}AMEX</label></div>

              </div>
            </legend>

            <div class="card-info">

                <label for="CardholderName">Cardholder Name:</label>

                <p>{{$CALCULATEDCARDHOLDERNAME}}</p>

            </div>

            <div class="card-info">

                <label for="CardNumber">Card Number:</label>

                <p class="card-number">{{*CardNumber_es_:signer1}}</p> <label for="ExpiryDate">Expiry Date:</label>

                        <p class="expiry-date">{{$EXPIRYDATE}}</p>

            </div>

            <div class="note">

                <p>Note: Cheque and cash payments are not accepted. Cardholder’s name must be same as requestor’s name.</p>

            </div>

        </div>

        <div class="footer">

            <p>*Sample company’s XY is a product some service providers use when assessing applications for credit and services. It is not part of your sample credit report, but is based on the particular information in your credit file at the time it is calculated. Lorem Ipsem is not the same as the Lorem Ipsem, which is also used by some lenders. Sample Company will provide your sample report free of charge, whether or not you purchase your Lorem Ipsem. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sample company can provide more sample services:</b> Sample Address Telephone: 1-XXX-XXX-XXXX Telephone in Sample: 1-XXX-XXX-XXXX</p>

        </div>

    </div>

    <!--  PAGE BREAK -->

    <div style="page-break-after:always"></div>

    <!-- SIGN Text Tag Definitions -->

    {{#REMOVE_PAGE_FROM_OUTPUT}}

   

    <!-- check box -->

    <p>{{#PAY=*Pay_es_:signer1:checkbox}}</p>

 

    <!-- radio button and conditional rule to enable if Pay is checked -->

    <p>{{#V=(Visa)CCard_es_:signer1:enableif(Pay=checked)}}</p>

    <p>{{#M=(MasterCard)CCard_es_:signer1:enableif(Pay=checked)}}</p>

    <p>{{#A=(AMEX)CCard_es_:signer1:enableif(Pay=checked)}}</p>

 

    <!-- drop down -->

    {{#NAMEMAJORCARD=*NameMajorCard_es_:dropdown(options="Visa,MasterCard,AMEX,Discover")}}

 

    <!-- calculated field -->

    <p>{{#CALCULATEDCARDHOLDERNAME=*CardholderName_es_:signer1:calc([FirstName]+"&nbsp;"+[LastName]+"&nbsp;"+[Suffix])}}

     

    <!-- regular expression fromatting validation -->

    <p>{{#LAST4=*Last4_es_:signer1:custom(regexp="^[0-9]{4}$")}}

    <p>{{#CREDITCARDNUMBER=*CardNumber_es_:signer1:custom(regexp="^[0-9]{16}$")}}</p>

 

    <!-- date validations -->

    <p>{{#EXPIRYDATE=*ExpiryDate_es_:isdate(format=mm/yy)}}</p>

    <p>{{#DATEOFBIRTH=*Date_es_:signer1:isdate(format=mm/dd/yyyy)}}</p>

 

</body>

 

</html>

 

Documento HTML en el explorador

Vista de PDF clásica en Adobe Sign

Vista de acuerdo:

Vista de Liquid Mode


Problemas conocidos y preguntas frecuentes

Le recomendamos que, al crear el HTML, pruebe el HTML varias veces y compruebe que no hay errores y que cumple los criterios generales de flujo antes de enviarlo a los destinatarios previstos.

Los elementos HTML del documento HTML deben seguir el orden de lectura del documento. 

Los saltos de página del documento se deben especificar explícitamente mediante la propiedad CSS “page-break-after”, como se muestra a continuación:

<div style="page-break-after:always"></div>

Si se rediseña el documento teniendo en cuenta el reflow, se puede mejorar la experiencia móvil en general. Si NO tiene previsto rediseñar el documento, puede que desee ceñirse a la apariencia general del PDF original con algunas excepciones:

  • No habrá un manejo especial de artefactos a nivel de página en el Liquid Mode. Si hay artefactos de nivel de página, como encabezados, pies de página, marcas de agua, etc. en el documento HTML, puede que aparezcan en la vista de reflow en medio del contenido reajustado.

  • Si el formulario incluye instrucciones para rellenar los campos de formulario como “POR FAVOR, IMPRIMIR” u “OPCIONAL” o instrucciones de formato como “(dd/mm/aaaa)”, no incluya el texto en el HTML; parte de la información, como las instrucciones de formato “(dd/mm/aaaa)” o si un campo de formulario es “OPCIONAL”, debe especificarse en la especificación del campo de formulario mediante etiquetas de texto.  

  • Algunos textos pueden requerir la recopilación de conjuntos compuestos de información. Dividirlos en varios campos de formulario simplificará el caso de uso. Por ejemplo, en el documento de muestra anterior, “NAME & LAST 4 DIGITS OF MAJOR CREDIT CARD” se ha dividido en “NAME OF MAJOR CREDIT CARD” y “LAST 4 DIGITS OF MAJOR CREDIT CARD”

  • Utilice solo las etiquetas HTML compatibles que se indican más arriba. Consulte la sección sobre construcciones HTML.

  • Utilice coordenadas y ubicaciones relativas como {width: 30%} para que el HTML pueda reajustarse a diferentes anchuras de dispositivo. La anchura de página absoluta no debe estar presente en el CSS. 

  • Si un PDF contiene una construcción de tabla o lista, la representación HTML correspondiente debe ser una tabla o lista, respectivamente. La única excepción son las tablas con campos de formulario. Si una tabla tiene campos de formulario, la misma información debe presentarse sin tablas.

Para crear una mejor experiencia de rellenado de formularios en línea, se recomienda encarecidamente que los campos de formulario se creen utilizando todas las validaciones, expresiones de formato y reglas condicionales, así como la fórmula de cálculo que ofrecen las etiquetas de texto de Sign.

  • Los nombres de los campos de formulario deben ser únicos si representan distintas entidades.
  • Se recomienda encarecidamente que cada campo de formulario tenga una etiqueta, ya sea incluyendo el campo de formulario o mediante el atributo “for”.
  • Si un campo de formulario es OPCIONAL, debe especificarse en las etiquetas de texto de Sign. Por ejemplo:
    • {{*S.I.N_es_:signer1}} representa un campo de formulario obligatorio
    • {{S.I.N_es_:signer1}} representa un campo de formulario opcional
  • Las etiquetas de texto de Sign proporcionan una gran variedad de validaciones para CP, NSS, fecha, correo electrónico, números de moneda con comprobaciones de rango y longitudes máximas, etc. Utilícelos.
  • Las etiquetas de texto de Sign también incluyen formato para campos de formulario como el formato de fecha, el formato de moneda, etc. Se recomienda encarecidamente que los use.
  • Todas las casillas de verificación deben tener etiquetas asociadas. Por ejemplo:

<label> {{[]}} SÍ, TAMBIÉN ME GUSTARÍA ADQUIRIR MI CALIFICACIÓN DE CRÉDITO</label>

  • Si hay campos de formulario que parecen casillas de verificación en el formulario en papel/PDF pero tienen valores mutuamente excluyentes como preguntas Sí/No o la pregunta Visa/MasterCard/AMEX de este formulario, combine todos los campos de formulario en un grupo o conviértalos en un campo de formulario de tipo botón de opción o menú desplegable en lugar de casillas de verificación individuales e incluya una etiqueta/encabezado     

<fieldset>

<legend>Opciones de pago:</legend>

{{#VISA=(Visa)CCard_es_:label("Visa"):signer1:enableif(Pay=checked)}}

({#MCARD=(MasterCard)CCard_es_:label("MasterCard"):signer1:enableif(Pay=checked)}}

{{#AMEX=(AMEX)CCard_es_:label("AMEX"):signer1:enableif(Pay=checked)}}

</fieldset>

  • Las etiquetas de texto de Sign también definen las dimensiones de los campos de formulario en la página representada en función de las dimensiones de la etiqueta de texto de Sign representada en la página. La especificación de la etiqueta de texto de Sign proporciona formas de acortar las dimensiones del campo de formulario. Busque “Acortamiento de etiquetas de texto” y “Etiquetas de texto largas” en https://helpx.adobe.com/es/sign/using/text-tag.html. Una técnica común es definir una sección al final del documento HTML que contenga las etiquetas de definición de las etiquetas de texto realmente largas y utilizar etiquetas de referencia en el cuerpo del HTML. A continuación se muestran algunas etiquetas de definición de muestra:

<div style="page-break-after:always"></div>

{{#REMOVE_PAGE_FROM_OUTPUT}}

{{#CCARDDROPDOWN=*ccardDropDown_es_:dropdown(options="Visa,MasterCard,AMEX")}}

{{#VI=*(Visa)CCard_es_:signer1}}

{{#MC=*(MasterCard)CCard_es_:signer1}}

{{#AM=*(AMEX)CCard_es_:signer1}}

{{#DATEOFBIRTH=*Date_es_:signer1:isdate(format(dd/mm/yy)}}

Logotipo de Adobe

Inicia sesión en tu cuenta