Tutorial: Crear un formulario adaptable

02-create-adaptive-form-main-image

Este tutorial es un paso en la serie Crear su primer formulario adaptable. Se recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar el caso de uso completo del tutorial.

Acerca del tutorial

Los formularios adaptables son formularios de nueva generación dinámicos y adaptables. Puede utilizar formularios adaptables para ofrecer experiencias personalizadas. También puede integrar formularios adaptables con Adobe Analytics para estadísticas de uso y Adobe Campaign para gestión de la campaña. Para obtener más información sobre las capacidades de los formularios adaptables, consulte Introducción a la creación de formularios adaptables.

Es más fácil crear y administrar formularios cuando se sigue un proceso adecuado. En este artículo, aprenderá a:

Al final del artículo tendrá un formulario similar al siguiente:

Paso 1: Crear el formulario adaptable

  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Forms > Forms & Documentos. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Toque Crear y seleccione Formulario adaptable. Aparece una opción para seleccionar una plantilla. Toque la plantilla En blanco para seleccionarla y toque Siguiente.

  3. Aparece una opción para Añadir propiedades. Los campos Título y Nombre son obligatorios:

    • Título: especifique Add new or update shipping address en el ​​campo Título. El campo de título especifica el nombre para mostrar del formulario. El título le ayuda a identificar el formulario en la interfaz de usuario AEM Forms.
    • Nombre: especifique shipping-address-add-update-form en el ​​campo Nombre. El campo Nombre especifica el nombre del formulario. En el repositorio se crea un nodo con el nombre especificado. Al escribir un título con inicio, se genera automáticamente el valor del campo de nombre. Puede cambiar el valor sugerido. El campo de nombre solo puede incluir caracteres alfanuméricos, guiones y guiones bajos. Todas las entradas no válidas se reemplazan con un guión.

  4. Toque Crear. Se crea un formulario adaptable y aparece un cuadro de diálogo para abrir el formulario y editarlo. Toque Abrir para abrir el formulario recién creado en una nueva ficha. El formulario se abre para su edición. También muestra la barra lateral para personalizar el formulario recién creado según las necesidades.

    Para obtener información sobre la interfaz de creación de formularios adaptables y los componentes disponibles, consulte Introducción a la creación de formularios adaptables.

    nuevo-formulario adaptable-creado

AEM Forms proporciona muchos componentes para mostrar información en un formulario adaptable. Los componentes Encabezado y Pie de página ayudan a proporcionar un aspecto coherente a un formulario. Un encabezado suele incluir el logotipo de una empresa, el título del formulario y el resumen. Un pie de página suele incluir información de copyright y vínculos a otras páginas.

  1. Toque toggle-side-panel > treeexpandall. Se abre el navegador de componentes. Arrastre el componente Header desde el navegador de componentes al formulario adaptable.

  2. Toque Logotipo. Aparece la barra de herramientas. Toque aem_6_3_edit en la barra de herramientas, escriba We.Retail y toque aem_6_3_forms_save.

  3. Toque Imagen. Aparece la barra de herramientas. Toque cmppr. El navegador de propiedades se abre a la izquierda de la pantalla. ​​Busque y cargue la imagen del logotipo. Toque aem_6_3_forms_save. La imagen aparece en el encabezado.

    Puede tocar Obtener archivo para descargar el logotipo utilizado en este artículo si no tiene uno.

    Obtener archivo

  4. Arrastre el componente Footer desde treeexpandall al formulario adaptable. En este momento, el formulario tiene el siguiente aspecto:

    adaptable-form-with-headers-and-ada-ada

Paso 3: Añadir componentes para capturar y mostrar información

Los componentes son componentes básicos de un formulario adaptable. AEM Forms proporciona muchos componentes para capturar y mostrar información en un formulario adaptable. Puede arrastrar los componentes de treeexpandall a un formulario. Para obtener más información sobre los componentes disponibles y la funcionalidad correspondiente, consulte Introducción a la creación de formularios adaptables.

  1. Arrastre el componente Cuadro numérico al formulario adaptable. Colóquelo antes del componente de pie de página. Abrir propiedades del componente, cambiar Título del componente a Customer ID, cambiar Nombre del elemento a customer_ID, habilitar la opción Campo requerido, habilitar la opción Usar tipo de entrada de número HTML5 y tocar aem_6_3_forms_save.

  2. Arrastre tres componentes de Cuadro de texto al formulario adaptable. Colóquelas antes del componente de pie de página. Defina las siguientes propiedades para estos cuadros de texto.::

    Propiedad Cuadro de texto 1
    		 Cuadro de texto 2
    		 Cuadro de texto 3
    Título Nombre
    		 Dirección de envío Estado
    Nombre de elemento customer_Name
    		 customer_Shipping_Address customer_State
    Campo requerido Activado Activado Activado
    Permitir varias líneas
    		 Deshabilitado Activado Deshabilitado

  3. Arrastre un componente Cuadro numérico antes del componente de pie de página. Abra las propiedades del componente, defina los valores enumerados en la tabla siguiente, Toque aem_6_3_forms_save.

    Propiedad Value
    Título Código postal
    Nombre de elemento customer_ZIPCode
    Número máximo de dígitos 6
    Campo requerido Activado
    Tipo de patrón de visualización Sin patrón

  4. Arrastre un componente Correo electrónico antes del componente de pie de página. Abra las propiedades del componente, defina los valores enumerados en la tabla siguiente y toque aem_6_3_forms_save.

    Propiedad Valor
    Título Correo electrónico
    Nombre de elemento customer_Email
    Campo requerido Activado

  5. Arrastre un componente Archivo adjunto antes del componente de pie de página. Abra las propiedades del componente, defina los valores enumerados en la tabla siguiente y toque aem_6_3_forms_save.

    Propiedad Valor
    Título Prueba de dirección aprobada por el gobierno
    Nombre de elemento customer_Address_Prueba
    Campo requerido Activado

  6. Arrastre un componente Botón de envío al formulario adaptable. Colóquelo antes del componente de pie de página. Abra las propiedades del componente, cambie Nombre del elemento a address_addition_update_submit, toque aem_6_3_forms_save. La presentación del formulario es completa y el formulario tiene el siguiente aspecto:

    adaptable-form-with-all-the-components

Paso 4: Configurar la acción de envío para el formulario adaptable

Una acción de envío se activa cuando un usuario toca el botón Enviar en un formulario adaptable. Puede utilizar una acción de envío para guardar datos de formulario en el repositorio local, enviar datos de formulario a un extremo REST, enviar datos de formulario como correo electrónico, etc. Los formularios adaptables proporcionan algunas acciones de envío integradas más. Para obtener información detallada, consulte Configuración de la acción Enviar.

Mediante los siguientes pasos, puede configurar la acción de envío por correo electrónico y la acción de envío de demostración del formulario:

  1. Configure el servidor de correo electrónico. Para obtener más información, consulte Configuración de notificación de correo electrónico.

  2. Toque Contenedor de formulario en el navegador de contenido y toque cmppr. El navegador de propiedades se abre a la izquierda.

  3. Vaya a Enviar > Enviar acción. Seleccione Enviar correo electrónico. Especifique los siguientes valores y toque aem_6_3_forms_save.

    Propiedad Valor
    De donotreply@weretail.com
    A ${customer_Email}
    Asunto Reconocimiento: Ha agregado la dirección de envío en el sitio web de We.Retail.
    Plantilla de correo electrónico Hola ${customer_Name}, se agrega la siguiente dirección como dirección de envío de su cuenta:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Regards, We.Retail
    Incluir datos adjuntos Activado

    El formulario está listo. Ahora puede realizar la previsualización del formulario y probar la funcionalidad. Si ha utilizado el nombre mencionado en el tutorial y ha accedido al formulario en el equipo que ejecuta AEM Forms servidor, el formulario estará disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Paso 5: Previsualización y envío del formulario adaptable

Puede utilizar la opción Previsualización para evaluar el aspecto y el comportamiento de un formulario. Puede enviar un formulario en modo de previsualización y también comprobar las validaciones aplicadas a un formulario. Por ejemplo, si se muestra un error cuando un campo obligatorio se deja vacío.

Los formularios adaptables también proporcionan una opción para emular la experiencia de un formulario para varios dispositivos. Por ejemplo, iPhone, iPad y Escritorio. Puede utilizar las dos opciones Previsualización y emulador regla de forma conjunta para previsualización de un formulario para dispositivos de diferentes tamaños de pantalla.

  1. Toque la opción Previsualización en la parte derecha del editor de formularios. El formulario se abre en el modo de previsualización. Si ha utilizado el nombre mencionado en el tutorial, la dirección URL de previsualización del formulario es http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Utilice la regla para vista del aspecto del formulario en varios dispositivos.
  3. Rellene los campos del formulario y toque Enviar. El formulario se envía y se le redirige a la página predeterminada Gracias. También puede especificar una página de agradecimiento personalizada. Para obtener más información, consulte Configuración de la página de redireccionamiento.

El formulario adaptable para agregar una dirección está listo. Si ha utilizado el nombre mencionado en el tutorial y ha accedido al formulario en el equipo que ejecuta el servidor de AEM Forms, el formulario estará disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

En esta página