Estilo del formulario adaptable

Aprenda a crear un tema personalizado, a diseñar componentes individuales y a utilizar fuentes web en un tema

Este tutorial es un paso de la serie Crear su primer formulario adaptable. 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 temáticas para proporcionar un aspecto 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 proporcionar un editor de temas para crear temáticas personalizadas. Un solo tema puede proporcionar un aspecto diferente al mismo formulario adaptable que se abre en un dispositivo móvil, tablet o 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 predefinido a un formulario adaptable
  • Creación de un tema para un formulario adaptable mediante el editor de temas
  • Estilo de componentes individuales
  • Sección de primas: Uso de fuentes web en un tema personalizado

El formulario tendrá un aspecto similar al siguiente una vez que complete el tutorial:

Formulario con un tema personalizado

Antes de comenzar

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

Obtener archivo

Obtener archivo

Paso 1: Aplicar un tema al formulario adaptable

El editor de formularios adaptables proporciona varias temáticas listas para usar. Si tiene previsto no utilizar un estilo personalizado en el formulario adaptable, también puede publicar los formularios adaptables con un tema incorporado. Las temáticas son independientes de los formularios 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. Abrir propiedades del contenedor de formulario adaptable. En el navegador de propiedades, vaya a Básico > Tema de formulario adaptable. El campo Tema de formulario adaptable lista todas las temáticas integradas y personalizadas. De forma predeterminada, se aplica el tema Lienzo.

  3. Seleccione un tema en el campo Tema de formulario adaptable. Por ejemplo, el 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 Encuesta

    Figura: Formulario adaptable con el tema de Encuesta

Paso 2: Actualizar el formulario adaptable

El diseño que se muestra arriba requiere cambios en el texto del marcador de posición y en el logotipo del 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. Toque la imagen del logotipo en el componente de encabezado y toque las propiedades cmppr. En la propiedad de imagen , toque X para eliminar la imagen del logotipo existente.

    3. Toque cargar, seleccione el logo.png y toque aem_6_3_forms_save para guardar los cambios. La imagen se ha descargado en la sección Antes del inicio .

    4. Toque texto del encabezado We.Retaily toque aem_6_3_edit edit. Cambiar el texto del encabezado a we retail. Aplicar formato de negrita solo a wela we retail.

      we-Retail-logo-text

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

    1. Toque el campo ID de cliente y 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 toque 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.

      update-adaptive-form

Paso 3: Creación de un tema personalizado para el formulario adaptable

Puede utilizar el editor de temas para crear temáticas personalizadas. El editor de temas 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 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. Inicios con la creación de un tema:

Crear un tema

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

  2. Toque Crear y seleccione Tema. Aparece la página Crear tema con los campos necesarios para crear un tema. Los campos Título y Nombre son obligatorios:

    • Título: Especifique un título del tema. Por ejemplo, Tema global. El título le ayuda a identificar el tema a partir de la lista de temáticas.
    • Nombre: Especifique el nombre del tema. Por ejemplo, Tema global. En el repositorio se crea un nodo con el nombre especificado. Al escribir un título con inicio, se genera automáticamente el valor del campo de nombre. 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 reemplazan con un guión.

  3. Toque Crear. Se crea un tema y un cuadro de diálogo para abrir el formulario y editarlo. Toque Abrir para abrir el tema recién creado en una ficha nueva. El tema se abre en el editor de temas. Para aplicar 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 editorde temas.

  4. Puntee en Opciones ​​de tema opciones de tema > Configurar. En el campo Formulario de Previsualización, seleccione el formulario adaptable Shipping-address-add-update-form , toque aem_6_3_forms_savey Guardar. Ahora, el editor de temas está configurado para utilizar su propio formulario adaptable en lugar del formulario adaptable predeterminado. Toque Cancelar para volver al editor de temas.

    custom-topic

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

    create-a-topic

    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. Generalmente, el encabezado contiene el logotipo y el nombre de la organización, el pie de página contiene información de copyright y estas permanecen idénticas en varias formas de una 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 Encabezado > Texto en el panel Selectores. El panel Selectores se encuentra a la izquierda del editor de temas. Si el panel no está visible, toque alternar panel lateral Alternar panel lateral.

  2. Defina las siguientes propiedades en el acordeón Texto y toque aem_6_3_forms_save.

    Propiedad Value
    Familia de fuentes Arial
    Color de fuente FFFFFF
    Tamaño de fuente 54px

  3. Toque el widget de encabezado y toque Encabezado. Las opciones para aplicar estilo al widget de encabezado aparecen a la izquierda. Expanda el acordeón Dimension y posición , defina la altura en 120pxy toque aem_6_3_forms_save.

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

    Pase el ratón sobre Imagen y degradado > + Añadir, toque Imagen. Defina las siguientes propiedades y toque aem_6_3_forms_save.

    Propiedad Value
    image Cargue header-style.png. La imagen se ha descargado en la sección Antes del inicio .
    Posición Inferior Derecha
    Mosaico No repetir

  5. En el editor de temas, toque el logotipo en el encabezado y toque Logotipo de encabezado. Expanda el acordeón Dimension y posición, defina las siguientes propiedades y toque aem_6_3_forms_save.

    imagen Value
    imagen
    • Superior: 1,5 rem
    • Inferior: -35 px
    • Izquierda: 1 rem

    Sugerencia: Toque el icono del vínculo para proporcionar un valor diferente a cada campo.
    Altura 4.75rem

  6. Puntee en el widget de pie de página y toque Pie de página. Expanda el acordeón Fondo , defina el color de fondo en F6921Ey toque aem_6_3_forms_save.

Estilo del componente de captura de datos y aplicación de 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 un estilo independiente para cada componente. En este tutorial, se aplica un estilo idéntico a los cuadros numéricos (ID del cliente, código postal) y los cuadros de texto (ID del cliente, nombre, dirección de envío, estado, correo electrónico). Para aplicar estilo a los componentes de captura de datos:

  1. Toque el campo ID ​​del cliente y toque la opción Utilidad de campo . Defina las siguientes propiedades y toque aem_6_3_forms_save.

    Acordeón Propiedad Value
    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 18px
    Dimension y posición Anchura 60%
    Dimension y posición imagen
    • Izquierda: 10 rem

  2. Toque en el área vacía sobre el campo ID ​​del cliente y toque el Contenedor del panel interactivo. Establezca el Fondo > Color de fondo en F1F2F2. Toque aem_6_3_forms_save.

Estilo de los botones

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

  1. Toque el botón Enviar y toque la opción Botón . Defina las siguientes propiedades y toque aem_6_3_forms_save.

    Acordeón Propiedad Value
    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 18px

  2. Aplique el temapersonalizado, Tema global, al formulario adaptable. Si el estilo no se refleja en el formulario adaptable, limpie la caché del explorador e inténtelo de nuevo.

    style-data-capture-components

Paso 4: Estilo 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. Toque el botón Adjuntar y toque el icono aem_6_3_editicon. Defina las siguientes propiedades en el acordeón Dimension y Posición :

    Propiedad Value
    Flotante Izquierda
    Anchura 10%

  4. Toque la opción de prueba de dirección aprobada por el gobierno y toque el icono aem_6_3_editicon. Establezca las siguientes propiedades:

    Acordeón Propiedad Value
    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 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. Toque el botón Enviar y toque el icono aem_6_3_edit . Establezca las siguientes propiedades:

    Acordeón Propiedad Value
    Dimension y posición Flotante Derecha
    Dimension y posición imagen
    • 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 de primas: 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 proporcionar las fuentes necesarias al dispositivo destinatario.

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

Nota

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

  1. Cree una cuenta de Adobe Fonts , cree un kit, agregue 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 adobeexperience emanager Adobe Experience Manager > Herramientas martillo > ​​Adobe Fonts. Ahora, abra una carpeta de configuración. Si ya hay una configuración disponible, haga clic en el botón Crear 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 de Kit y haga clic en Aceptar.

  3. Configure el tema para que utilice la Adobe Fonts configuración. 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 al Adobe Fonts están disponibles para su selección en el acordeón Texto de todos los componentes.

En esta página