Creación y publicación de formularios adaptables con Edge Delivery Services
Este documento proporciona instrucciones paso a paso para crear, configurar y publicar formularios 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:
- Crear formularios con plantillas de Edge Delivery Services
- Crear formularios mediante 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:
- Nuevo proyecto: cree un nuevo proyecto de AEM con el bloque de formularios adaptable. El repositorio está preconfigurado para Edge Delivery Services.
- Proyecto existente: añada un bloque de formularios adaptables a un repositorio existente y actualice la configuración.
-
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.
-
Confirmar que el repositorio de GitHub contenga el bloque de formularios adaptables.
Flujo de trabajo de la creación y publicación de formularios
El proceso consta de tres fases principales:
- Fase 1: Creación de formularios
- Fase 2: Creación y diseño de formularios
- Fase 3: Configuración y publicación
Cada fase incluye pasos de validación para confirmar la configuración correcta.
Paso 1: Creación de formularios
-
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.
-
Seleccionar plantilla
-
En la pestaña Fuente, seleccione una plantilla basada en Edge Delivery Services.
-
El botón Crear se habilita.
-
-
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.
-
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).
-
-
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.
-
Resultado: el formulario está listo para la creación en el editor universal.
Paso 2: Creación y diseño de formularios
-
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.
-
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.
-
Diseñar el formulario
- Configure las propiedades de campo en el panel Propiedades.
- Establezca reglas y comportamientos de validación.
- Ajuste el estilo y el diseño según sea necesario.
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
- Configure acciones de envío para la administración de datos.
- Guía del editor universal para funciones avanzadas.
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.
Publicar el formulario
-
En el editor universal, haga clic en el botón Publicar (esquina superior derecha).
-
Confirme la publicación correcta en el cuadro de diálogo.
-
Tenga en cuenta las direcciones URL generadas para las versiones ensayadas y activas.
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.
Desglose de estructura de URL de formularios Edge Delivery Services
Ejemplos visuales
Plantilla de Edge Delivery Services:
- Ensayo:
- Activo:
Resolución de problemas
A continuación, se muestran problemas comunes y soluciones para AEM Forms con Edge Delivery Services.
Problema: la dirección URL del formulario devuelve 404 o una página en blanco.
Resolución:
- Quitar la extensión
.htmlde 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).
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.yamlpara obtener los detalles correctos de GitHub.
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.
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.
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.
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.
Si los problemas persisten:
- Compruebe el estado del servicio de Adobe Experience Cloud.
- Revise la documentación de Edge Delivery Services.
- Visite la Comunidad de Adobe Experience League.
- 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:
- Configure acciones de envío: configure la administración de datos y las integraciones.
- Modelos de datos de formulario: conecte formularios a orígenes de datos back-end.
- Prácticas recomendadas de Edge Delivery Services: maximice el rendimiento.
- Form Analytics: efectúe el seguimiento del rendimiento del formulario y del comportamiento del usuario.