Formularios de HubSpot

Usa los formularios de HubSpot para capturar información de los visitantes del sitio web, a la que puedes acceder a través de HubSpot. Puedes compartir enlaces a formularios directamente con los usuarios, enviar datos de formulario a través de la API e incrustarlos en las páginas de tu sitio web utilizando el CMS.

Los formularios son una parte central de la suite HubSpot y se pueden crear en cuentas de HubSpot de cualquier nivel de suscripción. Los formularios no solo son importantes para la conversión de clientes, sino también porque los datos de los formularios se pueden usar en otras herramientas y recursos de HubSpot, como contenido inteligente, listas, workflows, personalización de contenido y más.

Para agregar un módulo de formulario a una plantilla fuera de un área de arrastrar y soltar, haz referencia al módulo como un module estándar. 

Con cualquier implementación, puedes agregar parámetros a la etiqueta del módulo para especificar configuraciones como el formulario a usar y las opciones de redireccionamiento, como se muestra en el ejemplo de código anterior. Consulta la documentación predeterminada de los módulos para obtener más información sobre los parámetros disponibles.

Clonar el módulo predeterminado

Además de usar el módulo predeterminado tal como está, puedes clonarlo para que sea editable, lo que te permite personalizarlo según sea necesario. Por ejemplo, podrías clonar el módulo de formulario predeterminado, agregar un campo de color y luego envolver el HTML del módulo en una etiqueta <section> con estilo para agregar el color como fondo:

• En el administrador de diseño de la barra lateral izquierda, navega hasta la carpeta @hubspot, luego haz clic con el botón derecho en form.module y selecciona Clonar módulo.

• En la barra lateral derecha, haz clic en Agregar campo y luego selecciona Color.
• Agrega una etiqueta <section> alrededor del contenido HTML y luego incluye un estilo para hacer referencia al campo de color, como:

<section style="background:">

Al crear un módulo personalizado, puedes incluir un formulario en él agregando un campo de formulario, junto con la adición del fragmento de código del campo al HTML del módulo. Por ejemplo, es posible que desees agregar un formulario de solicitud de consulta a un módulo que contenga una imagen de un producto y una propuesta de valor descriptiva.

Para agregar un campo de formulario a un módulo personalizado desde el gestor de diseño:

• En la barra lateral derecha del editor de módulos, haz clic en Agregar campo y luego selecciona Formulario.

• Después de agregar el campo, coloca el cursor sobre el campo en la barra lateral derecha, luego haz clic en Acciones y selecciona Copiar fragmento.

• Pega el fragmento en el campo HTML del módulo.

Una vez agregados a una página, los creadores de contenido suelen tener control sobre muchos aspectos del formulario, incluido qué formulario usar y los campos del formulario en sí. Sin embargo, puedes limitar la cantidad de control dada en el editor de páginas modificando el archivo fields.json del módulo de formulario localmente para incluir los siguientes campos:

Por ejemplo, si has creado un módulo que solo debe usarse para formularios que permiten a los visitantes ponerse en contacto con los diversos departamentos de servicios de tu empresa, podrías permitir que los creadores de contenido solo puedan seleccionar formularios que utilicen propiedades de tickets.

Si bien HubSpot ofrece un estilo de formulario desde una configuración global y un nivel de configuración específico del formulario, también puedes diseñar un formulario dependiendo de cómo se agregue a tus páginas de CMS.

Los formularios de HubSpot agregados a las páginas de HubSpot se pueden diseñar utilizando el CSS de tu sitio web. HubSpot incluye varias clases y atributos diferentes en los formularios que se generan donde se puede aplicar el estilo. Como punto de partida, consulta el formulario CSS de HubSpot Boilerplate, que representa las mejores prácticas sobre cómo diseñar formularios.

Los formularios dentro de los módulos personalizados pueden ser diseñados por CSS en el panel CSS del módulo dentro del administrador de diseño. Al mantener el alcance de CSS en el módulo, puedes asegurarte de que cada vez que se agrega el módulo a una página, el estilo viene con él. Se recomienda agregar un envoltorio al formulario y luego usar ese envoltorio como el selector de nivel superior para el CSS. Esto evitará que el estilo de formulario de tu módulo personalizado se sobrescriba con estilos adicionales en la hoja de estilos principal de tu sitio web. A continuación se muestra una captura de pantalla del módulo personalizado desde arriba con el estilo de formulario agregado al panel CSS.

Diseño de formularios agregados a través del código de incrustación de formulario

Al usar el código de incrustación del formulario, puedes diseñar el formulario usando la configuración de estilo global del formulario o usando el CSS de tu sitio web.

El uso de la configuración de estilo de formulario global te permite configurar los ajustes predeterminados para cada formulario en la cuenta. También puedes anular estos estilos en un formulario individual dentro del editor de formularios.

Si tienes una suscripción a Marketing Hub o CMS Hub Pro o Enterprise, puedes seleccionar la opción Establecer como formulario HTML sin formato al crear un formulario. Esta configuración hace que el formulario se represente como HTML en lugar de un iframe, lo que facilita el estilo del formulario incrustado con CSS. 

Más información sobre el estilo de formularios incrustados en la Base de conocimientos.