DocumentaciónAEM as a Cloud ServiceGuía del usuario

Incrustar un formulario adaptable en una página de AEM Sites embed-an-adaptive-form-to-aem-sites-page

Last update: Mon May 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Administrador
  • Usuario
  • Desarrollador
Versión
Vínculo del artículo
AEM 6.5
Haga clic aquí
AEM as a Cloud Service
Este artículo

Información general overview

AEM Forms permite a los desarrolladores de formularios incrustar sin problemas formularios adaptables en una página de AEM Sites o en una página web hospedada fuera de AEM. El formulario adaptable incrustado es completamente funcional, y los usuarios pueden rellenarlo y enviarlo sin abandonar la página. Esto permite al usuario a mantenerse en el contexto de otros elementos de la página web e interactuar simultáneamente con el formulario. Esto permite a los visitantes rellenar y enviar formularios cómodamente sin salir de la página en la que se encuentran. Esta integración proporciona una forma cómoda para que los clientes puedan reutilizar los formularios adaptables que ya han creado.

Puede utilizar el Editor de páginas de AEM para integrar rápidamente varios formularios a las páginas de AEM Sites. El uso del Editor de páginas de AEM permite a los autores de contenido crear experiencias de captura de datos sin problemas dentro de una página de Sites mediante la potencia de los componentes de los formularios adaptables, incluido el comportamiento dinámico, las validaciones, la integración de datos, la generación de documentos de registro y la automatización de procesos empresariales. También le permite utilizar varias funciones de las páginas de AEM Sites, como versiones, segmentación, traducción y administrador de varios sitios.

AEM Forms proporciona el contenedor del formulario adaptable y los componentes Formularios adaptables – Incrustados (v2). Puede utilizar el componente Formularios adaptables: Incrustados (v2) para agregar un formulario adaptable existente o crear un formulario con el Editor de Formularios adaptables, y el Contenedor de formulario adaptable para crear un nuevo formulario dentro de una página de Fragmento de experiencia o AEM Sites.

Ejemplo de un formulario adaptable en una página de AEM Sites

¿Cómo se crea o se agrega un formulario adaptable en una página de AEM Sites o en un fragmento de experiencia de AEM? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

Puede aprovechar al máximo esta función utilizando las siguientes opciones:

  • Crear un formulario adaptable con plantillas aprobadas e incrustarlo en una página de AEM Sites:  puede utilizar las plantillas aprobadas previamente para crear e incrustar rápidamente Formularios adaptables que se ajusten a las directrices de personalización de marca y los estándares de diseño de su organización.

  • Añada formularios existentes a una página de AEM Sites:  puede integrar fácilmente formularios que ya haya creado en sus sitios web, lo que permite a los visitantes interactuar con ellos directamente.

  • Convertir un formulario adaptable en fragmento de experiencia: convierta un formulario adaptable agregado a una página de AEM Sites en un fragmento de experiencia para reutilizar el formulario en varias páginas de AEM Sites.

  • **Crear y agregar un formulario adaptable personalizado a una página de AEM Sites:**puede utilizar el componente contenedor de formulario adaptable para crear un formulario completamente nuevo desde cero y adaptarlo específicamente a sus necesidades y preferencias de diseño.

  • Crear y agregar un formulario adaptable personalizado a los fragmentos de experiencias: puede ampliar el alcance de los formularios añadiéndolos a los fragmentos de experiencias de AEM, lo que permite una reutilización perfecta en varias páginas o sitios.

  • Agregar varios formularios a una página de AEM Sites o a un fragmento de experiencia: puede crear o agregar varios formularios adaptables a una página AEM Sites para proporcionar varias opciones a los usuarios en función de sus preferencias y requisitos. Puede utilizar el Editor de páginas de AEM para integrar rápidamente varios formularios a las páginas de AEM Sites. Puede usar el componente Contenedor de formulario adaptable varias veces para añadir Formularios adaptables en una página de AEM Sites. Puede usar el componente Formularios adaptables: incrustados varias veces en una página de AEM Sites, solo si se selecciona la opción El formulario abarca toda la anchura del marco. En caso de que la opción El formulario abarca toda la anchura del marco no esté activada, la página de AEM Sites solo admite que un formulario adaptable exista sin un iframe. Para agregar más Formularios adaptables con el componente Formularios adaptables: incrustados, seleccione la opción El formulario abarca toda la anchura del marco.

Consideraciones para crear un formulario adaptable en una página de AEM Sites o un fragmento de experiencia de AEM consideration

  • Cuando se crea o se añade un formulario utilizando el componente Formularios adaptables: Incrustados (v2), los formularios pasan por un proceso de traducción y localización utilizando el flujo de traducción de AEM Forms. En este caso, se mantiene un único formulario y se hace referencia a él en todas las copias de idioma de las páginas de Sites. El componente Formularios adaptables: Incrustados (v2) no proporciona acceso a varias funcionalidades de páginas de AEM Sites, como versiones, segmentación, traducción y administrador de varios sitios.

  • Cuando se utiliza el Contenedor de formularios adaptables para crear un formulario, los formularios pasan por un proceso de traducción y localización a través del flujo de traducción de AEM Sites. Para cada idioma, se genera una copia independiente (copia de idioma) de la página de Sites y de los formularios correspondientes y, cuando un autor de contenido modifica una regla en un formulario de la página principal, se deben realizar los mismos cambios en todas las copias de idioma del formulario. El contenedor de formularios adaptables también permite utilizar varias funcionalidades de las páginas de AEM Sites, como versiones, segmentación, traducción y administrador de varios sitios.

Consideraciones para crear un formulario adaptable en una página de AEM Sites o un fragmento de experiencia de AEM before-you-start-embedding-an-adaptive-form

Antes de empezar a incrustar un nuevo formulario adaptable o un formulario adaptable preexistente mediante Formularios adaptables: Incrustados (v2), habilite Componentes principales de Formularios adaptables y agregue Bibliotecas de cliente de Formularios adaptables a su página de AEM Sites:

Habilitar los componentes principales de formularios adaptables para su entorno de AEM Cloud Service
Asegúrese de que los componentes principales de formularios adaptables estén habilitados para su entorno de AEM Forms as a Cloud Service.
Añada bibliotecas de cliente de formularios adaptables a los componentes de la página de AEM Sites o de fragmento de experiencia

Cuando la opción Cuando el formulario abarca toda la anchura de una página está seleccionada en el cuadro de diálogo de configuración de Contenedores de formulario y se utilizan los Formularios adaptables con componentes principales, es necesario incluir las bibliotecas de cliente en la página del sitio correspondiente.

Cuando se selecciona la opción Formulario abarca todo el ancho de una página, y se utiliza un formulario adaptable con componentes principales

Añada las bibliotecas de cliente Customheaderlibs y Customfoterlibs a la página de AEM Sites mediante la canalización de implementación. Para añadir las bibliotecas de cliente, haga esto:

  1. Acceda a Repositorio de Git de AEM Cloud Service y clónelo.

  2. Abra la carpeta Repositorio de Git de AEM Cloud Service en un editor de texto del plan. Por ejemplo, Microsoft® Visual Code.

  3. Abra el archivo ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html y añada el siguiente código al archivo:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  4. Abra el archivo ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html y añada el siguiente código al archivo:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  5. Abra el archivo ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html y añada el siguiente código al archivo:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  6. Abra el archivo ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html y añada el siguiente código al archivo:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  7. Ejecute la canalización de implementación para implementar las bibliotecas de cliente en el entorno de AEM as a Cloud Service.

Habilitar Formularios adaptables: Incrustados (v2) para su página de AEM Sites o fragmento de experiencia

Para habilitar el componente Formularios adaptables: Incrustados (v2) en la política de la plantilla, siga los siguientes pasos:

  1. Abra la página de AEM Sites o el Fragmento de experiencia para editarlos. Para abrir la página para editarla, selecciónela y haga clic en Editar.
  2. Abra la plantilla de su página Sites o Fragmento de experiencia. Para abrir la plantilla, vaya a Información de página Información de página > Editar plantilla. Se abre la plantilla correspondiente en el editor de plantillas.
  3. En la vista Estructura, haga clic en el icono Política Política en la barra de menús. En la lista Componentes permitidos, seleccione la casilla de verificación Formularios adaptables: Incrustados (v2) en [Nombre de proyecto de tipo de archivo de AEM]: formulario adaptable.
  4. Haga clic en Listo.
embed

https://video.tv.adobe.com/v/3419369?quality=12&learn=on

Para incrustar un formulario adaptable utilizando el componente Formularios adaptables: incrustados (v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment

Utilice el componente de Formularios adaptables: incrustados (v2) para crear un formulario adaptable desde AEM Sites Editor mediante el asistente de creación de formularios. El formulario resultante se guarda como una entidad externa, lo que permite su reutilización en otras páginas de Sites y en formularios independientes. Puede crear un formulario completamente nuevo desde cero y adaptarlo específicamente a sus necesidades y preferencias de diseño, directamente en una página de AEM Sites o en un Fragmento de experiencia. Para formularios de un solo uso, se recomienda la creación directa en una página de AEM Sites, mientras que los Fragmentos de experiencias son ideales para formularios que deben reutilizarse en varias páginas del sitio web.

Puede incrustar fácilmente un formulario nuevo mediante Formularios adaptables: incrustados (v2). Por ejemplo, imagine que incorpora un nuevo formulario de contacto a una página de AEM Sites o un Fragmento de experiencia de AEM. Cualquier actualización o modificación realizada en el formulario de contacto dentro de la página de AEM Sites o del Fragmento de experiencia se aplicará automáticamente a todas las páginas en las que esté implementado. Esto simplifica la administración de los formularios del sitio web, lo que garantiza una experiencia del usuario perfecta y optimiza el proceso general.

Con los Formularios adaptables: incrustados (v2) puede hacer lo siguiente:

Incrustar un nuevo formulario con el Asistente para Formularios adaptables en una página de AEM Sites embed-form-using-adaptive-form-wizzard-aem-sites

Los pasos para incrustar un nuevo formulario en una página de AEM Sites son los siguientes:

  1. Abra la página de AEM Sites en el modo de edición.

  2. En el panel Explorador de componentes, arrastre y coloque el componente Formularios adaptables: incrustar(v2) en la página.

  3. Haga clic en el icono Más y se le redirigirá al asistente de creación de formularios.

    Componente Formularios adaptables: incrustar

  4. Cree un nuevo formulario adaptable desde el asistente de Creación de formularios.
    La variable Ruta de recursos ya incluye la ruta de un formulario adaptable creado

  5. Guarde la configuración. El formulario adaptable está ahora incrustado en la página.

https://video.tv.adobe.com/v/3419366/adaptive-form-aem-forms?quality=12&learn=on

A continuación, puede establecer la acción de envío y las propiedades avanzadas de un formulario adaptable incrustado mediante el asistente para la creación de formularios.

Incrustar un nuevo formulario mediante el Asistente para Formularios adaptables en un Fragmento de experiencia embed-form-using-adaptive-form-wizzard-experience-fragment

Los pasos para incrustar un nuevo formulario en un Fragmento de experiencia son los siguientes:

  1. Abra el Fragmento de experiencia en modo de edición.

  2. En el panel Explorador de componentes, arrastre y coloque el componente Formularios adaptables: incrustar(v2) en la página.

  3. Haga clic en el icono Más y se le redirigirá al asistente de creación de formularios.

    Componente Formularios adaptables: incrustar

  4. Cree un nuevo formulario adaptable desde el asistente de Creación de formularios.
    La variable Ruta de recursos ya incluye la ruta de un formulario adaptable creado

  5. Guarde la configuración. El formulario adaptable está ahora incrustado en el Fragmento de experiencia.

A continuación, puede establecer la acción de envío y propiedades avanzadas de un formulario adaptable incrustado mediante el asistente para la creación de formularios.

Incrustar un formulario adaptable en una página de AEM Sites embed-an-adaptive-form-in-sites-editor

Con el componente Formularios adaptables:incrustados (v2) puede integrar fácilmente un formulario adaptable preexistente en una página de AEM Sites. Esta función mejora significativamente la adaptabilidad y reutilización de Formularios adaptables, ofreciendo a los clientes una forma cómoda de reutilizar formularios que ya han creado. Por ejemplo, imagine que incorpora un formulario de contacto a una página de AEM Sites, lo que elimina la necesidad de volver a crear el formulario varias veces.

Para incrustar un formulario adaptable en una página de Sites, haga lo siguiente:

  1. Abra la página de AEM Sites en el modo de edición.
  2. Arrastre y suelte el componente Formularios adaptables: incrustados (v2) del explorador de componentes a la página de Sites.
  3. Seleccione el componente  Formularios adaptables: incrustados  en la página de Sites y, a continuación, seleccione propiedades del Contenedor de formulario adaptable  en la barra de acciones. Se abre el cuadro de diálogo Editar formularios adaptables: incrustados (v2).
  4. Busque y seleccione el formulario adaptable para incrustarlo en la Ruta de recursos.
  5. Guarde la configuración. El formulario adaptable está ahora incrustado en la página.

https://video.tv.adobe.com/v/3419368?quality=12&learn=on

A continuación, puede establecer la Acción Enviar y las propiedades avanzadas de un formulario adaptable incrustado mediante el asistente para la creación de formularios.

Incrustar un formulario adaptable existente en un Fragmento de experiencia embed-an-adaptive-form-in-experience-fragment

También puede ampliar la accesibilidad de los formularios incrustándolos en el Fragmento de experiencia de AEM. Para incrustar un Formulario adaptable en un Fragmento de experiencia, haga lo siguiente:

  1. Abra un Fragmento de experiencia en modo de edición.
  2. Arrastre y suelte el componente Formularios adaptables: incrustados (v2) del explorador de componentes al Fragmento de experiencia.
  3. Seleccione el componente  Formularios adaptables: incrustados en el Fragmento de experiencia y Propiedades del contenedor del formulario adaptable  en la barra de acciones. Se abre el cuadro de diálogo Editar formularios adaptables: incrustados (v2).
  4. Busque y seleccione el formulario adaptable para incrustarlo en la Ruta de recursos.
  5. Guarde la configuración. El formulario adaptable ahora está incrustado en el Fragmento de experiencia.

A continuación, puede establecer la acción de envío y propiedades avanzadas de un formulario adaptable incrustado mediante el asistente para la creación de formularios.

Conversión de un formulario en una página de AEM Sites a un fragmento de experiencia convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

Puede convertir un formulario adaptable existente en un editor de páginas de Sites a un Fragmento de experiencia para reutilizar el formulario en varias páginas o sitios.

Para convertir un formulario adaptable en una página de AEM Sites en un Fragmento de experiencia:

  1. Abra la página de AEM Sites que contiene el formulario adaptable (en el componente Contenedor de formularios adaptables) en el modo Editar.

  2. Abra el árbol de contenido y seleccione el Contenedor de formularios adaptables que aloja su formulario adaptable. Una página de AEM Sites puede alojar varios formularios adaptables. Por lo tanto, seleccione cuidadosamente el contenedor de formularios adaptables correcto.

  3. En la barra de menús, seleccione el Icono Convertir para la variación del fragmento de experiencia Icono Convertir en variación de Fragmento de experiencia.

    Haga clic en el logotipo del archivador para convertir un formulario adaptable de la página de AEM Sites en un fragmento de experiencia

    Aparece un cuadro de diálogo para convertir el contenedor del formulario adaptable a un nuevo fragmento de experiencia o agregar a un fragmento de experiencia existente.

  4. En el cuadro de diálogo de variación Convertir en Fragmento de experiencia, establezca los valores de las siguientes opciones:

    • Acción: seleccione crear un Fragmento de experiencia o añadir a un Fragmento de experiencia existente.
    • Ruta principal: especifique la ruta de la carpeta en la que se alojará el Fragmento de experiencia. La opción solo está disponible para crear un nuevo Fragmento de experiencia.
    • Plantilla: especifique la ruta de la plantilla del Fragmento de experiencia. Si no tiene una plantilla de fragmento de experiencia, créela. La opción solo está disponible para agregar formularios adaptables a un Fragmento de experiencia existente.
    • Título del fragmento: Especifique el título del Fragmento de experiencia. El título identifica de forma exclusiva un Fragmento de experiencia.
    • Etiquetas del fragmento: especifique la etiqueta del Fragmento de experiencia. La etiqueta identifica de forma exclusiva la categoría de un Fragmento de experiencia.

Configurar las propiedades de incrustación del Formulario adaptable (v2)

Puede personalizar la configuración avanzada del componente Formulario adaptable: incrustados (v2). En el cuadro de diálogo Editar formularios adaptables: incrustados, puede especificar lo siguiente:

  • Ruta del recurso: examine y seleccione el formulario adaptable que desea incrustar. Se rellena automáticamente si ha colocado el formulario desde el Explorador de recursos.

  • Después del envío: seleccione la acción que debe activarse después del envío del formulario. Puede elegir mostrar un mensaje o una página de agradecimiento.

    • Mostrar mensaje de agradecimiento: escriba un mensaje usando el editor de texto enriquecido para mostrar en el envío del formulario. Esta opción solo está disponible cuando elige mostrar un mensaje de agradecimiento.
    • Página de agradecimiento: examine y seleccione la página que desea mostrar después al enviar el formulario. Esta opción solo está disponible cuando elige mostrar una página de agradecimiento.
    • Redirigir a la página de agradecimiento: active la opción para reemplazar la página que contiene el formulario adaptable incrustado por una página de agradecimiento. De lo contrario, la página de agradecimiento reemplaza al formulario adaptable en el componente Formularios adaptables: incrustados, sin actualizar la página de Sites subyacente. Esta opción solo está disponible cuando elige mostrar una página de agradecimientos.
    • Mensaje de agradecimientos: confirmación breve o que se muestra en la pantalla después de enviar correctamente un formulario.
    • Página de agradecimiento: examine y seleccione la página que desea mostrar después del envío correcto de un formulario.

  • Usar el idioma de la página: utilice la configuración local de la página de AEM Sites en lugar de la configuración regional del formulario adaptable. Esta opción solo es aplicable al formulario adaptable (Foundation).

  • Definir el enfoque del formulario: seleccione esta opción para establecer el enfoque en el primer campo del formulario adaptable. Esta opción solo es aplicable al formulario adaptable (Foundation).

  • Tema: seleccione un tema que defina el estilo de los componentes del formulario adaptable. El estilo incluye propiedades de apariencia, como el estilo de fuente, el color de fondo, las dimensiones y la alineación. Esta opción solo es aplicable al formulario adaptable (Foundation).

    note note
    NOTE
    Puede usar las opciones Usar idioma de la página, Definir enfoque en formulario y Tema solo para formularios adaptables (Foundation).

  • El formulario abarca toda la anchura del marco:
    un marco en línea (iframe) es un elemento de HTML que carga un formulario adaptable en una página de AEM Sites.

    • Si la casilla de verificación El formulario abarca toda la anchura del marco está seleccionada, significa que ese formulario adaptable ocupa la anchura completa del contenedor en el que se coloca. En este caso, no se utiliza un iframe para procesar el formulario. La presentación y el diseño de un formulario adaptable se ajustan para abarcar toda la anchura del contenedor, lo que lo hace adaptable y capaz de ajustarse a diferentes tamaños de pantalla. Esta opción permite incrustar varios Formularios adaptables en una página de AEM Sites.

      note note
      NOTE
      Para incrustar varios formularios en una página de AEM Sites, seleccione la casilla de verificación El formulario abarca toda la anchura del marco.

    • Si la casilla de verificación El formulario abarca toda la anchura del marco no está seleccionada, ese formulario adaptable no cubre toda la anchura del contenedor. En su lugar, se utiliza un iframe para procesar el formulario, que no se puede extender más allá de una anchura específica. Este método es útil cuando el formulario adaptable tiene límites definidos y necesita coexistir con otros componentes de AEM que se encuentran junto a él dentro del contenedor. Si esta opción no está seleccionada, solo permite incrustar un Formulario adaptable en la página de AEM Sites sin un iframe.

      note note
      NOTE
      La página de AEM Sites solo admite que exista un formulario adaptable sin un iframe. Para agregar más Formularios adaptables con el componente Formularios adaptables: incrustados, seleccione la opción El formulario abarca toda la anchura del marco.

  • Altura: especifique la altura del contenedor. Déjelo en blanco para cambiar automáticamente el tamaño del contenedor.

  • Biblioteca de cliente CSS: especifique la ruta a una biblioteca de cliente CSS.

Publicación de un formulario adaptable incrustado publishing-embedded-adaptive-form

Consideremos los siguientes escenarios a la hora de publicar un formulario adaptable incrustado en una página de AEM Sites:

  • Si publica la página de AEM Sites por primera vez y esta incluye un formulario adaptable incrustado, publique la página de Sites y el recurso incrustado.
  • Si ha modificado únicamente el formulario adaptable incrustado en una página de Sites ya publicada, publique el recurso original, y los cambios se reflejarán en la página de Sites publicada. La página de Sites publicada incluye una referencia al recurso y no requiere que vuelva a publicar la página.
  • Si ha modificado la página de Sites y el formulario adaptable integrado, vuelva a publicar la página y el recurso incrustado.

Modificación de un formulario adaptable incrustado modifying-embedded-adaptive-form

Para modificar cualquier configuración o propiedad del formulario adaptable incrustado, realice una de las siguientes acciones.

  • Abra el formulario original en Formularios adaptables en los respectivos editores y modifíquelo.
  • Seleccione el formulario adaptable desde la página de Sites en el modo Edición y, a continuación, seleccione Editar en una nueva ventana. El formulario original se abrirá en el modo de edición, donde puede modificarlo.
NOTE
Los cambios realizados en el formulario adaptable original se reflejarán automáticamente en el formulario incrustado. No obstante, vuelva a publicar el formulario adaptable o la página de Sites para reflejar los cambios en la página publicada.

Prácticas recomendadas best-practices

Tenga en cuenta los siguientes puntos al incrustar formularios adaptables en páginas de AEM Sites:

  • El encabezado y el pie de página del formulario original no se incluyen en el formulario incrustado.
  • Los borradores de los usuarios y los envíos de formularios incrustados son compatibles y visibles en las pestañas Borradores y Formularios enviados del portal de Formularios.
  • La acción de envío configurada en el formulario original se mantiene en el formulario incrustado.
  • Si Adobe Analytics está configurado para el formulario original, los datos de análisis del formulario incrustado se capturan en esta aplicación. Sin embargo, no está disponible en el informe de análisis de Forms.

Consulte también see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab