Show Menu
TEMAS×

Tutorial: Creación de un formulario adaptable

Este tutorial es un paso de 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 obtener estadísticas de uso y Adobe Campaign 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: form-preview-mobile.gif

Paso 1: Creación del formulario adaptable

  1. Inicie sesión en la instancia de creación 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. 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 AEM Forms usuario.
    • 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.

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 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. Abra las propiedades del componente, cambie el Título del componente a Customer ID , cambie el Nombre del elemento a customer_ID , habilite la opción Campo ​requerido, active la opción Usar tipo de entrada de número HTML5 y toque 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
    Allow multiple lines 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 .
    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 .
    Propiedad
    Value
    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 .
    Propiedad Value
    Título Prueba de direcciones 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 . La presentación del formulario es completa y el formulario tiene el siguiente aspecto:

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 notificaciones por correo electrónico.
  2. Toque Formulario Contenedor en el navegador de contenido y toque . El navegador de propiedades se abre a la izquierda.
  3. Vaya a Envío > Enviar acción . Seleccione Enviar correo electrónico . Especifique los siguientes valores y toque .
    Propiedad
    Value
    De
    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}
    Regalos, 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 opciones de Previsualización y de regla del emulador de forma conjunta para previsualización de un formulario para dispositivos de diferentes tamaños de pantalla.
  1. Toque la opción de 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 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 de agradecimiento predeterminada. 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 .