Formularios de HubSpot

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Starter or Enterprise
  • Sales Hub
    • Starter, Professional, or Enterprise
  • Service Hub
    • Starter, Professional, or Enterprise
  • CMS Hub
    • Professional or Enterprise

Usa los formularios de HubSpot para capturar información de los usuarios, a la que puedes acceder a través de HubSpot. Los datos de formulario capturados se pueden usar en materiales como contenido inteligente, listas, workflows, personalización de contenido y más.

Los formularios son una parte central de la suite HubSpot y se pueden crear en una cuenta de HubSpot de cualquier nivel de suscripción. 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.

En esta guía, aprende más sobre cómo incorporar formularios en tu sitio web con el CMS. Para saber cómo crear formularios en HubSpot, echa un vistazo a la Base de conocimientos de HubSpot.

Adición de formularios a las páginas del sitio web

Después de crear un formulario de HubSpot, puedes agregarlo a tus plantillas y páginas. Hay varias maneras de agregar un formulario a una plantilla y la que elijas depende de tu ejemplo de uso. A continuación, descubre cómo agregar formularios a una plantilla usando los siguientes métodos:

Uso del módulo del formulario

Al usar el módulo de formulario predeterminado, los creadores de contenido pueden seleccionar formularios y configurar opciones de formulario dentro del editor de páginas. Para habilitar esto, puedes agregar el módulo de formulario a un área de arrastrar y soltar en su plantilla.   

{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} <!-- Form module tag for use in templates --> {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

Si no estás usando un área de arrastrar y soltar en tu plantilla codificada, puedes generar el módulo de formularios con la siguiente sintaxis Con esta etiqueta, también puede especificar los detalles del formulario, como establecer un formulario específico o sus opciones de redireccionamiento. Puedes obtener más información sobre cómo usar la etiqueta HubL de formulario en la sección a continuación.

{% module "form" path="@hubspot/form" %}

Usar un módulo personalizado

Hay algunos casos en los que puedes estar creando un módulo personalizado que incorpora un formulario junto con otro contenido, como imágenes o bloques de texto. Para hacerlo, puedes usar el campo formulario o clonar el módulo de formulario existente y construir tu nuevo módulo desde allí como punto de partida. 

El campo del formulario es una versión más simple del módulo del formulario que le proporciona una funcionalidad básica del formulario , incluyendo:

Opciones Descripción
Menú desplegable de selección de formulario Un menú desplegable que permite a los creadores de contenido seleccionar un formulario existente. 
Redirección de envío de formularios Una opción para elegir si el remitente será redirigido o se le mostrará un mensaje de agradecimiento en línea en el envío del formulario.
Enlace de redireccionamiento Si eliges redirigir a un usuario, puedes introducir la URL de la página a la que el usuario será redirigido
Mensaje de agradecimiento Si eliges mostrar un mensaje de agradecimiento en línea, puedes ingresar tu mensaje aquí.

Puedes agregar el campo del formulario a un módulo del administrador de diseño seleccionándolo a través de las opciones Agregar campo > Selectores > Formulario.

Agregar el campo del formulario a tu módulo

Desde allí, puedes copiar el fragmento de código para que el campo de formulario se agregue a tu módulo personalizado seleccionando Acciones > Copiar fragmento al colocar el cursor sobre el campo en el editor.

copia el fragmento del formulario para tu campo

Si eliges clonar el módulo de formulario predeterminado, obtendrás todo desde el campo de formulario anterior, incluyendo.

Opciones Descripción
Título Agrega el que se mostrará encima del formulario cuando se represente.
Anulación de notificación por correo electrónico Un interruptor que te permitirá anular la dirección de correo electrónico predeterminada para las notificaciones del formulario. Si está activado, verás un campo de texto para agregar las nuevas direcciones de correo electrónico.
Agregar al workflow Un interruptor que te permitirá inscribir los envíos en el workflow deseado. Si se activa, se te mostrará un menú desplegable para elegir un workflow.
Correo electrónico de seguimiento Un interruptor que te permitirá enviar un correo electrónico de seguimiento una vez que se haya enviado el formulario. Si se activa, se te mostrará un menú desplegable para elegir un correo electrónico de seguimiento. Si no existe uno, se te dará la opción de crear una nueva.
Campaña de Salesforce Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. Solo disponible si la integración de Salesforce está instalada.
Enlace de GoToWebinar Especifica el seminario web de GoToWebinar en el que se inscribirán los contactos que envíen el formulario. Solo disponible si la integración de GoToWebinar está instalada.

Además, puedes crear tu formulario con opciones adicionales que se pueden usar junto con el módulo de formulario predeterminado. A continuación se muestra un ejemplo de un módulo clonado predeterminado envuelto en una <section> etiqueta y con un campo de color adicional para agregar un color de fondo a la sección.

Adición al módulo de formulario clonado

Usar la etiqueta HubL del formulario

El campo de formulario de módulo genera una etiqueta de formulario HubL cuando copias un fragmento, tal como se mencionó anteriormente. La etiqueta HubL tiene muchos parámetros que puedes proporcionar. Es más fácil usar el fragmento de copia cuando se trabaja desde el administrador de diseño. Cuando trabajes a nivel local, consulta la documentación de etiquetas HubL, la cual detalla todos los parámetros disponibles.

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}

Usar el código de incrustación del formulario

Puedes usar un código de incrustación de JavaScript para agregar un formulario a una página donde un módulo o etiqueta HubL no es ideal, como en páginas externas. Usando este método, también puedes extender la funcionalidad del formulario a través de opciones avanzadas. A continuación se muestra un ejemplo del código de incrustación del formulario con funcionalidad extendida. 

<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "[YourPortalIdHere]", formId: "00000000-0000-0000-0000-000000000000", cssClass: "class-applied-to-form", submitButtonClass: "class-applied-to-submit-button", onFormSubmit: function($form) { // YOUR SCRIPT HERE } }); </script>

Estilo de formulario

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.

Nota: todos los formularios generados en el CMS de HubSpot (excluyendo el uso del código de incrustación del formulario) ignorarán cualquier estilo que se configure a través de los ajustes globales del formulario o los ajustes individuales del formulario. 

Formularios de estilo agregados a través del módulo de formulario predeterminado o la etiqueta HubL

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.

Formularios de estilo agregados a través de un módulo personalizado

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.

Módulo personalizado con 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.

Estilos de formulario globales

Al elegir el estilo del formulario utilizando el CSS de tu sitio web, primero debes activar la opción Establece como formulario HTML sin formato dentro del editor de formularios. Esto permite que el formulario se represente en la página como HTML en lugar de un iframe, lo que facilita el estilo. Más información sobre el estilo de formularios incrustados en la Base de conocimientos.

Establecer como formulario HTML sin formato

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.