Aplicar estilo a un formulario adaptable

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

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 temáticas para crear temáticas personalizadas. 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:

Antes de comenzar

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

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 para aplicar la temática seleccionada.

   

   Figura: formulario adaptable con la temática predeterminada

   

   Figura: formulario adaptable con la temática de encuesta

Paso 2: Actualizar el formulario adaptable

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 . En la propiedad imagen, pulse X para eliminar la imagen del logotipo existente.

   3. Pulse cargar, seleccione el logo.png y pulse 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 Editar. Cambie el texto del encabezado a we retail. Aplique formato de negrita solo a ween we retail.

      

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 .

   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 .

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

      

Paso 3: Crear una temática personalizada para el formulario adaptable

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

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 aplicar estilo, el editor de temáticas 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 > Configurar. En el campo Vista previa del formulario, seleccione el formulario adaptable shipping-address-add-update-form, pulse , 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.

   

   Figura: editor de temáticas con el formulario adaptable shipping-address-add-update-form

   

   Figura: formulario adaptable con el formulario predeterminado

Aplicar estilo al encabezado y al pie de página

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.

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

   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 .

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 .

   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 .

   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

6. 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 .

Aplicar un estilo al componente de captura de datos y 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, haga lo siguiente:

1. Pulse ID de cliente y pulse la opción Widget de campo. Establezca las siguientes propiedades y pulse .

   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

2. 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 .

   

Aplicar estilo a los botones

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 .

   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

2. 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.

   

Paso 4: Aplicar estilo a 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.

   

3. Pulse el botón Adjuntar y pulse el icono . Establezca las siguientes propiedades en el acordeón Dimensiones y posición:

   Propiedad	Valor
   Flotante	Izquierda
   Anchura	10 %

4. Pulse Prueba de dirección aprobada por el gobierno y pulse el icono . 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

5. Pulse el botón Enviar y pulse el icono . 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

   

Paso 5: Sección Bonus: usar fuentes web en una temática personalizada

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 Fonts es un servicio de fuentes web. Puede configurar y utilizar el servicio con formularios adaptables. Para usar Adobe Fonts en un formulario adaptable, haga lo siguiente:

1. Cree una cuenta de Adobe Fonts, cree un kit, agregue la fuente Myriad Pro al kit, publíquelo y obtenga su ID. Es necesario utilizar Adobe Fonts (Fuentes web) en un formulario adaptable.

2. En el servidor de AEM Forms, navegue hasta Adobe Experience Manager > Herramientas > Adobe Fonts. A continuación, abra una carpeta de configuración. Si hay alguna configuración disponible, haga clic en el botón Crear para crear una instancia nueva.

   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 la temática para que use la configuración Adobe Fonts. 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 > Configurar. En el campo Configurar Adobe Fonts, seleccione un kit y haga clic en Guardar.

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

Recursos de Business.Adobe.com

Content Insights Automated Onboarding Personalized Experiences Customer Communications Web Content Management Dynamic Forms