Tutorial: Crear un formulario adaptable

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.

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

• Previsualización y envío de un formulario adaptable

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

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

Paso 1: Crear el formulario adaptable

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

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 Añadir 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. 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.

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 2: Añadir 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 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.

1. Toque > . Se abre el navegador de componentes. Arrastre el componente Header desde el navegador de componentes al formulario adaptable.

2. Toque Logotipo. Aparece la barra de herramientas. Toque en la barra de herramientas, escriba We.Retail y toque .

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

   Obtener archivo

4. Arrastre el componente Footer desde al formulario adaptable. En este momento, el formulario tiene el siguiente aspecto:

   

Paso 3: Añadir 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 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. 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 .
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.::

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

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_addiupdate_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 notificación de correo electrónico.

   /content/help/en/experience-manager/6-4/sites-administering/notification.html

2. Toque Contenedor de formulario en el navegador de contenido y toque . El navegador de propiedades se abre a la izquierda.

3. 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 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: Previsualización y envío del formulario adaptable

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.

1. Toque la opción Previsualización en la parte derecha del editor de formularios. El formulario se abre en el modo de previsualización. Si ha utilizado el nombre mencionado en el tutorial, la dirección URL de previsualización del formulario es http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
2. Utilice la para vista del 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 predeterminada Gracias. 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.