Tutorial: Crear un formulario adaptable

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.

Información sobre el 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 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

• Previsualizar y enviar un formulario adaptable

Al final del artículo tendrá un formulario similar al siguiente:

Paso 1: Crear el formulario adaptable

1. 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.

2. Seleccionar Crear y seleccione Formulario adaptable. Aparecerá una opción para seleccionar una plantilla. Seleccione el Vacío plantilla para seleccionarla y seleccionar Siguiente.

3. Aparecerá 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 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 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.

4. 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.

   

Paso 2: Agregar un encabezado y pie de página

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.

1. Seleccionar > . Se abre el explorador de componentes. Arrastre el componente Encabezado desde el explorador de componentes hasta el formulario adaptable.

2. Seleccionar Logotipo. Aparecerá la barra de herramientas. Seleccionar en la barra de herramientas, escriba We.Retail y seleccione .

3. 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.

Obtener archivo

1. Arrastre el componente Pie de página desde hasta el formulario adaptable. En esta fase, el formulario tendrá el siguiente aspecto:

   

Paso 3: Agregar 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 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.

1. 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. .

2. 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

3. 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

4. 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

5. 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

6. 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:

   

Paso 4: Configurar la acción de envío para el formulario adaptable

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:

1. Configure el servidor de correo electrónico. Para obtener más información, consulte Configurar notificaciones de correo electrónico.

2. Seleccionar Contenedor del formulario en el Explorador de contenido y seleccione . El explorador de propiedades se abrirá a la izquierda.

3. 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.

Paso 5: Previsualizar y enviar el formulario adaptable

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.

1. Seleccione el Previsualizar en el lado derecho del editor de formularios. El formulario se abrirá en el modo de previsualización. 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. Usar para ver el aspecto del formulario en varios dispositivos.
3. Rellene los campos del formulario y seleccione Enviar. El formulario se enviará y se le redirigirá a la página de agradecimiento predeterminada. También puede especificar una página de agradecimiento personalizada. Para obtener más información, consulte Configurar la página de redireccionamiento.

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.