Contenedor del formulario

Última actualización: 2024-02-01
  • Creado para:
  • Developer
    Admin
    User

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

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

El componente principal de acordeón de 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 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 del componente AEM as a Cloud Service AEM 6.5.16.0 Forms o posteriores
Versión 1 Compatible con la
versión 2.0.4 y posteriores
Compatible con la
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

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 componentes principales, consulte la Documentación para desarrolladores de componentes principales.

Cuadro de diálogo de configuración

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

Pestaña Básicos

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

  • 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ásico de las propiedades del contenedor del formulario adaptable como se muestra a continuación.

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.

Pestaña Modelo de datos

Pestaña Envío

Puede utilizar el modelo de datos del 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:

  • Crear un esquema JSON y cargarlo en su entorno
  • Crear modelo de datos de formulario

Pestaña Envío

Pestaña Envío

Los usuarios pueden configurar distintas acciones para los envíos de formularios adaptables.

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

Pestaña Mostrar mensaje

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

Cuadro de diálogo de diseño

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

Pestaña de componentes permitidos del cuadro de diálogo Diseño

La pestaña Componentes permitidos facilita que el editor de plantillas defina los componentes que se pueden agregar como elementos a los paneles en el componente del editor de formularios adaptables.

Pestaña Componentes predeterminados

Pestaña de componente predeterminada del cuadro de diálogo Diseño

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

Pestaña Configuración adaptable del cuadro de diálogo Diseño

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

El componente principal de los archivos adjuntos de formularios adaptables es compatible con el Sistema de estilos de AEM.

Cuadro de diálogo de diseño

  • 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

Cuadro de diálogo Propiedades personalizadas

Las propiedades personalizadas le permiten asociar atributos personalizados (pares clave-valor) a un componente principal del formulario adaptable mediante la plantilla de un 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.

Vea también

En esta página