Skip to content

Integrar HubSpot con formularios creados con Elementor en WordPress es una forma eficiente de capturar datos de leads y sincronizarlos automáticamente con tu CRM. Aquí tienes un paso a paso detallado para realizar esta integración:

1. Usar el Plugin de HubSpot para WordPress

Este método es ideal si quieres utilizar las herramientas nativas de HubSpot para gestionar los formularios y sincronizar automáticamente los datos con tu CRM.

Paso 1: Instalar el plugin de HubSpot

  1. Ve a tu panel de control de WordPress.
  2. Dirígete a Plugins > Añadir nuevo.
  3. Busca HubSpot en la barra de búsqueda.
  4. Instala y activa el plugin oficial de HubSpot – CRM, Email Marketing, Live Chat, Forms.

Paso 2: Conectar tu cuenta de HubSpot

  1. Una vez activado el plugin, verás un nuevo menú en el panel de WordPress llamado HubSpot.
  2. Haz clic en él y sigue las instrucciones para iniciar sesión en tu cuenta de HubSpot. Si no tienes una cuenta, puedes crear una gratuita.

Paso 3: Crear formularios en HubSpot (opcional)

  1. Dentro de tu panel de HubSpot, accede a Marketing > Captura > Formularios.
  2. Crea un formulario personalizado o elige uno predefinido.
  3. Configura los campos necesarios (por ejemplo, nombre, correo, teléfono) y personaliza el estilo.

Paso 4: Sincronizar con Elementor

  • Si prefieres usar los formularios de HubSpot directamente, puedes incrustarlos en Elementor utilizando un shortcode proporcionado por HubSpot.

2. Integrar Formularios de Elementor con HubSpot

Opción A: Usar un Plugin de Terceros

Paso 1: Instalar un plugin conector

  1. En tu panel de WordPress, ve a Plugins > Añadir nuevo.
  2. Busca plugins como:
  3. Instala y activa el plugin que elijas.

Paso 2: Configurar el plugin

  1. Accede al panel de configuración del plugin.
  2. Conecta tu cuenta de HubSpot:
    • Introduce tu clave API de HubSpot. Para obtenerla:
      • Ve a HubSpot y accede a Configuración > Integraciones > API key.
      • Genera una nueva clave si aún no tienes una.
    • Copia y pega esta clave en el plugin de WordPress.

Paso 3: Mapear los campos de Elementor

  1. Crea un formulario en Elementor o edita uno existente.
  2. En la configuración del plugin conector, selecciona el formulario de Elementor que deseas conectar.
  3. Mapea los campos del formulario de Elementor con los campos de HubSpot:
    • Por ejemplo, el campo “Nombre” del formulario se vincula al campo “Nombre” de HubSpot.

Paso 4: Probar la integración

  1. Rellena un formulario de prueba.
  2. Verifica que los datos se han transferido correctamente a HubSpot.

Opción B: Usar Webhooks

Paso 1: Configurar el formulario en Elementor

  1. Crea un formulario con Elementor Pro:
    • Ve a Elementor > Plantillas > Formularios.
    • Arrastra el widget Formulario a tu página.
    • Diseña el formulario añadiendo los campos necesarios.
  2. En la configuración del formulario:
    • En Acciones tras el envío, selecciona la opción Webhook.
    • Añade la URL del webhook que gestionará la información (puede ser HubSpot directamente o un servicio como Zapier o Make).

Paso 2: Configurar HubSpot o un servicio intermedio

  • Si HubSpot acepta webhooks directamente:
    • Configura en HubSpot un punto final para recibir datos (normalmente esto requiere un plan de HubSpot que permita integraciones avanzadas).
  • Si usas Zapier o Make:
    1. Configura un “Zap” o un “escenario” que reciba los datos del webhook.
    2. Mapea los campos entrantes del formulario con los campos de HubSpot.
    3. Establece la acción para enviar los datos a HubSpot.

Opción C: Usar Zapier

Paso 1: Configurar el formulario en Elementor

  1. Crea o edita un formulario con Elementor Pro, como se explicó antes.
  2. Asegúrate de que el formulario esté bien diseñado y con los campos requeridos.

Paso 2: Conectar Zapier

  1. Ve a Zapier y crea un nuevo Zap.
  2. Configura el desencadenante:
    • Elige Elementor como aplicación.
    • Selecciona el evento de desencadenante (por ejemplo, “Formulario enviado”).
  3. Configura la acción:
    • Selecciona HubSpot como aplicación de destino.
    • Elige la acción deseada (por ejemplo, “Crear/Actualizar Contacto”).
  4. Mapea los campos del formulario con los campos de HubSpot.

Paso 3: Probar la conexión

  1. Envía un formulario de prueba desde Elementor.
  2. Revisa Zapier para asegurarte de que el flujo funcione correctamente.
  3. Verifica en HubSpot que los datos se han sincronizado.

3. Probar y Verificar la Integración

  1. Rellena un formulario en tu sitio de prueba.
  2. Comprueba en HubSpot si los datos aparecen en el módulo de contactos.
  3. Ajusta cualquier campo mapeado o configuración adicional si notas discrepancias.