Este tutorial es un paso en la serie Crear su primer formulario adaptable. Se recomienda seguir la serie en orden cronológico para comprender, realizar y mostrar el caso de uso del tutorial completo.
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á lo siguiente:
Crear un formulario adaptable que permita a un cliente agregar una dirección de envío
Diseñar campos 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 que contenga contenido de formulario
Al final del artículo tendrá un formulario similar al siguiente:
Inicie sesión en la instancia de autor de AEM y navegue hasta Adobe Experience Manager > Formularios > Formularios y documentos. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
Seleccionar Crear y seleccione Formulario adaptable. Aparecerá una opción para seleccionar una plantilla. Seleccione el Vacío plantilla para seleccionarla y seleccionar Siguiente.
Aparecerá una opción para Agregar propiedades. Los campos Título y Nombre son obligatorios:
Add new or update shipping address
en el campo Título. El campo 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 Nombre especifica el nombre para mostrar 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.Seleccione Crear. Se creará un formulario adaptable y aparecerá un cuadro de diálogo para abrir el formulario y editarlo. Seleccionar Abrir para abrir el formulario recién creado en una pestaña nueva. El formulario se abrirá para editarlo. También mostrará 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 una apariencia 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.
Seleccionar >
. Se abre el explorador de componentes. Arrastre el componente Encabezado desde el explorador de componentes hasta el formulario adaptable.
Seleccionar Logotipo. Aparecerá la barra de herramientas. Seleccionar en la barra de herramientas, escriba We.Retail y seleccione
.
Seleccione Imagen. Aparecerá la barra de herramientas. Seleccionar . El explorador de propiedades se abrirá a la izquierda de la pantalla. Examine y cargue la imagen del logotipo. Seleccionar
. La imagen aparecerá en el encabezado.
Puede seleccionar Obtener archivo para descargar el logotipo utilizado en este artículo si no lo tiene.
Arrastre el componente Pie de página desde hasta el formulario adaptable. En esta fase, el formulario tendrá 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 desde hasta un formulario. Para obtener más información sobre los componentes disponibles y las funcionalidades correspondientes, consulte Introducción a la creación de formularios adaptables.
Arrastre el Componente Cuadro numérico hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente, cambie Título del componente a Customer ID
, cambiar Nombre de elemento hasta customer_ID
, habilite la opción Campo obligatorio , active la opción Utilizar tipo de entrada de número de HTML 5 y seleccione. .
Arrastre tres componentes Cuadro de texto hasta el formulario adaptable. Colóquelos antes del componente 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 obligatorio | Habilitado | Habilitado | Habilitado |
Permitir varias líneas |
Deshabilitado | Habilitado | Deshabilitado |
Arrastre un componente Cuadro numérico antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla, Seleccionar .
Propiedad | Valor |
---|---|
Título | Código ZIP |
Nombre de elemento | customer_ZIPCode |
Número máximo de dígitos | 6 |
Campo obligatorio | Habilitado |
Tipo de patrón de visualización | Sin patrón |
Arrastre un componente Correo electrónico antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla y seleccione .
Propiedad | Valor |
---|---|
Título | Correo electrónico |
Nombre de elemento | customer_Email |
Campo obligatorio | Habilitado |
Arrastre un Archivo adjunto antes del componente Pie de página. Abra las propiedades del componente, establezca los valores enumerados en la siguiente tabla y seleccione .
Propiedad | Valor |
Título | Prueba de dirección aprobada por el gobierno |
Nombre de elemento | customer_Address_Proof |
Campo obligatorio | Habilitado |
Arrastre un componente Botón de envío hasta el formulario adaptable. Colóquelo antes del componente Pie de página. Abra las propiedades del componente y cambie el Nombre del elemento a address_addition_update_submit
, seleccione . La presentación del formulario estará completa y el formulario tendrá el siguiente aspecto:
Se activa una acción de envío cuando un usuario pulsa 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. Para obtener información detallada, consulte Configurar la acción de envío.
Con 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 Configurar notificaciones de correo electrónico.
Seleccionar Contenedor del formulario en el Explorador de contenido y seleccione . El explorador de propiedades se abrirá a la izquierda.
Vaya a Envío > Enviar acción. Seleccione Enviar correo electrónico. Especifique los siguientes valores y seleccione .
Propiedad | Valor |
---|---|
De | donotreply@weretail.com |
Para | ${customer_Email} |
Asunto | Reconocimiento: Ha agregado la dirección de envío al sitio web de We.Retail. |
Plantilla de correo electrónico | Hola,${customer_Name} : La siguiente dirección se agrega como dirección de envío de la cuenta: ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode} Saludos, We.Retail |
Incluir datos adjuntos | Habilitado |
Su formulario está listo. Ahora puede obtener previsualizar el 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.
Puede usar la opción Previsualizar para evaluar la apariencia y el comportamiento de un formulario. Puede enviar un formulario en el 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 usar tanto la opción de Previsualización como el Emulador junto con otras opciones para obtener una vista previa de un formulario para dispositivos con diferentes tamaños de pantalla.
El formulario adaptable al que agregar 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 estará disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.