DocumentaciónFormularios adaptables sin encabezado de AEM

Genere formularios atractivos utilizando componentes principales y formularios adaptables sin encabezado en AEM Forms as a Cloud Service build-engaging-forms-using-core-components-and-headless

Last update: Wed Jul 30 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Desarrollador

Información general sobre el laboratorio lab-overview

En este laboratorio práctico, aprenderá lo siguiente:

Cómo utilizar AEM Forms para crear formularios adaptables fácilmente con los componentes principales más recientes. Estos componentes son coherentes con AEM Sites y permiten experiencias de captura de datos omnicanal al enviar los formularios adaptables como formularios sin encabezado a la web, el móvil y el chat. También aprenderá las prácticas recomendadas sobre el estilo, las personalizaciones y el desarrollo front-end.

Puntos clave key-takeaways

  • Agilidad del negocio: como usuario empresarial, puedo crear fácilmente experiencias de formularios para varios canales.

  • Capacidad de desarrollador front-end: como desarrollador front-end, puedo controlar la experiencia del usuario final mediante formularios sin encabezado.

  • Velocidad de desarrollo: como desarrollador, puedo personalizar fácilmente y de forma coherente los componentes de Sites y Forms.

Requisitos previos prerequisites

Para usar este laboratorio práctico:

Lección 1 lesson-1

Objetivo lesson-1-objectives

Familiarícese con el entorno de AEM Forms as a Cloud Service.

Contexto de la lección lesson-1-context

En esta lección, puede familiarizarse con el entorno de AEM Forms as a Cloud Service navegando por la interfaz de usuario.

Ejercicio lesson-1-excercise

  1. Abra el explorador e introduzca la dirección URL del entorno de creación de Cloud Service.

  2. Inicie sesión en el entorno de creación de Cloud Service.
    {width="50%"}

  3. Para ir hasta la interfaz de usuario de AEM Forms, haga clic en Formularios > Formularios y documentos.

    {width="50%"}

    Descarte cualquier elemento emergente relacionado con las preferencias o la información. Se muestran todos los formularios disponibles.

Lección 2

Objetivo

Cree un formulario adaptable utilizando los componentes principales más recientes, configúrelo y envíelo.

Contexto de la lección

En esta lección, como usuario empresarial, creará un formulario adaptable para varios canales como web, móvil y chat mediante la creación de formularios adaptables con componentes principales listos para usarse estandarizados para la captura de datos.

Ejercicio

  1. Cree un punto final de envío para el formulario:

    1. Abra https://pipedream.com/requestbin en una nueva pestaña del explorador.

    2. Haga clic en Crear un grupo público y copie la dirección URL del punto final.
      {width="50%"}

      {width="50%"}

  2. Cree un formulario adaptable mediante la interfaz del asistente:

    1. En la pestaña del explorador utilizada en la Lección 1, vaya a la interfaz web de AEM Forms as Cloud Service y a Formularios y documentos.

    2. Haga clic en Crear > Formulario adaptable.

    3. Seleccione la plantilla En blanco con componentes principales de la pantalla de selección de plantillas como se muestra a continuación:

    4. Haga clic en la pestaña Estilo y seleccione wknd-theme como se muestra a continuación:

    5. Haga clic en la pestaña Envío y seleccione la tarjeta Enviar al punto final de REST y especifique el grupo público en el campo URL de la petición POST como se muestra a continuación:

    6. Haga clic en Crear. Especifique un nombre y título en el formulario. Por ejemplo, registro. Haga clic en Crear.

    7. Se abre el editor de formularios adaptables. Descarte cualquier ventana emergente o diálogo para obtener preferencias o información. Haga clic en el explorador de componentes en el carril izquierdo y añada los componentes Encabezado y Pie de página, respectivamente, en la parte superior e inferior del formulario en blanco.

    8. Arrastre y suelte los componentes desde el explorador de componentes para crear un formulario, de forma similar a lo siguiente:

      {width="50%"}

  3. Añada validaciones al formulario:

    1. Haga clic en el componente Número de teléfono para que se muestre el menú emergente. Haga clic en el componente icono de llave inglesa en el menú para configurar el campo.

    2. Abra la pestaña Validaciones, marque el campo Requerido y haga clic en Listo. Se muestra el mensaje de éxito.
      {width="50%"}

      {width="50%"}

  4. Previsualice y envíe el formulario.

    1. Haga clic en Vista previa para obtener una vista previa del formulario desde la perspectiva de usuario final.

    2. Rellene el formulario con datos ficticios.

    3. Enviar el formulario.

    4. En la pestaña Grupo de solicitudes, compruebe los datos enviados.

  5. Añada interactividad al formulario con reglas:

    1. Haga clic en el componente Marque la casilla para recibir un 5 % de descuento. En la barra de herramientas de opciones, haga clic en el icono Reglas. Se abre la opción Editor de reglas.

    2. Cree una regla: cuando la opción Marque la casilla para recibir un 5 % de descuento está seleccionada, las opciones para aplicar tarjeta de crédito están desactivadas.

  6. Publicar el formulario.

    1. Abra la interfaz de administración de AEM Forms, por ejemplo, https://author-p105303-e986623.adobeaemcloud.com/ui%23/aem/aem/forms.html/content/dam/formsanddocuments y seleccione el formulario.

    2. Haga clic en Publicar.

      Se muestra el mensaje de éxito.

      La URL publicada del formulario es similar a https://publish-p105303-e986623.adobeaemcloud.com/content/forms/af/registration.html.

    3. Para ver el formulario publicado, reemplace el ID de programa (pXXXXXX) y el ID de entorno (eXXXXXX) en la URL anterior por los ID de su
      entorno.

Lección 3

Objetivo

Actualice los estilos utilizando las prácticas recomendadas de desarrollo front-end.

Contexto de la lección

En esta lección, como desarrollador front-end, aprenderá a actualizar fácilmente el estilo del formulario adaptable creado anteriormente.

Ejercicio

Configure un repositorio local del tema:

  1. Abra el símbolo del sistema o shell con derechos de administrador:

    {width="50%"}

  2. En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git

    code language-shell 
    cd c:\git

  3. Use el siguiente comando para clonar el código front-end del tema:

    code language-shell 
    git clone -b WKND https://github.com/adobe/aem-forms-theme-canvas

  4. Use el siguiente comando en el orden de la lista para ir al directorio aem-forms-theme-canvas y abra Visual Studio Code.

    code language-shell 
    cd aem-forms-theme-canvas
code .

  5. Seleccione Confiar en los autores de todos los archivos de la carpeta principal y haga clic en Sí, confío en los autores.

    {width="50%"}

  6. Para procesar el formulario alojado en el entorno de publicación de su servicio en la nube, cambie el nombre del archivo env_template. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione la opción Cambiar nombre.

    {width="50%"}

    {width="50%"}

  7. Establezca los siguientes valores para las variables del archivo .env y guarde el archivo:

    • AEM_URL: especifique el entorno de publicación de su servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com/.

    • AEM_ADAPTIVE_FORM: especifique la ruta del formulario. Por ejemplo, si la ruta del formulario es /content/forms/af/registration, el valor de esta variable sería registration.

      {width="50%"}

  8. Cree un usuario local en el entorno de AEM.

    note note
    NOTE
    Para crear un usuario local, vaya a AEM Home > Tools > Security > Users.
    Asegúrese de que el usuario sea miembro del grupo de usuarios de formularios.

  9. En la ventana de símbolo del sistema, ejecute el siguiente comando:

    code language-shell 
    npm install

    note note
    NOTE
    • Si recibe un mensaje pidiendo que actualice npm a través del comando npm notice Run npm nstall -g npm@9.6.0, ignore el mensaje.
    • A menos que se le indique en el libro, no ejecute otros comandos npm.

  10. Ahora, ejecute el siguiente comando para obtener una vista previa del formulario.

    code language-shell 
    npm run live

    Una vez ejecutado el comando anterior, espere al mensaje de webpack compiled y se le redirigirá a una página de inicio de sesión de AEM.

  11. Haga clic en Iniciar sesión localmente (solo para tareas de administración) en la página de inicio de sesión de AEM.

  12. Introduzca las credenciales del usuario local creado y el formulario se mostrará en una pestaña del explorador.

    note note
    NOTE
    Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm run live durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador por 127.0.0.1 y pulse Entrar.

    {width="50%"}

  13. En Visual Studio Code, abra el archivo PROJECT\src\site\_variables.scss. Observe que el color de $error es un tono de rojo.

    {width="50%"}

  14. En el explorador, envíe el formulario para ver el color rojo en el campo Nombre.

  15. Configure el color del $error en #5736eb, y guarde el archivo.

    {width="50%"}

  16. Actualice el explorador y envíe el formulario. Observe que el color del error en el campo de nombre ha cambiado como corresponde.

  17. En el símbolo del sistema, pulse CTRL+C, escriba Y y pulse la tecla Entrar para terminar el proceso de npm. Es importante detener el servidor npm para que no entre en conflicto con el siguiente conjunto de ejercicios.

  18. Cierre las ventanas de Visual Studio Code y del símbolo del sistema.

Lección 4

Objetivo

Procese el formulario en web/móvil y otras interfaces como un formulario sin encabezado.

Contexto de la lección

En esta lección, como desarrollador de front-end, aprenderá a procesar el formulario adaptable creado anteriormente como un formulario sin encabezado mediante el marco de trabajo de diseño de React Spectrum.

Ejercicio

Configure un repositorio local mediante el proyecto de inicio de React:

  1. Abra el símbolo del sistema con derechos de administrador.

    {width="50%"}

  2. En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git

    code language-shell 
    cd c:\git

  3. Utilice el siguiente comando para clonar el proyecto de inicio de React del formulario adaptable:

    code language-shell 
    git clone https://github.com/adobe/react-starter-kit-aem-headless-forms

  4. Utilice los siguientes comandos en el orden de la lista para ir al directorio react-starter-kit-aem-headless-forms y abra Visual Studio Code.

    code language-shell 
    cd react-starter-kit-aem-headless-forms

code .

    Se abre la ventana de Visual Studio Code.

    {width="50%"}

Para procesar el formulario alojado en el entorno de publicación de su servicio en la nube, haga lo siguiente:

  1. Cambie el nombre del archivo env_template por el del archivo .env. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione la opción Cambiar nombre.

    {width="50%"}

  2. Establezca los siguientes valores para las variables del archivo .env. Después de actualizar las variables, guarde el archivo.

    • AEM_URL: especifique la URL del entorno de publicación del servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com.

    • AEM_FORM_PATH: especifique la ruta del formulario adaptable creado en la lección anterior. Por ejemplo, /content/forms/af/registration/

  3. Abra la ventana de comandos, asegúrese de que está en el directorio react-starter-kit-aem-headless-forms y ejecute el siguiente comando:

    code language-shell 
    npm install

  4. En la ventana de símbolo del sistema, ejecute el siguiente comando:

    code language-shell 
    npm start

    El comando anterior inicia el servidor de desarrollo local que procesaría la definición del formulario recuperada de AEM de una forma sin encabezado utilizando la biblioteca de front-end de React Spectrum.

    note note
    NOTE
    Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm start durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador por 127.0.0.1 y pulse Entrar.

Comprobemos la ejecución de las reglas en este formulario sin encabezado:

  1. Seleccione la opción Marque la casilla para recibir un 5 % de descuento. La opción posterior para solicitar una tarjeta de crédito está desactivada.

  2. Desactive Marque la casilla para recibir un 5 % de descuento para habilitar la opción de tarjeta de crédito.

Haga cambios en el formulario del servidor como usuario empresarial y vea los cambios reflejados automáticamente en el formulario sin encabezado.

  1. Abra la interfaz de administración de AEM Forms en el explorador.

  2. Seleccione el formulario contactus y haga clic en Editar. Abre el formulario en el editor de formularios adaptables.

  3. Seleccione el campo Número de teléfono y haga clic en el icono Editar (icono de lápiz) en la barra de herramientas. Si no puede ver la barra de herramientas emergente, cambie al modo Editar. Haga clic en el botón Editar en la parte superior derecha, a la izquierda del botón Vista previa.

  4. Cambie la etiqueta a Número de móvil. Haga clic en cualquier espacio vacío del formulario y se guardarán los cambios realizados en él.

Vamos a publicar el formulario actualizado para propagar los cambios al entorno publicado.

  1. En la pestaña de la interfaz de administración de AEM Forms, seleccione el formulario de registro y haga clic en Cancelar la publicación. Si no ve el botón Cancelar la publicación, vaya al paso 3 para publicar los cambios directamente.

  2. Haga clic en Cancelar la publicación. Haga clic en Cerrar en el cuadro de diálogo correspondiente.

  3. Después de actualizar el explorador, seleccione el formulario de registro y haga clic en Publicar.

  4. Haga clic en Publicar. Haga clic en Cerrar en el cuadro de diálogo correspondiente.

  5. Actualice la pestaña del explorador con el formulario sin encabezado mostrado. Tenga en cuenta que la etiqueta Número de teléfono ha cambiado a Número de móvil.

  6. Abra la ventana del símbolo del sistema que se utiliza para iniciar el proyecto react-starter-kit-aem-headless-forms, pulse CTRL+C y, a continuación, introduzca Y y pulse la tecla Intro para terminar el proceso de npm. Es importante detener el servidor npm para que no entre en conflicto con el siguiente conjunto de ejercicios.

  7. Cierre las ventanas de Visual Studio Code y del símbolo del sistema.

Lección 5

Objetivo

Procesar el formulario como un formulario sin encabezado utilizando la IU de Google Material

Contexto de la lección

En esta lección, como desarrollador de front-end, aprenderá a procesar el formulario adaptable creado anteriormente como formulario sin encabezado mediante la IU de Google Material.

Ejercicio

Configure un repositorio local con el proyecto de inicio de la interfaz de usuario de Material:

  1. Abra el símbolo del sistema con derechos de administrador.

    {width="50%"}

  2. En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git:

    code language-shell 
    cd c:\git

  3. Ejecute los siguientes comandos en el orden indicado para crear una carpeta denominada mui y vaya a la carpeta mui utilizando los siguientes comandos:

    code language-shell 
    mkdir mui

cd mui

  4. Utilice el siguiente comando para clonar el proyecto de inicio de React del formulario adaptable:

    code language-shell 
    git clone -b mui-lab https://github.com/adobe/react-starter-kit-aem-headless-forms

  5. Utilice el siguiente comando en el orden de la lista para ir a la carpeta react-starter-kit-aem-headless-forms y abra el código en Visual Studio Code:

    code language-shell 
    cd react-starter-kit-aem-headless-forms

code .

Para procesar el formulario alojado en el entorno de publicación de su servicio en la nube, haga lo siguiente:

  1. Cambie el nombre del archivo env_template por el del archivo .env. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione Cambiar nombre.

    {width="50%"}

  2. Establezca los siguientes valores para las variables del archivo .env. Después de actualizar las variables, guarde el archivo. Utilice la combinación de teclas CTRL + S para guardar el archivo.

    • AEM_URL: especifique la URL del entorno de publicación del servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com

    • AEM_FORM_PATH: especifique la ruta del formulario adaptable creado en la lección anterior. Por ejemplo, /content/forms/af/registration/

  3. Abra la ventana de comandos, asegúrese de que está en el directorio react-starter-kit-aem-headless-forms y ejecute el siguiente comando:

    code language-shell 
    npm install

  4. En la ventana de símbolo del sistema, ejecute el siguiente comando:

    code language-shell 
    npm start

    El comando inicia un servidor de desarrollo local y procesa la definición de formulario recuperada de AEM en una forma sin encabezado mediante la biblioteca de front-end de la IU de Google Material.

    note note
    NOTE
    Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm start durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador por 127.0.0.1 y pulse Entrar.

  5. Para evaluar la ejecución de la misma lógica empresarial en esta representación de formulario:

    Seleccione Marque la casilla para recibir un 5 % de descuento. La opción siguiente ¿Desea solicitar el formulario para la We.Financetarjeta de crédito corporativa? se deshabilita.

    {width="50%"}

Lección 6

Objetivo

Crear una apariencia alternativa del formulario sin encabezado mediante las variaciones de los componentes de la IU de Material

Contexto de la lección

En esta lección, como desarrollador front-end, aprenderá a crear una representación alternativa de diferentes componentes. La interfaz de usuario de Material se utiliza para el formulario adaptable creado anteriormente por el usuario empresarial.

Ejercicio

Actualice la variación de los componentes en el proyecto sin encabezado. Cambiar la variante del componente de entrada de texto de la IU de material a OutlinedInput:

  1. En Visual Code, vaya al componente de entrada de texto abriendo el archivo index.tsx en src/components/textinput/index.tsx.

  2. Agregue // al principio de la línea de código 103. Convierte la línea en un comentario.

    code language-shell 
    //const Cmp = \'outlined\' === appliedCssClassNames ? OutlinedInput: Input;

  3. Añada lo siguiente en la línea 104 para utilizar una variante diferente del componente y guarde el archivo. Utilice la combinación de teclas CTRL + S para guardar el archivo.

    code language-shell 
    const Cmp = OutlinedInput;

    Es esencial utilizar correctamente las mayúsculas y minúsculas para la variante “OutinedInput”, de lo contrario la compilación fallará. La compilación del entorno de desarrollo local comienza automáticamente con el símbolo del sistema. Espere hasta que vea el siguiente mensaje

    webpack 5.75.0 compiled with 3 warnings in 6659 ms
    inside proxy req
    setting new origin header

  4. Actualice el explorador, si no se actualiza automáticamente, para ver si el componente de entrada de texto utiliza una variante diferente.

    Este cambio se produce para los usuarios finales sin ningún cambio en la definición del formulario en el servidor de AEM Forms y es específico del canal sin encabezado
    en cuestión. Por ejemplo, un canal web en este laboratorio.

    {width="50%"}

  5. Cierre las ventanas de Visual Studio Code y del símbolo del sistema.

Preguntas frecuentes (FAQ)

¿El asistente de formularios adaptables está disponible públicamente?
Sí, está disponible con AEM Forms as a Cloud Service.
¿Los componentes principales están disponibles públicamente?
Sí, los componentes principales de Formularios adaptables están disponibles con AEM Forms como Cloud Service.
¿Los formularios sin encabezado están disponibles públicamente?
Sí, los formularios sin encabezado están disponibles con AEM Forms como Cloud Service.
¿Los formularios sin encabezado requieren una licencia independiente?
No, los formularios sin encabezado utilizan la misma métrica de valor de licencia y el mismo número de envíos de formularios.
¿Los componentes principales y los formularios sin encabezado están disponibles con AEM 6.5 Forms?
Sí, tanto los componentes principales de los formularios adaptables como los formularios sin encabezado están disponibles con el Service Pack 16 y posteriores de AEM Forms 6.5.

Pasos siguientes

Ahora ya ha aprendido a crear formularios adaptables y distribuirlos en varios canales con formularios sin encabezado. Utilice esas habilidades para crear experiencias de captura de datos escalables y de alta calidad independientemente de dónde se encuentren los usuarios.

Recursos

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba