Estile el formulario adaptable

Aprenda a crear un tema personalizado, aplicar estilo a componentes individuales y utilizar fuentes web en un tema

Este tutorial es un paso de la serie Create Your First Adaptive Form. Se recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar el caso de uso completo del tutorial.

Acerca del tutorial

Puede utilizar temas para proporcionar un aspecto y un estilo únicos a un formulario adaptable. Puede aplicar temas predeterminados con el editor de formularios adaptables o crear temas personalizados propios. AEM Forms proporciona un editor de temas para crear temas personalizados. Un solo tema puede proporcionar un aspecto diferente al mismo formulario adaptable abierto en dispositivos móviles, tabletas o de escritorio. No es necesario tener conocimientos previos de CSS o LESS para utilizar el editor de temas, pero se desea.

Al final del tutorial, aprenderá a:

  • Aplicar un tema preestablecido a un formulario adaptable
  • Creación de un tema para un formulario adaptable mediante el editor de temas
  • Estilo de los componentes individuales
  • Sección Bonos: Usar fuentes web en un tema personalizado

El formulario será similar al siguiente después de completar el tutorial:

Formulario con un tema personalizado

Antes de comenzar

Descargue las imágenes de estilo de encabezado y logotipo, a continuación, en su equipo local. El encabezado del formulario adaptable shipping-address-add-update-form utiliza el estilo del encabezado y las imágenes de logotipo. La imagen de estilo de encabezado aparece a la derecha del encabezado.

Obtener archivo

Obtener archivo

Paso 1: Aplique un tema a su formulario adaptable

El editor de formularios adaptables proporciona varios temas predeterminados. Si planea no utilizar un estilo personalizado para el formulario adaptable, también puede publicar los formularios adaptables con un tema incorporado. Los temas son independientes de las formas adaptables. Puede aplicar el mismo tema a varios formularios adaptables. Para aplicar un tema a un formulario adaptable:

  1. Abra el formulario adaptable para editarlo.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Abra las propiedades del contenedor del formulario adaptable. En el navegador de propiedades, vaya a Básico > Tema del formulario adaptable. El campo Tema del formulario adaptable enumera todos los temas predeterminados y personalizados. De forma predeterminada, se aplica el tema Lienzo .

  3. Seleccione un tema en el campo Tema del formulario adaptable. Por ejemplo, Tema de encuesta. Toque aem_6_3_forms_save para aplicar el tema seleccionado.

    Formulario adaptable con el tema predeterminado

    Figura: Formulario adaptable con el tema predeterminado

    Formulario adaptable con el tema de Survey

    Figura: Formulario adaptable con el tema Encuesta

Paso 2: Actualice el formulario adaptable

El diseño mostrado arriba requiere cambios en el texto del marcador de posición y en el logotipo de su formulario adaptable existente. Realice los siguientes pasos para realizar los cambios necesarios:

  1. Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo:

    1. Abra el formulario en el editor de formularios.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Pulse la imagen del logotipo en el componente header y pulse cmppr properties. En la propiedad image, pulse X para eliminar la imagen del logotipo existente.

    3. Pulse cargar, seleccione el logo.png y pulse aem_6_3_forms_save para guardar los cambios. La imagen se descargó en la sección Antes de comenzar.

    4. Pulse texto del encabezado, We.Retail y pulse aem_6_3_edit editar. Cambie el texto del encabezado a we retail. Aplicar formato de negrita solo a ween we retail.

      we-retail-logo-text

  2. Elimine el título y añada texto de marcador de posición:

    1. Pulse el campo ID de cliente y pulse cmppr propiedades.

    2. Copie el contenido del campo Title en el campo Texto del marcador de posición.

    3. Elimine el contenido del campo Title y pulse aem_6_3_forms_save.

    4. Repita los tres pasos anteriores para todos los cuadros de texto, cuadros numéricos y campos de correo electrónico del formulario.

      formulario adaptable actualizado

Paso 3: Cree un tema personalizado para su formulario adaptable

Puede utilizar editor de temas para crear temas personalizados. El editor de temas es un poderoso editor WYSIWYG. Es un método visual aplicar CSS a varios componentes de un formulario adaptable. Proporciona controles más precisos para aplicar estilo a los componentes y paneles de un formulario adaptable.

Un tema es una entidad independiente como los formularios adaptables. Contiene estilos (CSS) para los componentes y paneles de un formulario adaptable. Los estilos incluyen propiedades CSS como colores de fondo, colores de estado, transparencia, alineación y tamaño. Al aplicar un tema, el estilo especificado se aplica a los componentes correspondientes de un formulario adaptable.

En este tutorial, aplicará estilo al encabezado y al pie de página, a los componentes numéricos y de texto, al componente de datos adjuntos y a los botones. Empecemos por crear un tema:

Crear un tema

  1. Inicie sesión en la instancia de autor de AEM y vaya a Adobe Experience Manager > Forms > Temas. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Pulse Crear y seleccione Tema. Aparece la página Crear tema con los campos necesarios para crear un tema. Los campos Title y Name son obligatorios:

    • Título: especifique un título para el tema. Por ejemplo, Tema global. El título le ayuda a identificar el tema en la lista de temas.
    • Nombre: especifique el nombre del tema. Por ejemplo, Tema global. Se crea un nodo con el nombre especificado en el repositorio. A medida que empieza a escribir un título, el valor del campo de nombre se genera automáticamente. Puede cambiar el valor sugerido. El campo de nombre solo puede incluir caracteres alfanuméricos, guiones y guiones bajos. Todas las entradas no válidas se sustituyen por guiones.
  3. Toque Crear. Se crea un tema y aparece un cuadro de diálogo para abrir el formulario y editarlo. Toque Abrir para abrir el tema recién creado en una nueva pestaña. El tema se abre en el editor de temas. Para el estilo, el editor de temas utiliza un formulario adaptable incorporado que se incluye con AEM Forms.

    Para obtener información sobre el uso de la IU del editor de temas, consulte Acerca del editor de temas.

  4. Toque Opciones de tema opciones de tema > Configurar. En el campo Vista previa del formulario, seleccione el formulario adaptable Shipping-address-add-update-form, pulse aem_6_3_forms_save y pulse Guardar. Ahora, el editor de temas está configurado para usar su propio formulario adaptable en lugar del formulario adaptable predeterminado. Toque Cancelar para volver al editor de temas.

    custom-theme

    Figura: Editor de temas con el formulario adaptable Shipping-address-add-update-form

    create-a-theme

    Figura: Formulario adaptable con el formulario predeterminado

El encabezado y el pie de página proporcionan un aspecto coherente y distintivo a un formulario adaptable. Por lo general, el encabezado contiene el logotipo y el nombre de la organización, el pie de página contiene información sobre los derechos de autor y estos datos siguen siendo idénticos en varias formas de organización. Para aplicar estilo al encabezado y al pie de página del formulario adaptable Shipping-address-add-update-form:

  1. Vaya a la opción Header > Text en el panel Selectores. El panel Selectores se encuentra a la izquierda del editor de temas. Si el panel no está visible, pulse alternar panel lateral Alternar panel lateral.

  2. Defina las siguientes propiedades en el acordeón Text y pulse aem_6_3_forms_save.

    Propiedad Value
    Familia de fuentes Arial
    Color de fuente FFFFFF
    Tamaño de fuente 54px
  3. Pulse la utilidad header y pulse Header. Las opciones para aplicar estilo al widget de encabezado aparecen a la izquierda. Expanda el acordeón Dimension y posición, establezca la altura en 120px y pulse aem_6_3_forms_save.

  4. Expanda el acordeón Fondo del widget de encabezado, establezca Color de fondo en F6921E.

    Pase el ratón sobre Imagen y degradado > + Agregar, pulse Imagen. Establezca las siguientes propiedades y pulse aem_6_3_forms_save.

    Propiedad Valor
    image Cargue header-style.png. La imagen se descargó en la sección Antes de comenzar.
    Posición Inferior Derecha
    Mosaico No repetir
  5. En el editor de temas, pulse el logotipo en el encabezado y pulse Logotipo de encabezado. Expanda el acordeón Dimension y posición , defina las siguientes propiedades y pulse aem_6_3_forms_save.

    imagen Valor
    imagen
    • Superior: 1,5 rem
    • Abajo: -35 px
    • Izquierda: 1rem

    Sugerencia: Pulse el icono del vínculo para proporcionar un valor diferente a cada campo.

    Altura 4,75 rem
  6. Pulse el widget de pie de página y pulse Pie de página. Expanda el acordeón Fondo, establezca Color de fondo en F6921E y pulse aem_6_3_forms_save.

Estile el componente de captura de datos y aplique un fondo al formulario adaptable

Puede utilizar varios componentes en un formulario adaptable para capturar datos. Por ejemplo, cuadro de texto y cuadro numérico. Puede proporcionar un estilo idéntico a todos los componentes de captura de datos o a todos los estilos independientes para cada componente. En este tutorial, se aplica un estilo idéntico a los cuadros numéricos (ID de cliente, código postal) y los cuadros de texto (ID de cliente, nombre, dirección de envío, estado, correo electrónico). Para aplicar estilo a los componentes de captura de datos:

  1. Pulse el campo Customer ID y pulse la opción Field Widget. Establezca las siguientes propiedades y pulse aem_6_3_forms_save.

    Acordeón Propiedad Valor
    Borde Color del borde A7A9AC
    Borde Radio de borde
    • Superior: 7px
    • Derecha: 7px
    • Abajo: 7px
    • Izquierda: 7px
    Texto Familia de fuentes Arial
    Texto Color de fuente 939598
    Texto Tamaño de fuente 18px
    Dimension y posición Anchura 60%
    Dimension y posición imagen
    • Izquierda: 10 rem
  2. Pulse en el área vacía encima del campo Customer ID y pulse Responsive Panel Container. Defina el Background > Background Color en F1F2F2. Pulse aem_6_3_forms_save.

Estilos de los botones

Puede utilizar un tema personalizado para aplicar un estilo idéntico a todos los botones del formulario adaptable y estilo en línea para aplicar un estilo a un botón específico. Para aplicar estilo a los botones:

  1. Pulse el botón Submit y pulse la opción Button. Establezca las siguientes propiedades y pulse aem_6_3_forms_save.

    Acordeón Propiedad Valor
    Fondo Color de fondo F6921E
    Borde
    Color del borde F6921E
    Borde Radio de borde
    • Superior: 7px
    • Derecha: 7px
    • Abajo: 7px
    • Izquierda: 7px
    Texto
    Familia de fuentes Arial
    Texto Color de fuente FFFFFF
    Texto Tamaño de fuente 18px
  2. Aplique el tema personalizado, Tema global, a su formulario adaptable. Si el estilo no se refleja en el formulario adaptable, limpie la caché del explorador y vuelva a intentarlo.

    style-data-capture-components

Paso 4: Estilos de componentes individuales

Algunos estilos solo se aplican a un componente específico. Estos componentes están diseñados en el editor de formularios adaptables.

  1. Abra el formulario adaptable para editarlo. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. En la barra superior, seleccione la opción Estilo.

    style-option

  3. Pulse el botón Attach y pulse el icono aem_6_3_edit. Establezca las siguientes propiedades en el acordeón Dimension y Posición:

    Propiedad Valor
    Flotante Izquierda
    Anchura 10%
  4. Pulse la opción Government approved address proof y pulse el icono aem_6_3_edit. Establezca las siguientes propiedades:

    Acordeón Propiedad Valor
    Dimensiones y posición Flotante Izquierda
    Dimensiones y posición Anchura 73 %
    Dimensiones y posición Espacio
    • Izquierda: 10px
    Dimensiones y posición Altura 40px
    Dimensiones y posición
    imagen
    • Derecha: 2 rem
    • Izquierda: 10 rem
    Fondo Color de fondo FFFFFF
    Borde Anchura de borde 1px
    Borde Estilo de borde Sólido
    Borde Color del borde A7A9AC
    Borde Radio de borde 7px
    Texto Familia de fuentes Arial
    Texto Color de fuente BCBEC0
    Texto Tamaño de fuente 18px
    Texto Altura de la línea 2
  5. Pulse el botón Submit y pulse el icono aem_6_3_edit. Establezca las siguientes propiedades:

    Acordeón Propiedad Valor
    Dimension y posición Flotante Derecha
    Dimension y posición imagen
    • Superior: 5 rem
    • Derecha: 14 rem
    • Abajo: 20px
    • Izquierda: 20px
    Fondo Color de fondo F6921E
    Borde Color del borde F6921E

    styled-adaptive-form-1

Paso 5: Sección Bonos: Uso de fuentes web en un tema personalizado

Puede utilizar varias fuentes para diseñar un formulario adaptable. Es posible que todos los dispositivos en los que se visualiza el formulario adaptable no tengan las fuentes utilizadas para diseñar el formulario adaptable. Puede utilizar un servicio de fuentes web para enviar las fuentes necesarias al dispositivo de destino.

Adobe Fonts es un servicio de fuentes web. Puede configurar y utilizar el servicio con formularios adaptables. Para utilizar Adobe Fonts en un formulario adaptable:

NOTA

typekit-to-adobe- Typekit fontsis ahora se denomina Adobe Fonts y se incluye con Creative Cloud y otras suscripciones. Más información.

  1. Cree una cuenta Adobe Fonts, cree un kit, añada la fuente Myriad Pro al kit, publique el kit y obtenga el ID del kit. Es necesario utilizar Adobe Fonts (fuentes web) en un formulario adaptable.

  2. En el servidor AEM Forms, vaya a adobeexperiencemanager Adobe Experience Manager > Herramientas martillo > Adobe Fonts. A continuación, abra una carpeta de configuración. Si una configuración ya está disponible, haga clic en el botón Create para crear una nueva instancia.

    En el cuadro de diálogo Crear configuración, especifique un Título para la configuración y haga clic en Crear. Se le redirige a la página de configuración. En el cuadro de diálogo Editar componente que aparece, proporcione su ID del Kit y haga clic en Aceptar.

  3. Configure el tema para utilizar la configuración Adobe Fonts. En la instancia de autor, abra Tema global en el editor de temas. En el editor de temas, vaya a Opciones de tema opciones de tema > Configurar. En el campo Configuración de Adobe Fonts, seleccione el kit y haga clic en Guardar.

    Las fuentes agregadas a Adobe Fonts están disponibles para su selección en el acordeón Text de todos los componentes.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now