DocumentaciónEdición B2B de Journey OptimizerDocumentación de la edición B2B de Journey Optimizer

[Beta]{class="badge informative" title="Actualmente, esta función está en versión beta limitada"}

Diseño de formulario

Last update: Thu Jul 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Usuario

Después de crear un formulario, el espacio de diseño visual abre un borrador con una definición de formulario básica predeterminada. En el panel Resumen de la derecha, haga clic en Editar formulario y use el espacio de diseño visual para definir el estilo del formulario y los componentes de campo.

Acceder a la biblioteca de formularios {width="700" modal="regular"}

Campos

Los campos de formulario se utilizan para recopilar datos de perfil de la persona que se pueden utilizar para dirigirse a personas y asociarlas a cuentas y grupos de compra. Todos los formularios nuevos comienzan con los siguientes campos en un diseño de una sola columna:

  • Nombre
  • Apellido
  • Dirección de correo electrónico

Utilice las herramientas de diseño de campos para construir el conjunto de campos y el diseño que necesita para recopilar los datos que necesita para sus actividades de marketing basadas en cuentas.

Añadir un campo add-field

  1. En el panel Componentes de la izquierda, arrastre el componente de contenido Campo y suéltelo en el lienzo.

    Agregar un componente de campo al formulario {width="700" modal="regular"}

  2. Haga clic en Seleccionar atributo de campo.

  3. En el cuadro de diálogo Seleccionar atributo de campo, seleccione la casilla de verificación del atributo de perfil de persona que desee utilizar para el campo y haga clic en Seleccionar.

    Los esquemas empresariales XDM determinan los atributos disponibles. También están disponibles todos los campos personalizados definidos para la instancia de Journey Optimizer B2B edition. Utilice el cuadro de texto Buscar para filtrar la lista por nombre o haga clic en el icono Filtrar para filtrar la lista por esquema/tipo de datos.

    Agregar un componente de campo al formulario {width="700" modal="regular"}

    En el lienzo, la etiqueta de campo predeterminada del atributo seleccionado se rellena en el lienzo. Los detalles del campo se muestran en el panel de la derecha.

  4. Si es necesario, cambie el texto Label.

    Este texto se muestra junto al campo en el formulario. El texto predeterminado se rellena desde el atributo de campo.

  5. Establezca Tipo de campo según el tipo de datos del campo:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3
    Tipo de campo Uso Ejemplo
    Casilla de verificación Use este tipo para que los visitantes puedan seleccionar un valor true (marcado) o false (desmarcado).
    Grupo de casillas de verificación Use este tipo para que los visitantes puedan seleccionar un valor true (marcado) o false (desmarcado) para varios elementos.
    Moneda Utilice este tipo para permitir un campo flotante que represente el tipo de moneda predeterminado seleccionado para la instancia de Journey Optimizer B2B edition.
    Fecha Utilice este tipo para restringir la entrada a un formato de fecha y proporcionar un selector de calendario en el campo.
    Doble
    Correo electrónico Utilice este tipo para restringir la entrada a un formato de dirección de correo electrónico.
    Número Utilice este tipo para restringir el campo a un valor numérico.
    Grupo de radio Utilice este tipo para permitir que los visitantes seleccionen una de un conjunto de opciones.
    Seleccionar Utilice este tipo para permitir que los visitantes seleccionen una de un conjunto de opciones mediante una lista desplegable.
    Regulador Utilice este tipo para permitir que los visitantes establezcan un valor numérico con un control deslizante.
    Teléfono Utilice este tipo para un campo de entrada de número de teléfono.
    Texto Utilice este tipo para un campo de entrada de texto estándar (cadena).
    Área de texto Utilice este tipo para admitir entradas de texto más largas.
    Dirección URL Utilice este tipo para restringir la entrada de texto a una dirección URL, incluido el protocolo de URL estándar.

  6. Según el tipo de campo seleccionado, defina las demás opciones para la entrada y validación del campo:

    Establecer opciones para el campo según el tipo de campo seleccionado {width="400" modal="regular"}

    • Marcador de posición: el valor del marcador de posición del campo que proporciona al visitante un ejemplo de lo que se espera para el campo.

    • Instrucciones: texto instructivo que ayuda al visitante a completar el campo. Escriba el texto que desea mostrar como texto de desplazamiento para el campo.

      note tip
      TIP
      Instrucciones vs. texto de marcador de posición
      Utilice estas dos propiedades para guiar a los visitantes para que rellenen el campo. El texto de la instrucción aparece como información del objeto o texto emergente al pasar el puntero por encima del campo. El texto del marcador de posición aparece atenuado dentro del campo y desaparece cuando el visitante introduce su texto en el campo. Puede utilizar ambos métodos o solo uno.

    • Valor predeterminado: utilice esta opción para especificar un valor predeterminado para el campo.

    • Mensaje de validación: utilice esta opción para especificar un mensaje de validación para el campo. Este mensaje se muestra si el visitante introduce un valor no válido para el campo. El mensaje Standard está establecido de manera predeterminada. Elige Personalizado y escribe tu propio mensaje.

    • Longitud máxima: escriba el número máximo de caracteres que se pueden introducir en el campo.

  7. Establezca los comportamientos de campo según sea necesario:

    • Obligatorio: seleccione la casilla de verificación para que la entrada del campo sea necesaria para enviar el formulario.

    • Habilitar máscara de entrada: seleccione la casilla de verificación para restringir la entrada del visitante mediante una máscara de entrada. Por ejemplo, es posible que desee que los visitantes especifiquen números de teléfono en un formato específico. En el cuadro de diálogo, escriba la máscara con 9 para cualquier número, a para cualquier carta y * para cualquiera de los dos. Haga clic en Guardar para habilitar la máscara de entrada especificada.

      Definir una máscara de entrada para el campo {width="500" modal="regular"}

Cambiar estilo de campo field-styling

Seleccione la ficha Estilos en el panel derecho para cambiar el estilo del campo seleccionado.

  • Fondo: seleccione la casilla de verificación para aplicar un color de fondo al campo. El blanco es el color predeterminado. Haga clic en el cuadrado Color de fondo para abrir el selector de color emergente y elegir un color para el fondo del campo.

    Establecer los estilos de fondo para el campo de formulario {width="600" modal="regular"}

  • Etiqueta: el estilo de la etiqueta controla las características visuales del texto que se muestra junto al campo. Seleccione una visualización de etiqueta superior o lateral relativa al campo. Puede establecer el tamaño de fuente, el alto de línea, el estilo de texto y la alineación del texto. Haga clic en el cuadrado Color de fuente para abrir el selector de color emergente y elegir un color para el texto de la etiqueta.

    Establecer los estilos de etiqueta para el campo de formulario {width="600" modal="regular"}

  • Borde: haga clic en el cuadrado Color del borde para abrir el selector de color emergente y elegir un color para el borde. Puede definir un borde para el campo, incluidos el color y el ancho de línea. Desactive la casilla de verificación para quitar el borde del campo mostrado. También puede cambiar el tamaño del borde (ancho de píxel), el estilo y el radio de las esquinas.

    Establecer los estilos de borde para el campo de formulario {width="600" modal="regular"}

  • Tamaño: seleccione un valor de tamaño para determinar el ancho de visualización del campo. Elija Anchura completa, Anchura media o Automática.

  • Margen: establezca los márgenes (en píxeles) alrededor del campo. Puede establecer el mismo margen en los cuatro lados o seleccionar la casilla de verificación Margen diferente para cada lado para establecer los márgenes horizontal y vertical por separado.

  • Relleno: establezca el relleno (en píxeles) alrededor del campo. Puede establecer el mismo margen en los cuatro lados o seleccionar la casilla de verificación Margen diferente para cada lado para establecer los márgenes horizontal y vertical por separado.

    Establezca el tamaño, el margen y los estilos de relleno del campo de formulario {width="600" modal="regular"}

Reordenar campos field-reorder

Puede mover campos de formulario directamente en el espacio de trabajo visual. Haga clic en la herramienta Mover en el borde derecho del campo seleccionado y arrástrela a una nueva ubicación.

Agregue componentes estructurales al formulario y mueva campos a columnas para agruparlos y cambiar el diseño. Haga clic en la herramienta Mover en el borde izquierdo del componente de columna seleccionado y arrástrela a una nueva ubicación dentro del formulario.

Mover campos en el formulario y utilizar componentes estructurales para la agrupación y la presentación {width="500"}

Eliminar o duplicar un campo field-delete-duplicate

Haga clic en el icono Eliminar ( Eliminar icono ) en la barra de herramientas o en el panel derecho para eliminar un campo seleccionado. En el cuadro de diálogo de confirmación, haga clic en Eliminar.

Haga clic en el icono Duplicar ( Icono Duplicar ) en la barra de herramientas o en el panel derecho para duplicar un campo seleccionado. El nuevo campo se muestra justo debajo del campo original. Haga clic en Seleccionar atributo de campo para establecer el atributo del campo. Establezca el tipo de campo, los detalles y los estilos según sea necesario.

Iconos de eliminación y duplicado para los campos de formulario {width="600" modal="regular"}

Botón Enviar

El botón de envío (campo de pie de página) forma parte del formulario de forma predeterminada y no se puede quitar. Seleccione el componente botón/pie de página del formulario para cambiar el texto y el estilo del botón.

Edición del contenido del botón button-content

Con la ficha Contenido mostrada en el panel derecho, cambie el texto en el campo Texto del botón. El tamaño del botón se ajusta para ajustarse a la longitud del texto.

Cambiar el texto del botón en el formulario {width="600" modal="regular"}

Estilo del botón Enviar button-styles

Seleccione la ficha Estilos en el panel derecho para cambiar el estilo del componente de botón/pie de página seleccionado.

  • Fondo: seleccione la casilla de verificación para aplicar un color de fondo al botón. Azul es el color predeterminado. Haga clic en el cuadrado Color de fondo para abrir el selector de color emergente y elegir un color para el fondo del botón.

    Establecer los estilos de fondo para el botón del formulario {width="600" modal="regular"}

  • Etiqueta: el estilo de etiqueta controla las características visuales del texto dentro del botón. Puede establecer el tamaño de fuente, el alto de línea, el estilo de texto y la alineación del texto. Haga clic en el cuadrado Color de fuente para abrir el selector de color emergente y elegir un color para el texto de la etiqueta.

  • Borde: haga clic en el cuadrado Color del borde para abrir el selector de color emergente y elegir un color para el borde. Puede definir un borde para el botón, incluidos el color y el ancho de línea. Desactive la casilla de verificación para quitar el borde del botón mostrado. También puede cambiar el tamaño del borde (ancho de píxel), el estilo y el radio para las esquinas redondeadas.

  • Tamaño: seleccione un valor de tamaño para determinar el ancho de visualización del botón. Elija Anchura completa, Anchura media o Automática. El relleno se ajusta según el tamaño y la configuración de alineación.

    Establecer estilos de etiqueta, borde y tamaño para el botón del formulario {width="600" modal="regular"}

  • Alineación de botón: cuando elija un tamaño de Media anchura o Automático para el botón, establezca la alineación a la izquierda, a la derecha o en el centro. El relleno se ajusta según el tamaño y la configuración de alineación.

  • Margen: establezca los márgenes (en píxeles) alrededor del campo. Puede establecer el mismo margen en los cuatro lados o seleccionar la casilla de verificación Margen diferente para cada lado para establecer los márgenes horizontal y vertical por separado.

  • Relleno: establezca el relleno (en píxeles) alrededor del campo. Puede establecer el mismo margen en los cuatro lados o seleccionar la casilla de verificación Margen diferente para cada lado para establecer los márgenes horizontal y vertical por separado. El relleno se ajusta si cambia la configuración de tamaño y alineación.

    Establezca los estilos de alineación, margen y relleno para el botón del formulario {width="600" modal="regular"}

Estilo de formulario form-styling

Puede cambiar los estilos del área de formulario al hacer clic fuera de los componentes estructurales o de formulario. Los componentes de formulario (campos y botones) heredan los estilos Body definidos en los estilos de nivel superior, a menos que se definan otros estilos en el nivel de campo o de botón/pie de página.

Establecer los estilos de nivel superior para el cuerpo del formulario {width="600" modal="regular"}

Estilos CSS

Los nuevos formularios utilizan el CSS predeterminado para el estilo. Si desea cambiar los estilos modificando el CSS, puede copiarlo y, a continuación, utilizarlo para definir un CSS personalizado para el formulario.

Para definir un CSS personalizado para el formulario :

  1. Haga clic en Ver CSS en el panel derecho para revisar el código CSS.

    Establecer los colores de fondo para el formulario {width="450" modal="regular"}

  2. Seleccione el código CSS en la ventana de desplazamiento y cópielo en el portapapeles.

  3. Haga clic en Cerrar.

  4. (Opcional) Pegue el código copiado en su herramienta CSS favorita y edite el CSS para reflejar el estilo que desee.

  5. Haga clic en Agregar CSS personalizado en el panel derecho.

  6. Pegue el código CSS en la ventana.

    Establecer los colores de fondo para el formulario {width="450" modal="regular"}

    Puede editar el texto pegado en esta ventana.

  7. Haga clic en Guardar.

Estilo manual

Cambie la configuración en el panel derecho para definir la visualización de todo el formulario.

  • Color de fondo: seleccione la casilla de verificación para aplicar un color de fondo alrededor del área del formulario. El blanco es el color predeterminado. Haga clic en el cuadrado de color para abrir el selector de color emergente y elegir un color para el fondo del formulario.

  • Fondo de ventanilla: seleccione la casilla de verificación para aplicar un color de fondo a todos los componentes del formulario. El valor predeterminado es ningún color (se hereda del fondo exterior). Haga clic en el cuadrado de color para abrir el selector de color emergente y elegir un color para los componentes estructurales del formulario.

    Establecer los colores de fondo para el formulario {width="600" modal="regular"}

  • Texto - Elija una familia de fuentes para el formulario, que afecta las etiquetas, la sugerencia y el texto de marcador de posición de los campos del formulario. También afecta al texto del botón de envío predeterminado.

  • Tamaño: cambie el tamaño (ancho) del formulario en píxeles.

  • Margen: establezca márgenes (en píxeles) alrededor de los componentes del formulario. Puede establecer el mismo margen en los cuatro lados o seleccionar la casilla de verificación Margen diferente para cada lado para establecer los márgenes horizontal y vertical por separado.

    Establecer el texto, el tamaño y los márgenes del formulario {width="600" modal="regular"}

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0