Este tutorial es un paso de la serie Create Your First Adaptive Form. 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 obtener 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:
Crear un formulario adaptable que permita a un cliente añadir una dirección de envío
Diseño de campos de un formulario adaptable para mostrar y aceptar información de un cliente
Cree una acción de envío para enviar un correo electrónico que contenga contenido de formulario
Al final del artículo tendrá un formulario similar al siguiente:
[ ](assets/form-preview-mobile.gif)
Inicie sesión en la instancia de autor de AEM y vaya a Adobe Experience Manager > Forms > Forms & Documents. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
Pulse Crear y seleccione Formulario adaptable. Aparece una opción para seleccionar una plantilla. Pulse la plantilla En blanco para seleccionarla y pulse Siguiente.
Aparece una opción para Agregar propiedades. Los campos Title y Name 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 de AEM Forms.shipping-address-add-update-form
en el campo Nombre. 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.Toque Crear. Se crea un formulario adaptable y aparece un cuadro de diálogo para abrir el formulario y editarlo. Pulse Abrir para abrir el formulario recién creado en una nueva pestaña. 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 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.
Pulse >
. Se abre el navegador de componentes. Arrastre el componente Header desde el navegador de componentes al formulario adaptable.
Toque Logotipo. Aparecerá la barra de herramientas. Pulse en la barra de herramientas, escriba We.Retail y pulse
.
Toque Imagen. Aparecerá la barra de herramientas. Toque . El navegador de propiedades se abre a la izquierda de la pantalla. Examine y cargue la imagen del logotipo. Pulse
. La imagen aparece en el encabezado.
Puede pulsar Get file para descargar el logotipo utilizado en este artículo si no lo tiene.
Arrastre el componente Pie de página de al formulario adaptable. En esta fase, 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 la información de forma adaptativa. 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.
Customer ID
, cambie Nombre de elemento a customer_ID
, habilite la opción Campo requerido, habilite la opción Usar tipo de entrada de número HTML5 y pulse 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, establezca los valores enumerados en la tabla siguiente, Pulse .
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 motivo |
Arrastre un componente Email antes del componente de pie de página. Abra las propiedades del componente, establezca los valores enumerados en la tabla siguiente y pulse .
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, establezca los valores enumerados en la tabla siguiente y pulse .
Propiedad | Valor |
Título | Prueba de dirección aprobada por el gobierno |
Nombre de elemento | customer_Address_Proof |
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 de elemento a address_add_update_submit y pulse . La presentación del formulario es completa y el formulario tiene el aspecto siguiente:
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 de envío.
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:
Configure el servidor de correo electrónico. Para obtener más información, consulte Configuración de notificaciones por correo electrónico.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
Pulse Contenedor de formulario en el navegador de contenido y pulse . El navegador de propiedades se abre a la izquierda.
Vaya a Envío > Enviar acción. Seleccione Send Email. Especifique los siguientes valores y pulse .
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 | Hola ${customer_Name} , se añade 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 archivos 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 accede al formulario en el equipo que ejecuta el servidor AEM Forms, el formulario está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
Puede utilizar la opción Preview 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 Preview y Emulator junto con otras para obtener una vista previa de un formulario para dispositivos de diferentes tamaños de pantalla.
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 AEM Forms, el formulario está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.