DocumentaciónAEM 6.4Guía de Forms

Tutorial: Crear un formulario adaptable do-not-publish-tutorial-create-an-adaptive-form

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

02-create-adaptive-form-main-image

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 about-the-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á lo siguiente:

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 step-create-the-adaptive-form

  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. Pulse Crear y seleccione Formulario adaptable. Aparecerá una opción para seleccionar una plantilla. Pulse la plantilla En blanco para seleccionarla y pulse 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. Pulse Crear. Se creará un formulario adaptable y aparecerá un cuadro de diálogo para abrir el formulario y editarlo. Pulse 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.

    newly-created-adaptive-form

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. Pulse toggle-side-panel > treeexpandall . Se abre el explorador de componentes. Arrastre el componente Encabezado desde el explorador de componentes hasta el formulario adaptable.

  2. Pulse Logotipo. Aparecerá la barra de herramientas. Pulse aem_6_3_edit en la barra de herramientas, escriba We.Retail y pulse aem_6_3_forms_save .

  3. Pulse Imagen. Aparecerá la barra de herramientas. Pulse cmppr . El explorador de propiedades se abrirá a la izquierda de la pantalla. Examine y cargue la imagen del logotipo. Pulse aem_6_3_forms_save . La imagen aparecerá en el encabezado.

    Puede pulsar 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 treeexpandall hasta el formulario adaptable. En esta fase, el formulario tendrá el siguiente aspecto:

    adaptive-form-with-headers-and-footers

Paso 3: Agregar componentes para capturar y mostrar información step-add-components-to-capture-and-display-information

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 desde treeexpandall 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 el Título del componente a Customer ID, cambie el Nombre del elemento a customer_ID, habilite el Campo requerido, habilite la opción Usar tipo de entrada de número HTML5 y pulse aem_6_3_forms_save .
  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

  1. 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, pulse aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propiedad Valor
    Título Correo electrónico
    Nombre de elemento customer_Email
    Campo obligatorio Habilitado

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

Propiedad
Valor
Título
Prueba de dirección aprobada por el gobierno
Nombre de elemento
customer_Address_Proof
Campo obligatorio
Habilitado

  1. 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, cambie Nombre de elemento a address_add_update_submit, toque aem_6_3_forms_save . La presentación del formulario estará completa y el formulario tendrá el siguiente aspecto:

    adaptive-form-with-all-the-components

Paso 4: Configurar la acción de envío para el formulario adaptable step-configure-submit-action-for-the-adaptive-form

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.

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

  2. Pulse Contenedor de formulario en el explorador de contenido y pulse cmppr . 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 pulse aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    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 accede al formulario en el equipo que ejecuta el servidor de AEM Forms, el formulario está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Paso 5: Previsualizar y enviar el formulario adaptable step-preview-and-submit-the-adaptive-form

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 regla junto con otras opciones para obtener una vista previa de un formulario para dispositivos con diferentes tamaños de pantalla.

  1. Pulse Previsualizar a la derecha 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 regla para ver el aspecto del formulario en varios dispositivos.
  3. Rellene los campos del formulario y pulse 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 está disponible en http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da