Última modificación: 28 de agosto de 2025
Usa los formularios de HubSpot para recoger información de los visitantes del sitio web, a la que luego puedes acceder en HubSpot. Puedes compartir enlaces a formularios directamente con los usuarios, enviar datos de formularios a través de la API e insertarlos en las páginas de tu sitio web utilizando el CMS. Los formularios son una parte fundamental de la suite de HubSpot y se pueden crear en cuentas de HubSpot con cualquier 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 en contenido inteligente, en listas, en workflows, en la personalización de contenido y en otros contextos. Después de crear un formulario de HubSpot, puedes agregarlo a tus plantillas y a tus páginas. Hay varias formas de agregar un formulario a una plantilla, dependiendo de cómo vayas a usarlo:

​
El módulo de formulario predeterminado

Si tu plantilla tiene áreas de arrastrar y soltar, los creadores de contenido pueden agregar el módulo de formulario predeterminado a una página desde el editor de páginas y, a continuación, configurar las opciones de formulario en la barra lateral izquierda. Para codificar un módulo de formulario directamente en una plantilla con áreas de arrastrar y soltar, haz referencia al módulo como dnd_module. 
{% 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 %}
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. 
{% 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"
 }
%}
Con cualquier implementación, puedes agregar parámetros a la etiqueta del módulo para especificar determinados ajustes, como el formulario que se va 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, ve a la carpeta @hubspot, luego haz clic con el botón derecho en form.module y selecciona Clonar módulo.
clonar módulo del formulario
  • 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:{{ module.color_field.color }}">
clonar sección del módulo predeterminado

​
Campos de formulario en módulos personalizados

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, puede que quieras 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 administrador de diseño:
  • En la barra lateral derecha del editor de módulos, haz clic en Agregar campo y luego selecciona Formulario.
campo de selección de formulario del administrador de diseño
  • 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.
copiar fragmento en el campo del módulo
  • Pega el fragmento en el campo HTML del módulo.
pegar fragmento en el campo del módulo

​
Limitar las opciones de formulario en el editor

Una vez que el módulo se agrega a una página, los creadores de contenido suelen tener control sobre muchos aspectos, incluido qué formulario usar y los campos del formulario en sí. Sin embargo, puedes limitar la cantidad de control dado en el editor de páginas modificando el archivo fields.json del módulo de formulario localmente para incluir los siguientes campos:
ParámetroTipoDescripción
disable_inline_form_editingCadenaDefine la propiedaddisable_inline_form_editing como true para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA.
required_property_typesMatrizUna matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: "CONTACT", "COMPANY", y "TICKET".
Por ejemplo, si has creado un módulo que solo debe usarse con formularios que permiten a los visitantes ponerse en contacto con los diversos departamentos de tu empresa, podrías permitir que los creadores de contenido solo puedan seleccionar formularios que utilicen propiedades de tickets. 
// Form field
{
  "id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
  "name": "form_field_1",
  "display_width": null,
  "label": "Form",
  "required": false,
  "locked": false,
  "type": "form",
  "disable_inline_form_editing": true,
  "required_property_types": ["TICKET"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

​
Usar el código de inserción del formulario

Cuando un módulo o etiqueta de HubL no es la opción ideal, o si quieres agregar un formulario a una página externa, puedes insertarlo con el código de inserción del formulario. También puedes personalizar ese código de inserción para que el formulario sea más funcional. Puedes consultar todas las opciones de personalización del código de inserción del formulario y otra información relevante en la guía de referencia de formularios.

​
Nota:

  • Las opciones de personalización de formularios solo están disponibles para formularios creados en HubSpot que se han configurado como HTML sin formato. La cuenta de HubSpot debe tener una suscripción a Marketing Hub o a Content Hub Pro o Enterprise.
  • Los formularios de HubSpot solo deben cargarse utilizando el archivo JavaScript alojado en HubSpot. No se puede hacer una copia del código de inserción del formulario y autoalojarlo. Si decides autoalojar el código de inserción, las mejoras que HubSpot aplique para mejorar la seguridad, el antispam, la accesibilidad y el rendimiento no se propagarán a tu formulario.
A continuación se muestra un ejemplo de un código de incrustación del formulario sin ninguna personalización. 
<script
  charset="utf-8"
  type="text/javascript"
  src="//js.hsforms.net/forms/embed/v2.js"
></script>
<script>
  hbspt.forms.create({
    region: 'na1',
    portalId: '123456',
    formId: 'df93f0c1-2919-44ef-9446-6a29f9a7f',
  });
</script>
ParámetroTipoDescripción
portalIdNúmero o cadenaEl ID de la cuenta de HubSpot en la que se creó el formulario. Se utiliza para obtener la definición del formulario.
formIdCadenaEl ID del formulario, que se utiliza para recuperar la definición del formulario.
regionCadenaLa región de la cuenta donde se creó el formulario. Se utiliza para obtener la definición del formulario. Los valores posibles son na1 o eu1.

​
Añadir internacionalización

De forma predeterminada, HubSpot incluye una serie de mensajes de validación en muchos idiomas diferentes, a los que puedes acceder utilizando el parámetro locale. También puedes agregar idiomas personalizados o anular los mensajes de error y los meses/días del selector de fechas que se muestran en el formulario utilizando el parámetro translation. Obtén más información sobre la internacionalización y los mensajes de error de validación de formularios en la documentación de referencia de los formularios. 
hbspt.forms.create({
  portalId: '',
  formId: '',
  locale: 'en',
  translations: {
    en: {
      fieldLabels: {
        email: 'Electronic mail',
      },
      required: "Hey! That's required!",
      submitText: 'Custom Submit Button Text',
      submissionErrors: {
        MISSING_REQUIRED_FIELDS: 'Please fill in all required fields!',
      },
    },
  },
});

​
Eventos de formulario

Hay dos maneras de vincular la funcionalidad a los eventos en formularios: usar devoluciones de llamada en el código de inserción del formulario de HubSpot y usar eventos de formulario globales. Puedes consultar más información sobre las devoluciones de llamada del código de inserción del formulario y los eventos de formulario globales en la documentación de referencia de formularios. 
// Example form embed code callback
hbspt.forms.create({
  portalId: '',
  formId: '',
  onBeforeFormSubmit: function ($form) {
    // YOUR SCRIPT HERE
  },
});

// Example listener
window.addEventListener('message', (event) => {
  if (
    event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFormSubmitted'
  ) {
    someAnalyticsLib('formSubmitted');
    console.log('Form Submitted! Event data: ${event.data}');
  }
});

​
Estilos de formulario

Si bien HubSpot ofrece estilos que se aplican de forma global y estilos que se aplican sobre formularios específicos, también puedes diseñar un formulario según cómo se agregue a las páginas de tu CMS.

​
Nota:

Todos los formularios generados en el CMS de HubSpot (excepto el uso del código de inserción de formularios) ignorarán cualquier estilo que se defina mediante los ajustes globales o los ajustes individuales del formulario.

​
Dar estilo a formularios con el módulo predeterminado o la etiqueta de 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 opciones de estilo. Como punto de partida, consulta información sobre el boilerplate de HubSpot para CSS de formularios, donde encontrarás las prácticas recomendadas para diseñar formularios.

​
Dar estilo a formularios con un módulo personalizado

Los formularios de los módulos personalizados pueden diseñarse con CSS en el panel CSS del módulo, en el administrador de diseño. Al limitar el ámbito del CSS al 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 del CSS. Esto evitará que los estilos de formulario del 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 con los estilos de formulario agregados al panel CSS.
Módulo personalizado con CSS

​
Definir estilos personalizados para formularios insertados

Si tienes una suscripción Marketing Hub o CMS Hub Pro o Enterprise, puedes utilizar definiciones de variables CSS para definir estilos globales, personalizar botones y otras entradas, así como dar estilo a tus formularios de varios pasos y barras de progreso. Obtén más información sobre cómo aplicar definiciones CSS personalizadas a tu formulario insertado.

​
Estilo de formularios agregados a través del código de inserción de formulario

Al usar el código de inserción de formulario, puedes diseñar el formulario usando la los ajustes de estilo globales o el CSS de tu sitio web. Los ajustes globales permiten configurar las opciones predeterminadas de cada formulario de la cuenta. También puedes sobrescribir o anular estos estilos con otros en un formulario individual dentro del editor de formularios.
Estilos de formulario globales
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. Consulta en la base de conocimientos más información sobre cómo dar estilos a los formularios insertados.
Definir como formulario HTML sin formato