Landing pages - Parte 4: Añadir un formulario a la landing page y usar las opciones avanzadas

💡 Información relevante
Las landing pages están disponibles para las ofertas Business y Enterprise.

En este artículo, explicaremos cómo añadir un formulario a tu landing page y cómo usar las opciones avanzadas disponibles en el editor de landing pages. 

Hemos preparado una serie de artículos para ayudarte a crear tus landing pages:

Información relevante

El nuevo editor de landing pages ofrece algunas opciones que pueden diferir del editor clásico de landing pages. Asegúrate de seleccionar la pestaña correcta en función del editor de landing pages que estés utilizando:

mceclip6.png

mceclip5.png

Nuevo editor de landing pages

Editor clásico de landing pages

Añadir un elemento de formulario

Los formularios te permiten recuperar información específica sobre tus contactos y añadirlos automáticamente a tus listas de contactos en Brevo.

Para añadir un elemento de formulario a la landing page:

Nuevo editor Editor clásico
Añade una nueva sección en Sections (Secciones) > Filter pre-made sections (Filtrar secciones predefinidas) > Forms (Formularios) y elige una sección predefinida que puedas editar para adaptarla a tus necesidades. También puedes empezar desde cero añadiendo un nuevo elemento de formulario a tu landing page.

Configurar el formulario

Una vez que hayas añadido un elemento de formulario a tu landing page, puedes elegir cómo configurarlo:

Alineación

Esta configuración solo está disponible en el nuevo editor de landing pages.

La configuración de Alignment (Alineación) se describe en la sección Configuración común de la Parte 3: Editar la configuración de todos los elementos de la landing page.

Administrar campos

La configuración de Manage Fields (Administrar campos) te permite elegir dónde almacenar los contactos que recopilas con el formulario y qué información quieres obtener de ellos. También puedes configurar directamente el formulario: añadir y ordenar campos, hacer que sean obligatorios o no, añadir texto de ayuda, etc.

Para acceder a la configuración de Administrar campos, haz clic en tu formulario en el editor de landing pages.

Seleccionar la lista de contactos

 
  1. En el formulario, haz clic en Edit Form (Editar formulario).
  2. En la configuración de Administrar campos, selecciona en qué carpeta y lista se almacenarán los contactos que recopiles en tu cuenta de Brevo:
    • Selecciona una carpeta de listas en el primer menú desplegable.
    • Selecciona una lista de contactos en el segundo menú desplegable.
❗️ Importante
Si quieres actualizar los contactos existentes de tu lista cuando envíen el formulario, asegúrate de marcar la opción Update existing contacts on form submission (Actualizar contactos existentes al enviar el formulario) en Controles de suscripción al formulario.

Configurar los campos

Añade y organiza los diferentes campos de contacto con la información que quieres recopilar con tu formulario. 

  1. Add a contact field (Añadir un campo de contacto): añade atributos de contacto preexistentes a tu formulario.
  2. Create a new field (Crear un nuevo campo): si el atributo de contacto aún no existe, puedes crear uno desde aquí.
  3. Reorder the fields (Reordenar los campos): haz clic en el icono = y arrastra y suelta un campo para reordenarlo.
    Delete a field (Eliminar un campo): haz clic en en el icono de la papelera para eliminar un campo.

    Haz clic en un campo para seleccionar su configuración:
  4. Label (Etiqueta): muestra la etiqueta encima del campo.
  5. Hidden (Oculto): elige si el campo debe estar oculto o visible en el formulario.
    Puedes añadir un campo oculto al formulario cuando quieras que los datos se completen automáticamente pasándolos en la URL con parámetros de consulta.
  6. Required (Obligatorio): elige si el campo es obligatorio para enviar el formulario o no.
  7. Dependiendo del campo que hayas seleccionado, tendrás diferentes configuraciones:

    • Label (Etiqueta): cambia el nombre de la etiqueta que se muestra encima del campo.
    • Placeholder (Marcador de posición): introduce el texto que se muestra en tu campo. Por defecto, es el mismo texto que tu etiqueta.
    • Help text (Texto de ayuda): introduce el texto que se muestra debajo de tu campo. Esto puede ser útil para sugerencias.
    • Default value (Valor predeterminado): introduce el valor que se sincronizará en tu lista de contactos de Brevo si el visitante no completa el campo.
    • URL Param (Parámetro de URL): introduce el valor que se insertará automáticamente en el campo del formulario. Tu contacto puede anularlo si es necesario. Para obtener más información, consulta nuestro artículo dedicado Rellenar previamente un formulario en una landing page con atributos de contacto.
❗️ Importante
Si añades un número de teléfono en tu formulario, el único formato válido será el formato internacional con el signo + y el código del país: +447911123456 para el Reino Unido, +12025550101 para los EE. UU. o +33655678834 para Francia. Utiliza un marcador de posición para ayudar a tus usuarios a utilizar el formato correcto.

Opciones de redireccionamiento

La configuración de Redirect Options (Opciones de redireccionamiento) te permite elegir a dónde se redirigirá a tus usuarios cuando envíen su información: 

Utiliza la Form redirect action (Acción de redireccionamiento del formulario) para redirigir tus contactos a una página del embudo (una subpágina de tu landing page) o a una URL específica:

  • Page in the funnel (Página del embudo): selecciona a qué página del embudo quieres redirigir a tus contactos.
  • Link to a URL (Enlace a una URL): introduce el enlace a la página externa a la que quieres redirigir a tus contactos.

Confirmación doble

La configuración de Double Opt-in (Confirmación doble) te permite elegir qué método de consentimento quieres utilizar en tu formulario:

  • Confirmación simple:
    1. El nuevo contacto introduce su dirección de email en tu formulario.
    2. Se añade a tu lista de contactos de Brevo.
  • Confirmación doble:
    1. El nuevo contacto introduce su dirección de email en tu formulario.
    2. El contacto debe hacer clic en el enlace del email de confirmación que reciba para que se añada a tu lista de contactos de Brevo.
❗️ Importante
Hay dos formas de crear una suscripción de confirmación doble. Asegúrate de utilizar solo uno de los dos métodos disponibles: habilita la suscripción de confirmación doble a través de Marketing Automation O a través de un formulario de suscripción de Brevo. De lo contrario, tus contactos recibirán emails de confirmación doble duplicados.

Diseño

La configuración de Design (Diseño) te permite elegir el diseño de tus campos: ninguno, contorno, contorno curvo, subrayado con fondo, subrayado sin fondo.

Tu formulario también se puede mostrar en formato horizontal. Si eliges un formulario horizontal, te recomendamos eliminar las etiquetas de tus campos.

Para cambiar el color de fondo, ve a la configuración de la columna tal y como se explica en la Parte 3: Editar la configuración de todos los elementos de la landing page.

Estos son algunos ejemplos de los diferentes diseños de formularios:

Style_form_gif.gif

Espaciado

La configuración de Spacing (Espaciado) se describe en la sección Configuración común de la Parte 3: Editar la configuración de todos los elementos de la landing page.

Controles de suscripción al formulario

La configuración de Form Subscription Controls (Controles de suscripción al formulario) te permite elegir el modo en que quieres que funcione tu formulario durante el envío:

  • Update existing contacts on form submission (Actualizar los contactos existentes al enviar el formulario): esta opción es útil si quieres actualizar la información de los contactos existentes cuando envían sus formularios. 
  • Disable reCAPTCHA (Deshabilitar reCAPTCHA): deshabilita el reCaptcha de Google integrado por defecto en tu landing page publicada.
  • Disable URL Parameters on form submission (Deshabilitar los parámetros de URL al enviar el formulario:
    de forma predeterminada, los parámetros de URL se muestran al enviar el formulario. Es posible que se muestren datos adicionales sobre el contacto, como /thank-you.html/?firstName=Jane, en la URL. Esta funcionalidad es útil, ya que tus contactos no tienen que completar la misma información en la segunda página si recopilas varios conjuntos de información con una serie de páginas de destino en tu embudo. Sin embargo, si publicas anuncios de Google y recibes una notificación de Google sobre los parámetros de URL que se muestran al enviar el formulario, puede deshabilitar esta funcionalidad y volver a publicar tu landing page.

Estilo

Esta configuración solo está disponible en el nuevo editor de landing pages.

La configuración de Style (Estilo) te permite definir el aspecto de tu formulario:

  • Border style and Border color (Estilo del borde y Color del borde): añade un borde al formulario y selecciona su color.
  • Border width (Ancho del borde): define el ancho del borde del formulario.
  • Border radius (Radio del borde): selecciona la forma redondeada de los bordes del formulario.

Habilitar el seguimiento de JavaScript (Facebook Pixel/Google Analytics)

La configuración de Tracking (Seguimiento) de tu landing page te permite insertar scripts de seguimiento en determinadas partes de la página.

Un script de seguimiento es un código que se utiliza para monitorear la cantidad de usuarios que visitan una página. Los scripts de seguimiento te permiten analizar cuánto tiempo permanecen los visitantes en la página, qué es lo que les llama la atención y cómo interactúan con el contenido.

💡 Información relevante
Google Analytics y Facebook Pixel son los scripts de seguimiento más utilizados, aunque cualquier script de seguimiento puede añadirse a una landing page de Brevo.

Para añadir un script de seguimiento a tu landing page:

  1. En el editor de landing pages, haz clic en Settings (Configuración) en la esquina inferior izquierda.
  2. Selecciona Tracking (Seguimiento).

  3. Introduce el script de seguimiento en la etiqueta adecuada. Puedes añadir un script en:

    • la Head tag (Etiqueta de encabezado) <head>;

    • la etiqueta After opening (Después de la apertura) <body>;

    • o en la etiqueta Before the closing (Antes del cierre) </body>.

      💡 Información relevante

      Servicios como Facebook Pixel y Google Analytics requieren que el script se añada a la etiqueta de encabezado, mientras que otros servicios pueden necesitarlo en el cuerpo. Asegúrate de consultar las instrucciones de tu servicio de seguimiento para determinar dónde debe añadirse el script.

  4. Haz clic en Done (Listo).

Landing pages con varias páginas

Si quieres añadir páginas adicionales a tu landing page para crear un embudo, ve al panel Pages (Páginas) y haz clic en + Create a blank page (Crear una página en blanco). Para obtener más información, consulta nuestro artículo dedicado Gestionar las subpáginas de la landing page.

Representación basada en el dispositivo

Las opciones Desktop (Escritorio) y Mobile (Móvil) en la parte superior de tu landing page te permiten probar la representación de la landing page en diferentes dispositivos.
❗️ Importante
Puedes ocultar algunas secciones o elementos de tu landing page según el dispositivo en el que se muestren. Para obtener más información, consulta nuestra sección dedicada Visibilidad en la Parte 3: Editar la configuración de todos los elementos de la landing page.

⏩ ¿Qué es lo siguiente?

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 15 de 37