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 orden cronológico para comprender, realizar y mostrar el caso de uso del tutorial completo.

Información sobre el 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 la administración de campañas. Para obtener más información sobre las capacidades de los formularios adaptables, consulte Introducción a la creación de formularios adaptables.

Cuando se sigue un proceso adecuado, es más fácil crear y administrar formularios. En este artículo, aprenderá lo siguiente:

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 autor de AEM y navegue hasta Adobe Experience Manager > Formularios > Formularios y documentos. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Pulse Crear y seleccione Formulario adaptable. Aparecerá una opción para seleccionar una plantilla. Pulse la plantilla En blanco para seleccionarla y pulse Siguiente.

  3. Aparecerá una opción para Agregar 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 Título especifica el nombre para mostrar del formulario. El título le ayuda a identificar el formulario en la interfaz de usuario de AEM Forms.
    • Nombre: especifique shipping-address-add-update-form en el campo Nombre. El campo Nombre especifica el nombre para mostrar del formulario. Se crea un nodo con el nombre especificado en el repositorio. A medida que empieza a escribir un título, el valor del campo de nombre se genera automáticamente. 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 sustituyen por guiones.

  4. Pulse Crear. Se creará un formulario adaptable y aparecerá un cuadro de diálogo para abrir el formulario y editarlo. Pulse Abrir para abrir el formulario recién creado en una pestaña nueva. El formulario se abrirá para editarlo. También mostrará 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.

    newly-created-adaptive-form

AEM Forms proporciona muchos componentes para mostrar información en un formulario adaptable. Los componentes Encabezado y Pie de página ayudan a proporcionar una apariencia 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. Pulse toggle-side-panel > treeexpandall. Se abre el explorador de componentes. Arrastre el componente Encabezado desde el explorador de componentes hasta el formulario adaptable.

  2. Pulse Logotipo. Aparecerá la barra de herramientas. Pulse aem_6_3_edit en la barra de herramientas, escriba We.Retail y pulse aem_6_3_forms_save.

  3. Pulse Imagen. Aparecerá la barra de herramientas. Pulse cmppr. El explorador de propiedades se abrirá a la izquierda de la pantalla. Examine y cargue la imagen del logotipo. Pulse aem_6_3_forms_save. La imagen aparecerá en el encabezado.

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

Obtener archivo

  1. Arrastre el componente Pie de página desde treeexpandall hasta el formulario adaptable. En esta fase, el formulario tendrá el siguiente aspecto:

    adaptive-form-with-headers-and-footers

Paso 3: Agregar 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 desde treeexpandall hasta un formulario. Para obtener más información sobre los componentes disponibles y las funcionalidades correspondientes, consulte Introducción a la creación de formularios adaptables.

  1. Arrastre el Componente Cuadro numérico hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente, cambie el Título del componente a Customer ID, cambie el Nombre del elemento a customer_ID, habilite el Campo requerido, habilite la opción Usar tipo de entrada de número HTML5 y pulse aem_6_3_forms_save.

  2. Arrastre tres componentes Cuadro de texto hasta el formulario adaptable. Colóquelos antes del componente 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 obligatorio Habilitado Habilitado Habilitado
    Permitir varias líneas
    		 Deshabilitado Habilitado Deshabilitado

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

    Propiedad Valor
    Título Código ZIP
    Nombre de elemento customer_ZIPCode
    Número máximo de dígitos 6
    Campo obligatorio Habilitado
    Tipo de patrón de visualización Sin patrón

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

    Propiedad Valor
    Título Correo electrónico
    Nombre de elemento customer_Email
    Campo obligatorio Habilitado

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

    Propiedad Valor
    Título Prueba de dirección aprobada por el gobierno
    Nombre de elemento customer_Address_Proof
    Campo obligatorio Habilitado

  6. Arrastre un componente Botón de envío hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente, cambie el Nombre del elemento a address_addition_update_submit, pulse aem_6_3_forms_save. La presentación del formulario estará completa y el formulario tendrá el siguiente aspecto:

    adaptive-form-with-all-the-components

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

Se activa una acción de envío cuando un usuario pulsa 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. Para obtener información detallada, consulte Configurar la acción de envío.

Con 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 Configurar notificaciones de correo electrónico.

  2. Pulse Contenedor de formulario en el explorador de contenido y pulse cmppr. El explorador de propiedades se abrirá a la izquierda.

  3. Vaya a Envío > Enviar acción. Seleccione Enviar correo electrónico. Especifique los siguientes valores y pulse aem_6_3_forms_save.

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

    Su formulario está listo. Ahora puede obtener previsualizar el formulario y probar la funcionalidad. 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.

Paso 5: Previsualizar y enviar el formulario adaptable

Puede usar la opción Previsualizar para evaluar la apariencia y el comportamiento de un formulario. Puede enviar un formulario en el 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 usar tanto la opción de Previsualización como el Emulador regla junto con otras opciones para obtener una vista previa de un formulario para dispositivos con diferentes tamaños de pantalla.

  1. Pulse Previsualizar a la derecha del editor de formularios. El formulario se abrirá en el modo de previsualización. Si ha utilizado el nombre mencionado en el tutorial, la dirección URL de vista previa del formulario es http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Usar regla para ver el aspecto del formulario en varios dispositivos.
  3. Rellene los campos del formulario y pulse Enviar. El formulario se enviará y se le redirigirá a la página de agradecimiento predeterminada. También puede especificar una página de agradecimiento personalizada. Para obtener más información, consulte Configurar la página de redireccionamiento.

El formulario adaptable al que agregar una dirección está listo. Si ha utilizado el nombre mencionado en el tutorial y accede 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