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.
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:
Crear un formulario adaptable que permita al cliente agregar una dirección de envío
Campos de diseño de un formulario adaptable para mostrar y aceptar información de un cliente
Crear una acción de envío para enviar un correo electrónico con contenido de formulario
Al final del artículo tendrá un formulario similar al siguiente:
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.
Toque Crear y seleccione Formulario adaptable. Aparece una opción para seleccionar una plantilla. Toque la plantilla En blanco para seleccionarla y toque Siguiente.
Aparece una opción para Añadir propiedades. Los campos Título y Nombre son obligatorios:
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.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.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.
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.
Toque >
. Se abre el navegador de componentes. Arrastre el componente Header desde el navegador de componentes al formulario adaptable.
Toque Logotipo. Aparece la barra de herramientas. Toque en la barra de herramientas, escriba We.Retail y toque
.
Toque Imagen. Aparece la barra de herramientas. Toque . El navegador de propiedades se abre a la izquierda de la pantalla. Busque y cargue la imagen del logotipo. Toque
. La imagen aparece en el encabezado.
Puede tocar Obtener archivo para descargar el logotipo utilizado en este artículo si no tiene uno.
Arrastre el componente Footer desde al formulario adaptable. En este momento, el formulario tiene el siguiente aspecto:
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.
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 .
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 |
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 |
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 | Valor |
---|---|
Título | Correo electrónico |
Nombre de elemento | customer_Email |
Campo requerido | Activado |
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 | Valor |
Título | Prueba de dirección aprobada por el gobierno |
Nombre de elemento | customer_Address_Prueba |
Campo requerido | Activado |
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:
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:
Configure el servidor de correo electrónico. Para obtener más información, consulte Configuración de notificación de correo electrónico.
Toque Contenedor de formulario en el navegador de contenido y toque . El navegador de propiedades se abre a la izquierda.
Vaya a Enviar > Enviar acción. Seleccione Enviar correo electrónico. Especifique los siguientes valores y toque .
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.
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 de forma conjunta para previsualización de un formulario para dispositivos de diferentes tamaños de pantalla.
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.