Contenedor del formulario form-container-adaptive-forms-core-component
Este artículo describe las características de Borradores y Compatibilidad con menús de Hamburger, que son características previas al lanzamiento. Solo se puede acceder a la función de versión preliminar mediante nuestro canal de versión preliminar.
Los formularios permiten a los visitantes interactuar con el sitio web proporcionando información valiosa, lo que puede aumentar la participación y la satisfacción del usuario. Un contenedor de formulario adaptable en Adobe Experience Manager (AEM) Sites permite a los propietarios de sitios web agregar fácilmente formularios a sus páginas. Esto ayuda a facilitar la comunicación entre los visitantes del sitio web y su propietario u organización, ya que proporciona una manera optimizada para que los visitantes proporcionen comentarios, hagan consultas y otras acciones
Uso reasons-to-use-forms-container
Existen varias razones por las que se puede agregar un formulario a un sitio web:
-
Recopilación de datos: los formularios pueden utilizarse para recopilar datos de los visitantes de un sitio web con diversos fines, como estudios de mercado, análisis de comportamiento, etc.
-
Generación de posibles clientes: se puede utilizar un formulario para recopilar información de clientes potenciales, como el nombre y la dirección de correo electrónico, para generar posibles clientes para marketing y ventas.
-
Comercio electrónico: los formularios pueden servir para comprar en línea, lo que permite a los clientes efectuar pedidos y pagos a través del sitio web.
-
Contacto: un formulario de contacto permite a los visitantes del sitio web comunicarse fácilmente con el propietario o la organización del sitio web.
-
Encuestas y sondeos: los formularios pueden usarse para recopilar comentarios y opiniones de visitantes de sitios web a través de encuestas y sondeos.
-
Registro de eventos: los formularios se pueden destinar al registro en eventos, para que los visitantes del sitio web puedan inscribirse en eventos o seminarios web.
-
Suscripciones: los formularios pueden emplearse para suscripciones a sitios web, lo que permite a los visitantes suscribirse a una newsletter u otras comunicaciones periódicas.
-
Autenticación de usuarios: los formularios pueden funcionar para la autenticación de usuarios, lo que permite a los visitantes del sitio web crear cuentas e iniciar sesión para acceder a contenidos o funciones exclusivas.
-
Aumentar tasa de conversión: un formulario bien diseñado puede aumentar la tasa de conversión al facilitar a los usuarios la realización de las acciones deseadas, como la compra de un producto o la suscripción a un servicio.
Versión y compatibilidad version-and-compatibility
El componente principal Acordeón de los formularios adaptables se publicó en febrero de 2023 como parte de los componentes principales 2.0.4 para Cloud Service y componentes principales 1.1.12 para AEM 6.5.16.0 Forms o versiones posteriores. A continuación se muestra una tabla con todas las versiones admitidas, la compatibilidad con AEM y los vínculos a la documentación correspondiente:
versión 2.0.4 y posteriores
versión 1.1.12 y posteriores, pero inferiores a 2.0.0.
Para obtener información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.
Detalles técnicos technical-details
Obtenga la información más reciente sobre el componente principal de contenedor de formulario adaptable en la documentación técnica de GitHub. Para obtener más información sobre el desarrollo de los componentes principales, consulte la Documentación para desarrolladores de componentes principales.
Cuadro de diálogo de configuración configure-dialog
Puede personalizar fácilmente la experiencia del contenedor de formularios para los visitantes con el cuadro de diálogo de configuración. También puede definir las opciones de contenedor de formularios con facilidad para una experiencia del usuario perfecta.
Pestaña Básicos basic-tab
-
Título: con su título, puede identificar fácilmente un componente en un formulario y, de forma predeterminada, el título aparece sobre el componente. Si no agrega un título, se mostrará el nombre del componente en lugar del texto del título.
-
Servicios de rellenado previo: esta opción permite al usuario seleccionar un servicio de rellenado previo para recuperar datos cuando se procesa el formulario adaptable. Más información acerca de cómo crear y configurar un servicio de rellenado previo.
-
Función: la función es un atributo de HTML que se utiliza para especificar la finalidad de un elemento de HTML para tecnologías de asistencia como los lectores de pantalla. El atributo de función se utiliza para proporcionar un contexto y un significado semántico adicionales a un elemento, lo que facilita a los lectores de pantalla la interpretación y el anuncio del contenido al usuario. Por ejemplo, en AEM Forms, la etiqueta de un campo de formulario puede tener la función “label” y su campo de entrada puede tener la función “textbox”. Esto ayuda al lector de pantalla a comprender la relación entre la etiqueta y el campo de entrada, y a anunciarlas correctamente al usuario.
-
Categoría de biblioteca de cliente: el usuario puede configurar la biblioteca JavaScript personalizada por formulario adaptable. Se recomienda mantener solo las funciones reutilizables en la biblioteca, que tienen dependencia de las bibliotecas de terceros jquery y underscore.js.A veces, si hay reglas de validación complejas, el script de validación exacta reside en funciones personalizadas y los usuarios llaman a estas funciones personalizadas desde la expresión de validación de campo. Para que esta biblioteca de funciones personalizadas sea conocida y esté disponible mientras se realizan las validaciones del lado del servidor, el usuario del formulario puede configurar el nombre de la biblioteca de cliente de AEM en la pestaña Básica.El usuario puede configurar la biblioteca customJavaScript para formularios adaptables. En la biblioteca, mantenga solo las funciones reutilizables, que dependen de las bibliotecas de terceros jquery y underscore.js.
-
Habilitar el menú de hamburguesa para la vista móvil: seleccione la casilla de verificación para integrar un menú de hamburguesa en el formulario para la vista móvil. Representado por tres líneas horizontales apiladas verticalmente, este menú proporciona una visualización clara y despejada para paneles en dispositivos más pequeños, especialmente en dispositivos móviles. Para obtener más información sobre el menú de hamburguesa, consulte la sección Más información sobre el menú de hamburguesa.
Pestaña Modelo de datos data-model-tab
Puede utilizar el modelo de datos de formulario para conectar un formulario a una fuente de datos para enviar y recibir datos en función de las acciones del usuario. También puede conectar un formulario a un esquema JSON para recibir los datos enviados en un formato predefinido. En función del requisito, conecte el formulario a un esquema JSON o a un modelo de datos de formulario:
- Ninguno: no asocie el formulario con un modelo de datos.
- Esquema: conecte el formulario a un esquema JSON cargado en su entorno.
- Modelo de datos de formulario: conecte el formulario a un modelo de datos de formulario para integrarlo con fuentes de datos externas.
- Conector: conecte el formulario a un origen de datos basado en conector.
- Plantillas de formulario: asocie el formulario con una plantilla de formulario.
Pestaña Borradores drafts-tab
- Guardar borradores automáticamente: seleccione la casilla de verificación Guardar borradores automáticamente para habilitar la acción de guardar formularios como borradores.
- Guardar preferencia: configure Guardar preferencia como Guardar borradores a intervalos regulares para guardar automáticamente el formulario después de un intervalo de tiempo específico.
Guardar frecuencia de intervalo (segundos): especifique el intervalo de tiempo (en segundos) para establecer la duración que desencadena la acción de guardar automáticamente el formulario en el intervalo definido.
Pestaña Envío submission-tab
Los usuarios pueden configurar distintas acciones para los envíos de formularios adaptables.
-
Al enviar - Elija Redirigir a la URL para enviar a los usuarios de un formulario a una página configurada después del envío, o Mostrar mensaje para mostrar un mensaje de confirmación en el formulario.
-
Ruta/URL de redireccionamiento: esta opción permite al usuario configurar una página para cada formulario, a la que se redirige a los usuarios después de enviar un formulario adaptable. Haga clic aquí para obtener más información sobre configuración de páginas de redireccionamiento.
- Mostrar mensaje: esta opción permite a los usuarios agregar un mensaje que se muestra cuando el formulario adaptable se envía correctamente. El texto predefinido se incluye en el cuadro de diálogo y el usuario puede modificarlo. El cuadro de diálogo Mostrar mensaje admite herramientas de formato de texto enriquecido que permiten a los usuarios dar formato al texto agregado.
-
Acción de envío: se activa una acción de envío cuando un usuario hace clic en el botón Enviar en un formulario adaptable. Los usuarios pueden seleccionar acciones de envío en la lista desplegable que se admiten de forma predeterminada. Obtenga información sobre cómo configurar una acción de envío en la pestaña Envío.
-
Configuración de la acción: configure asignaciones para pasar valores de campo como parámetros de solicitud de la página Gracias.
-
Habilitar solicitud POST: seleccione esta opción para enviar los datos del formulario mediante una solicitud HTTP POST.
Pestaña Documento de registro document-of-record-tab
Un documento de registro (DoR) es una representación formal e imprimible de los datos enviados a través del formulario. Utilice la ficha Documento de registro para configurar cómo se genera un DoR cuando un usuario envía el formulario:
- Ninguno - No genere un documento de registro para el formulario.
- Asociar plantilla de formulario como la plantilla de documento de registro - Usar una plantilla de formulario existente como plantilla de documento de registro.
- Generar documento de registro: genere automáticamente un documento de registro basado en los datos del formulario enviado.
- Excluir archivos adjuntos del documento de registro: seleccione esta opción para omitir los archivos adjuntos del documento de registro generado.
Cuadro de diálogo Diseño design-dialog
El cuadro de diálogo de diseño se utiliza para definir y administrar estilos CSS para el componente Contenedor del formulario.
Pestaña Componentes permitidos allowed-components-tab
La pestaña Componentes permitidos permite que el editor de plantillas defina los componentes que se pueden añadir como elementos a los paneles en el componente del editor de formularios adaptables.
Pestaña Componentes predeterminados default-components-tab
La pestaña Componentes predeterminados facilita al editor de plantillas especificar los componentes visibles de forma predeterminada como elementos en el componente contenedor de formulario del editor de Formularios adaptables.
Pestaña Configuración adaptable responsive-tab
La pestaña Configuración adaptable permite al editor de plantillas especificar el número de columnas de la cuadrícula dentro del componente contenedor de formulario en el editor de Formularios adaptables.
Pestaña Estilos styles-tab
El componente principal de los archivos adjuntos de formularios adaptables es compatible con el Sistema de estilos de AEM.
-
Clases CSS predeterminadas: puede proporcionar una clase CSS predeterminada para el componente principal de contenedor de formularios para formularios adaptables.
-
Estilos permitidos: puede definir estilos proporcionando un nombre y la clase CSS que representa el estilo. Por ejemplo, puede crear un estilo llamado “texto en negrita” y proporcionar la clase de CSS “grosor de fuente: negrita”. Puede utilizar o aplicar estos estilos a un formulario adaptable en el editor de formularios adaptable. Para aplicar un estilo, en el editor de Formularios adaptables, seleccione el componente al que desee aplicar el estilo, vaya al cuadro de diálogo de propiedades y seleccione el estilo que desee en la lista desplegable Estilos. Si necesita actualizar o modificar los estilos, simplemente vuelva al cuadro de diálogo Diseño, actualice los estilos en la pestaña Estilos y guarde los cambios.
Pestaña Propiedades personalizadas
Las propiedades personalizadas le permiten asociar atributos personalizados (pares clave-valor) a un componente principal del formulario adaptable mediante la plantilla de formulario. Las propiedades personalizadas se reflejan en la sección de propiedades de la representación sin encabezado del componente. Permite crear un comportamiento de formulario dinámico que se adapta en función de los valores de atributos personalizados. Por ejemplo, los desarrolladores pueden diseñar varias representaciones de un componente Forms sin encabezado para plataformas móviles, de escritorio o web, lo que mejora significativamente la experiencia del usuario en una amplia gama de dispositivos.
-
Nombre de grupo: puede proporcionar un nombre para identificar el grupo de propiedades personalizadas. Puede agregar, eliminar o reorganizar varios grupos de propiedades personalizadas. Después de añadir el grupo de propiedades personalizadas, podrá ver las siguientes opciones:
-
Pares de clave-valor: puede agregar varios nombres de propiedades personalizadas y valores de propiedades personalizadas haciendo clic en el botón Añadir para cada grupo de propiedades personalizadas.
-
Eliminar: toque o haga clic para eliminar el nombre de la propiedad personalizada y el valor de la propiedad personalizada.
-
Reorganizar: toque o haga clic y arrastre para reorganizar el orden del nombre de la propiedad personalizada y el valor de la propiedad personalizada.
-
Más información sobre el menú de hamburguesa learn-more-about-the-hamburger-menu
Un menú de hamburguesa, a menudo denominado menú móvil o cajón de navegación, es un elemento de diseño popular en las interfaces de usuario móviles. Cuenta con tres líneas horizontales apiladas verticalmente, parecidas a una hamburguesa. El diseño ahorra espacio de pantalla de forma eficaz al ocultar las opciones de navegación secundarias hasta que son necesarias, especialmente en dispositivos más pequeños como dispositivos móviles. Los formularios AEM se pueden organizar de forma eficaz dentro del menú de hamburguesa, lo que permite a los usuarios acceder a varios paneles dentro de un formulario sin saturar la interfaz principal.
Imagine un escenario en el que una institución financiera ofrece un formulario de solicitud de préstamo en línea que requiere que los usuarios proporcionen información detallada en varios paneles, como detalles personales, información financiera, preferencias de préstamo y documentos de apoyo. El formulario incluye varios paneles y opciones que pueden saturar la interfaz, especialmente en dispositivos móviles. Los usuarios necesitan una forma organizada de navegar por estos paneles sin sentirse abrumados. El menú de hamburguesa se implementa para mejorar la experiencia del usuario en dispositivos móviles.
Componentes del menú de hamburguesa
A. Menú de hamburguesa: El menú de hamburguesa incluye un panel de navegación que se desliza o se cae cuando se pulsa o se hace clic en el icono de hamburguesa. El menú muestra los encabezados del panel y, al seleccionar un panel, se desplaza el enfoque a ese panel. Permite a los usuarios navegar fácilmente entre diferentes paneles.
B. Ruta de exploración: Las rutas de exploración indican la ubicación actual del usuario dentro del formulario. Ofrecen un registro jerárquico que muestra la ruta de navegación del usuario y le ayuda a comprender su posición en el formulario.
C. Panel activo: el panel activo hace referencia a la sección o parte del formulario que se está mostrando en ese momento. Cuando un usuario selecciona una opción del menú de hamburguesa, el panel correspondiente se convierte en el panel activo, mostrando los campos y la información relevantes para esa sección.
Puntos a tener en cuenta al trabajar con el menú de hamburguesas
-
El menú de hamburguesa muestra únicamente los nombres de los paneles. Estos son diferentes escenarios que ilustran cómo aparece el nombre del panel en el panel de navegación del menú de hamburguesa en función de las propiedades de configuración del panel:
-
Si establece las propiedades del panel en hidden, el nombre del panel no aparece en el panel de navegación del menú de hamburguesa. Por ejemplo, si configura las propiedades del panel
Financial Informationcomohidden, el nombre del panel no aparecerá en el panel de navegación del menú de hamburguesa. {width="50%"}
-
Si establece las propiedades del panel en
disabled, su nombre aparecerá en el panel de navegación del menú de hamburguesa, pero no podrá seleccionarlo ni editarlo. Por ejemplo, si configura las propiedades del panelFinancial Informationcomodisabled, el nombre del panel aparecerá en el panel de navegación, pero no se podrá seleccionar ni editar. {width="50%"}
-
Si oculta el título del panel, no aparecerá en el panel de navegación del menú de hamburguesa. En su lugar, aparece un espacio en blanco, pero puede navegar a los campos del panel haciendo clic en ese espacio. Por ejemplo, si oculta el título del panel
Financial Information, el espacio en blanco aparecerá en su lugar en el panel de navegación del menú de hamburguesa. Puede navegar a los campos del panel haciendo clic en el espacio en blanco. {width="50%"}
-
-
De forma predeterminada, el panel de navegación del componente Ruta de exploración admite hasta tres niveles de navegación. Sin embargo, con el componente personalizado, puede configurar la jerarquía de navegación para que quepa tantos niveles como sea necesario.
-
Al utilizar el menú de hamburguesa, el usuario puede navegar entre paneles mediante flechas. Sin embargo, una vez seleccionado un panel, el menú se cierra automáticamente y el enfoque cambia a los campos dentro del panel elegido.
Artículos relacionados related-articles
Consulte también see-also
- Crear un formulario adaptable de AEM
- Agregar un formulario adaptable de AEM a la página de AEM Sites
- Aplicar temáticas a un formulario adaptable de AEM
- Añadir componentes a un formulario adaptable de AEM
- Usar reCAPTCHA en un formulario adaptable de AEM
- Generar la versión PDF (DoR) de un formulario adaptable de AEM
- Traducir un formulario adaptable de AEM
- Habilitar Adobe Analytics para un formulario adaptable con el fin de hacer un seguimiento del uso del formulario
- Conectar el formulario adaptable a Microsoft SharePoint
- Conectar formularios adaptables a Microsoft Power Automate
- Conectar el formulario adaptable a Microsoft OneDrive
- Conectar el formulario adaptable al almacenamiento de Microsoft Azure Blob
- Conectar el formulario adaptable a Salesforce
- Uso de Adobe Sign en un formulario adaptable de AEM
- Agregar una nueva configuración regional para un formulario adaptable
- Enviar datos de formulario adaptable a una base de datos
- Enviar datos de formulario adaptable a un punto final REST
- Enviar datos de formulario adaptable al flujo de trabajo de AEM
- Utilizar el portal de Forms para ver una lista de Formularios adaptables de AEM en un sitio web de AEM