DocumentaciónAEM 6.4Guía de Forms

Aplicar estilo a un formulario adaptable do-not-publish-style-your-adaptive-form

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

Aprenda a crear una temática personalizada, a aplicar estilo a componentes individuales y a utilizar fuentes web en una temática

Este tutorial es un paso en la serie Crear su primer formulario adaptable. Se recomienda seguir la serie en orden cronológico para comprender, realizar y mostrar el caso de uso del tutorial completo.

Información sobre el tutorial about-the-tutorial

Puede utilizar temáticas para proporcionar una apariencia y un estilo únicos a un formulario adaptable. Puede aplicar temáticas predeterminadas con el editor de formularios adaptables o crear temáticas personalizadas propias. AEM Forms proporciona un editor de temas para crear temas personalizados. Una sola temática puede proporcionar una apariencia 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 temáticas, pero es preferible tenerlos.

Al final del tutorial, aprenderá a hacer lo siguiente:

  • Aplicar una temática predeterminada a un formulario adaptable
  • Crear una temática para un formulario adaptable mediante el editor de temáticas
  • Aplicar estilo a los componentes individuales
  • Sección Bonus: usar fuentes web en una temática personalizada

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

Formulario con una temática personalizada

Antes de comenzar before-you-start

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

Obtener archivo

Obtener archivo

Paso 1: Aplicar una temática a un formulario adaptable step-apply-a-theme-to-your-adaptive-form

El editor de formularios adaptables proporciona varias temáticas predeterminadas. Si no pretende utilizar un estilo personalizado para el formulario adaptable, también puede publicar los formularios adaptables con una temática incorporada. Las temáticas son independientes de los formularios adaptables. Puede aplicar la misma temática a varios formularios adaptables. Para aplicar una temática a un formulario adaptable, haga lo siguiente:

  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 de formularios adaptables. En el explorador de propiedades, navegue hasta Básico > Temática del formulario adaptable. El campo Temática del formulario adaptable enumera todas las temáticas predeterminadas y personalizadas. De forma predeterminada, se aplica la temática Lienzo.

  3. Seleccione una temática del campo Temática del formulario adaptable. Por ejemplo, Temática de encuesta. Pulse aem_6_3_forms_save para aplicar la temática seleccionada.

Formulario adaptable con la temática predeterminada

Figura: formulario adaptable con la temática predeterminada

Formulario adaptable con la temática de encuesta

Figura: formulario adaptable con la temática de encuesta

Paso 2: Actualizar el formulario adaptable step-update-your-adaptive-form

El diseño que se muestra más arriba requiere cambios en el texto del marcador de posición y en el logotipo de su formulario adaptable. Realice los siguientes pasos para realizar los cambios necesarios:

  1. Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo, haga lo siguiente:

    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 de logotipo en el componente encabezado y pulse las propiedades cmppr . En la propiedad imagen, 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 el texto del encabezado. We.Retail y pulse aem_6_3_edit Editar. Cambie el texto del encabezado a we retail. Aplique formato de negrita solo a ween we retail.

    we-retail-logo-text

  2. Elimine el título y agregue un texto de marcador de posición:

    1. Pulse el campo ID de cliente y pulse las propiedades cmppr .
    2. Copie el contenido del campo Título en el campo Texto del marcador de posición.
    3. Elimine el contenido del campo Título 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.

    updated-adaptive-form

Paso 3: Crear una temática personalizada para el formulario adaptable step-create-a-custom-theme-for-your-adaptive-form

Puede usar el Editor de temáticas para crear temáticas personalizadas. El editor de temáticas es un poderoso editor WYSIWYG. Es un método visual para aplicar CSS a varios componentes de un formulario adaptable. Proporciona controles más precisos para aplicar estilo a los componentes y los paneles de un formulario adaptable.

Una temática 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 una temática, 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 una temática:

Crear una temática create-a-theme

  1. Inicie sesión en la instancia de autor de AEM y navegue hasta Adobe Experience Manager > Formularios > Temáticas. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Pulse Crear y seleccione Temática. Aparecerá la página Crear temática con los campos necesarios para crear una temática. Los campos Título y Nombre son obligatorios:

    • Título: especifique un título para la temática. Por ejemplo, Temática Global. El título le ayuda a identificar la temática en la lista de temáticas.
    • Nombre: especifique el nombre de la temática. Por ejemplo, Temática 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. Pulse Crear. Se crea una temática y aparece un cuadro de diálogo para abrir el formulario y editarlo. Pulse Abrir para abrir la temática recién creada en una pestaña nueva. La temática se abre en el editor de temáticas. 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 interfaz de usuario del editor de temáticas, consulte Acerca del editor de temáticas.

  4. Pulse Opciones de temática theme-options > Configurar. En el campo Vista previa del formulario, seleccione el formulario adaptable shipping-address-add-update-form, pulse aem_6_3_forms_save , pulse Guardar. Ahora, el editor de temáticas está configurado para usar su propio formulario adaptable en lugar del formulario adaptable predeterminado. Pulse Cancelar para volver al editor de temáticas.

    custom-theme

    Figura: editor de temáticas 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 una apariencia coherente y distintiva 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 son 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, haga lo siguiente:

  1. Navegue hasta la opción Encabezado > Texto en el panel Selectores. El panel Selectores se encuentra a la izquierda del editor de temáticas. Si el panel no está visible, pulse Alternar panel lateral Alternar panel lateral.

  2. Establezca las siguientes propiedades en el acordeón Texto y pulse aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propiedad Valor
    Familia de fuentes Arial
    Color de fuente FFFFFF
    Tamaño de fuente 54 px

  3. Pulse el widget encabezado y pulse Encabezado. Las opciones para aplicar estilo al widget de encabezado aparecen a la izquierda. Expanda el acordeón Dimensiones y posición, establezca la Altura a 120px y pulse aem_6_3_forms_save .

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2
    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 temáticas, pulse el logotipo en el encabezado y pulse Logotipo de encabezado. Expanda el acordeón Dimensiones y posición, defina las siguientes propiedades y pulse aem_6_3_forms_save .

Margen
Valor
Margen
  • Superior: 1,5 rem
  • Inferior: -35 px
  • Izquierda: 1rem

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

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

Aplicar un estilo al componente de captura de datos y un fondo al formulario adaptable style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

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, haga lo siguiente:

  1. Pulse ID de cliente y pulse la opción Widget de campo. 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: 7 px
  • Derecha: 7 px
  • Inferior: 7 px
  • Izquierda: 7 px
Texto
Familia de fuentes
Arial
Texto
Color de fuente
939598
Texto
Tamaño de fuente
18 px
Dimensiones y posición
Anchura
60 %
Dimensiones y posición
Margen
  • Izquierda: 10 rem

  1. Pulse en el área vacía encima del campo ID de cliente y pulse Contenedor del panel interactivo. Configure el Contexto > Color de fondo a F1F2F2. Pulse aem_6_3_forms_save .

Aplicar estilo a los botones style-the-buttons

Puede utilizar una temática personalizada para aplicar un estilo idéntico a todos los botones del formulario adaptable y aplicar estilo dentro de la línea para aplicar un estilo a un botón específico. Para aplicar estilo a los botones, haga lo siguiente:

  1. Pulse el botón Enviar y pulse la opción Botón. 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: 7 px
  • Derecha: 7 px
  • Inferior: 7 px
  • Izquierda: 7 px
Texto
Familia de fuentes
Arial
Texto
Color de fuente
FFFFFF
Texto
Tamaño de fuente
18 px

  1. Aplicar la temática personalizada, Temática global, a su formulario adaptable. Si el estilo no se refleja en el formulario adaptable, limpie la memoria caché del explorador y vuelva a intentarlo.

    style-data-capture-components

Paso 4: Aplicar estilo a componentes individuales step-style-individual-components

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 Adjuntar y pulse el icono aem_6_3_edit . Establezca las siguientes propiedades en el acordeón Dimensiones y posición:

    table 0-row-2 1-row-2 2-row-2
    Propiedad Valor
    Flotante Izquierda
    Anchura 10 %

  4. Pulse Prueba de dirección aprobada por el gobierno 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: 10 px
Dimensiones y posición
Altura
40 px
Dimensiones y posición
Margen
  • Derecha: 2 rem
  • Izquierda: 10 rem
Fondo
Color de fondo
FFFFFF
Borde
Anchura de borde
1 px
Borde
Estilo de borde
Sólido
Borde
Color del borde
A7A9AC
Borde
Radio de borde
7 px
Texto
Familia de fuentes
Arial
Texto
Color de fuente
BCBEC0
Texto
Tamaño de fuente
18 px
Texto
Altura de la línea
2
  1. Pulse el botón Enviar y pulse el icono aem_6_3_edit . Establezca las siguientes propiedades:
Acordeón
Propiedad
Valor
Dimensiones y posición
Flotante
Derecha
Dimensiones y posición
Margen
  • Superior: 5 rem
  • Derecha: 14 rem
  • Inferior: 20 px
  • Izquierda: 20 px
Fondo
Color de fondo
F6921E
Borde
Color del borde
F6921E

styled-adaptive-form-1

Paso 5: Sección Bonus: usar fuentes web en una temática personalizada step-bonus-section-using-web-fonts-in-a-custom-theme

Puede utilizar varias fuentes para diseñar un formulario adaptable. Es posible que no todos los dispositivos en los que se visualiza el formulario adaptable 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 Typekit es un servicio de fuentes web. Puede configurar y utilizar el servicio con formularios adaptables. Para utilizar Adobe Typekit en un formulario adaptable:

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

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

  2. En el servidor de AEM Forms, vaya a adobeexperiencemanager Adobe Experience Manager > Herramientas martillo > Implementación > Cloud Services. En la página Cloud Services, vaya a Servicios de terceros > Typekit y haga clic en Configurar Ahora en Typekit. Si una configuración ya está disponible, haga clic en el botón + 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 redirigirá a la página de configuración. En el cuadro de diálogo Editar componente que aparece, proporcione el ID del kit y haga clic en Aceptar.

  3. Configure el tema para utilizar la configuración TypeKit. En la instancia de autor, abra la Temática global en el editor de temáticas. En el editor de temáticas, vaya a Opciones de temática theme-options > Configurar. En Configuración de Typekit , seleccione el kit y haga clic en Guardar.

    Las fuentes agregadas a Typekit están disponibles para su selección en la Texto acordeón de todos los componentes.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da