Tutorial: Creación de un formulario adaptable

02-create-adaptive-form-main-image

Este tutorial es un paso en la Crear el primer formulario adaptable serie. 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 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á a:

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

Paso 1: Creación del formulario adaptable

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

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

  3. Una opción para Agregar propiedades aparece. La variable Título y Nombre los campos son obligatorios:

    • Título: Especifique Add new or update shipping address en el Título campo . El campo de título especifica el nombre para mostrar del formulario. El título le ayuda a identificar el formulario en la AEM Forms interfaz de usuario.
    • Nombre: Especifique shipping-address-add-update-form en el Nombre campo . El campo Name especifica el nombre 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 crea un formulario adaptable y aparece un cuadro de diálogo para abrir el formulario y editarlo. Toque Apertura para abrir el formulario recién creado en una pestaña nueva. 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.

    formulario adaptable recién 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 y un aspecto coherentes 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 alternar panel lateral > treeexpandall. Se abre el navegador de componentes. Arrastre el Encabezado del navegador de componentes al formulario adaptable.

  2. Toque Logotipo. Aparecerá 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. Aparecerá la barra de herramientas. Toque cmppr. El navegador de propiedades se abre a la izquierda de la pantalla. Examinar y cargue la imagen del logotipo. Toque aem_6_3_forms_save. La imagen aparece en el encabezado.

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

Obtener archivo

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

    adaptive-form-with-headers-and-footers

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 desde treeexpandall a un formulario. Para obtener más información sobre los componentes disponibles y las funciones correspondientes, 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. Abra las propiedades del componente, cambie Título del componente a Customer ID, cambiar Nombre del elemento a customer_ID, habilite el Campo requerido , habilite la opción Usar tipo de entrada de número de HTML5 y pulse aem_6_3_forms_save.

  2. Arrastre tres componentes Cuadro de texto al formulario adaptable. Colóquelos 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 Cuadro numérico antes del componente de pie de página. Abra las propiedades del componente, establezca los valores enumerados en la tabla siguiente, Toque . aem_6_3_forms_save.

    Propiedad Valor
    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 motivo
  4. Arrastre un Correo electrónico antes del componente de pie de página. Abra las propiedades del componente, establezca los valores enumerados en la tabla siguiente y pulse aem_6_3_forms_save.

    Propiedad Valor
    Título Correo electrónico
    Nombre de elemento customer_Email
    Campo requerido Activado
  5. Arrastre un Archivo adjunto antes del componente de pie de página. Abra las propiedades del componente, establezca los valores enumerados en la tabla siguiente 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 requerido Activado
  6. Arrastre un 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 de elemento a address_addition_update_submit, toque aem_6_3_forms_save. La presentación del formulario es completa y el formulario tiene el aspecto siguiente:

    adaptive-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 de 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 Configuración de la acción Enviar.

Con los pasos siguientes, se 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 notificaciones por correo electrónico.

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

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

    Propiedad Valor
    De donotreply@weretail.com
    A ${customer_Email}
    Asunto Reconocimiento: Ha añadido la dirección de envío al sitio web de We.Retail.
    Plantilla de correo electrónico Hi ${customer_Name}, La siguiente dirección se añade como dirección de envío de la cuenta:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Saludos, We.Retail
    Incluir datos adjuntos Activado

    El formulario está listo. Ahora puede obtener una vista previa 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 está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Paso 5: Vista previa y envío del formulario adaptable

Puede usar la variable Opción de vista previa para evaluar el aspecto y el comportamiento de un formulario. Puede enviar un formulario en modo de vista previa 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 ambas Vista previa y Emulador regla junto con otras opciones para obtener una vista previa de un formulario para dispositivos de diferentes tamaños de pantalla.

  1. Toque . Vista previa a la derecha del editor de formularios. El formulario se abre en el modo de vista previa. 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. Uso regla para ver el aspecto del formulario en varios dispositivos.
  3. Rellene los campos del formulario y pulse Submit. El formulario se envía y se le redirige al valor predeterminado Gracias página. 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 añadir 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 está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

En esta página