Crear y publicar formularios adaptables con Edge Delivery Services

Este documento proporciona instrucciones paso a paso para crear, configurar y publicar Forms adaptable con plantillas de Edge Delivery Services en AEM. Abarca todo el flujo de trabajo, desde la creación del formulario a la implementación de producción.

Al final de la guía, aprenderá a hacer lo siguiente:

  • Creación de formularios con plantillas de Edge Delivery Services
  • Crear formularios con el Editor universal
  • Configurar y publicar de formularios en Edge Delivery Services
  • Acceder a los formularios publicados y verificar la implementación

Requisitos previos

Asegúrese de que se cumplen los siguientes requisitos previos para continuar:

  • Formularios de AEM as a Cloud Service: instancia de autor activa con licencia de Forms.

  • Cuenta de GitHub: cuenta personal u organizativa para la administración de repositorios.

  • Configuración del repositorio: elija una de las siguientes opciones:

  • Conexión entre AEM y GitHub: establezca una conexión entre su instancia de AEM y el repositorio de GitHub.

  • Edge Delivery Services: asegúrese de que el repositorio esté configurado para la implementación automática.

  • Permisos: compruebe que dispone de los derechos de acceso necesarios para la creación y publicación de formularios.

  • Confirme que el repositorio de GitHub contiene el bloque de formularios adaptables.

Flujo de trabajo de la creación y publicación de formularios

El proceso consta de tres fases principales:

Cada fase incluye pasos de validación para confirmar la configuración correcta.

Paso 1: Creación de formularios

  1. Acceder a la creación de formularios

    • Inicie sesión en su instancia de autor de AEM Forms as a Cloud Service.
    • Vaya a Adobe Experience Manager > Formularios > Formularios y documentos.
    • Haga clic en Crear > Formularios adaptables.
  2. Seleccionar plantilla

    • En la pestaña Fuente, seleccione una plantilla basada en Edge Delivery Services.

    • El botón Crear se habilita.

      Creación de formularios EDS

  3. Configurar opciones (opcional)

    • Pestaña Fuente de datos: seleccione la integración de datos si es necesario.
    • Pestaña Envío: elija una acción de envío (se puede configurar más adelante).
    • Pestaña Entrega: establezca la programación de publicación/cancelación de publicación.
  4. Completar la configuración del formulario

    • Haga clic en Crear para abrir el Asistente para crear formulario.

    • Escriba lo siguiente:

      • Nombre: identificador interno (sin espacios, use guiones).
      • Título: nombre para mostrar del formulario.
      • URL de GitHub: URL del repositorio (por ejemplo, https://github.com/your-org/your-repo).

    Asistente para crear formulario

  5. Validación

    • Después de hacer clic en Crear, verifique lo siguiente:

      • El formulario se abre en el editor universal.
      • La URL de GitHub está vinculada correctamente.
      • La paleta de componentes está disponible.
      • El lienzo del formulario es visible.

    Interfaz del editor universal

Resultado: el formulario está listo para la creación en el editor universal.

Paso 2: Creación y diseño de formularios

  1. Acceder a la biblioteca de componentes

    • Abra el explorador de contenido en el editor universal.
    • Vaya al componente Formulario adaptable en el árbol de contenido.

    Navegación del árbol de contenido

  2. Añadir campos de formulario

    • Haga clic en el icono Añadir para abrir la biblioteca de componentes.
    • Seleccione los componentes en la lista Componentes de formularios adaptables.
    • Arrastre y suelte los componentes en el lienzo del formulario.

    Añadir componentes

  3. Diseñar el formulario

    • Configure las propiedades de campo en el panel Propiedades.
    • Establecer reglas y comportamientos de validación.
    • Ajuste el estilo y el diseño según sea necesario.

    Formulario de registro completado

Validación

  • Todos los campos obligatorios están presentes.
  • Las propiedades del campo están configuradas correctamente.
  • El diseño es adaptable y accesible.
  • Las reglas de validación funcionan según lo esperado.

Próximos pasos

Paso 3: Configuración y publicación

Configure Edge Delivery Services y publique el formulario.

Configuración: automática (no se requiere configuración manual).

  • La conexión al repositorio de GitHub y la configuración de Edge Delivery Services se crean durante la creación del formulario.
  • Los puntos finales de publicación se configuran automáticamente.

Verificación:

  • Confirme que la configuración aparece en la configuración del formulario.
  • Asegúrese de que la dirección URL de GitHub esté vinculada correctamente.

Configuración automática de EDS

Publicar el formulario

  1. En el editor universal, haga clic en el botón Publicar (esquina superior derecha).

  2. Confirme la publicación correcta en el cuadro de diálogo.

  3. Tenga en cuenta las direcciones URL generadas para las versiones ensayadas y activas.

    Publicar con el editor universal

URL de formulario

Los formularios publicados son accesibles a través de las direcciones URL de Edge Delivery Services.

Estructura de URL

  • Ensayo (vista previa/prueba):

    code language-none
    https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>
    
  • Activo (producción):

    code language-none
    https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>
    

Parámetros de URL

  • <branch>: nombre de rama de GitHub (por ejemplo, main, develop)
  • <repo>: nombre del repositorio de GitHub (por ejemplo, my-forms-project)
  • <owner>: organización de GitHub o nombre de usuario (por ejemplo, company-name)
  • <form_name>: identificador de formulario tal como se define en AEM (por ejemplo, contact-us)

Ejemplo

Ejemplo del formulario contact-us en el repositorio forms-project de la organización acme-corp:

  • Ensayo: https://main--forms-project--acme-corp.aem.page/content/forms/af/contact-us
  • Activo: https://main--forms-project--acme-corp.aem.live/content/forms/af/contact-us

Diferencias de entorno

  • Ensayo (.page): cambios más recientes para realizar pruebas.
  • Activo (.live): contenido publicado para producción.

Estructura URL
Desglose de estructura de URL de formularios Edge Delivery Services

Ejemplos visuales

Plantilla de Edge Delivery Services:

  • Ensayo: versión de ensayo de formulario de registro
  • Activo: versión activa de formulario de registro

Resolución de problemas

A continuación, se muestran problemas comunes y soluciones para AEM Forms con Edge Delivery Services.

Formulario no cargado

Problema: la dirección URL del formulario devuelve 404 o una página en blanco.

Resolución:

  • Quitar la extensión .html de las direcciones URL.
  • Compruebe que el formulario esté publicado.
  • Compruebe el repositorio de GitHub del bloque de formularios adaptables.
  • Asegúrese de que el nombre del formulario coincida con la dirección URL (con distinción entre mayúsculas y minúsculas).
Problemas de configuración

Problema: la configuración de Edge Delivery Services no funciona.

Resolución:

  • Asegúrese de que la dirección URL de GitHub esté en formato https://github.com/owner/repository.
  • Utilice el nombre de rama correcto en la configuración.
  • Compruebe el acceso al repositorio (público o autenticado).
  • Consulte fstab.yaml para obtener los detalles correctos de GitHub.
Problemas de publicación

Problema: los cambios no aparecen en el sitio activo.

Resolución:

  • Espere de 2 a 3 minutos para actualizar la caché de la CDN.
  • Confirme que el flujo de trabajo de publicación se ha completado.
  • Pruebe primero en el entorno de ensayo (.page).
  • Asegúrese de que el repositorio de GitHub esté actualizado.
Problemas del editor universal

Problema: no se puede editar el formulario o los componentes no cargan.

Resolución:

  • Utilice un navegador compatible (Chrome, Firefox, Safari).
  • Borre la caché y las cookies del explorador.
  • Compruebe la conectividad de red.
  • Confirme los permisos de autor.
Errores de envío de formularios

Problema: los envíos de formularios no funcionan.

Resolución:

  • Configure la acción de envío en las propiedades del formulario.
  • Pruebe los extremos de envío manualmente.
  • Compruebe la configuración de CORS en caso de incrustar formularios.
  • Compruebe que los campos obligatorios están configurados.
Problemas de rendimiento

Problema: carga lenta del formulario o rendimiento deficiente.

Resolución:

  • Optimizar imágenes.
  • Elimine los componentes innecesarios.
  • Use la CDN de Edge Delivery Services.
  • Minimice el uso de JavaScript/CSS personalizado.
Obtención de ayuda

Si los problemas persisten:

  1. Compruebe el estado del servicio de Adobe Experience Cloud.
  2. Revise la documentación de Edge Delivery Services.
  3. Visite la Comunidad de Adobe Experience League.
  4. Contacte con el Servicio de atención al cliente de Adobe.

Próximos pasos

Después de completar la creación y publicación del formulario, tenga en cuenta lo siguiente:

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