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 estadísticas de uso y Adobe Campaign para 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.
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 > Formularios > Formularios 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 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 de 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 del formulario. En el repositorio se crea un nodo con el nombre especificado. A medida que comienza a escribir un título, 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: Agregar componentes para capturar y mostrar información

Los componentes son componentes básicos de un formulario adaptable. AEM Forms proporciona varios 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 Text Box 1 Text Box 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
  1. 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
  2. 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
  3. 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 dirección aprobada por el gobierno
Nombre de elemento customer_Address_Proof
Campo requerido Activado
  1. 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_addin_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 Contenedor de formulario 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 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 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: Vista previa y envío del formulario adaptable

Puede utilizar la opción ​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 utilizar las opciones Vista previa y Regla de emulador para obtener una vista previa de un formulario para dispositivos de diferentes tamaños de pantalla.
  1. Puntee en la opción Vista previa en la parte 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. Utilice la para ver el 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 .