Tutorial 6 min •

Integrar Prospect Hub a sus formularios de contacto: guía técnica

Conecte sus formularios web a Prospect Hub. Reciba automáticamente sus leads desde su sitio. Guía con ejemplos de código HTML y JavaScript.

PH

Equipo Prospect Hub - Christophe Picciotto

Prospect Hub

Integrar Prospect Hub a sus formularios de contacto: guía técnica

Centralice todos sus leads automáticamente

Su sitio genera solicitudes de contacto. Su formulario funciona, los emails llegan… a algún lugar. ¿Pero luego?

Tiene que copiar-pegar la información en una hoja de cálculo. O peor, trata las solicitudes directamente desde su correo, sin seguimiento, sin historial, sin organización.

El 65% de los leads web se pierden por falta de tratamiento en las 24 horas. El problema no es el formulario, es lo que viene después.

Con la integración CRM formulario de Prospect Hub, cada envío llega directamente a su pipeline. Sin copiar-pegar, sin leads olvidados. En esta guía técnica, le muestro cómo conectar cualquier formulario web a su CRM de prospección — en unas pocas líneas de código.

Prerrequisito: obtener su clave API

Antes de modificar su formulario, debe recuperar su clave API leads personal.

Paso 1: Acceder a las integraciones

  1. Conéctese a su cuenta Prospect Hub
  2. Haga clic en Configuración en el menú
  3. Seleccione la pestaña Integraciones

Paso 2: Crear una clave API

En la página de integraciones, encontrará la sección Claves API.

  1. Haga clic en Crear una nueva clave
  2. Dele un nombre descriptivo (ej: “Formulario sitio principal”)
  3. Haga clic en Generar

Paso 3: Copiar la clave

Su clave aparece en formato pk_xxxxxxxxxxxxxxxxxxxxx. Siempre empieza por pk_ (de public key).

Importante: Esta clave permite únicamente crear leads. No da acceso a sus datos existentes. Puede usarla con total seguridad en código del lado del cliente.

Guarde esta clave a mano, la necesitará para los pasos siguientes.

Opción 1: Formulario HTML simple

Es el método más rápido. Un formulario clásico que envía directamente los datos a Prospect Hub.

Código completo del formulario

<form
  action="https://prospect-hub.app/api/public/leads"
  method="POST"
>
  <!-- Clave API (obligatoria) -->
  <input type="hidden" name="_api_key" value="pk_su_clave_aqui" />

  <!-- Redirección después del envío -->
  <input type="hidden" name="_redirect" value="https://susitio.com/gracias" />

  <!-- Protección anti-spam (honeypot) -->
  <input type="text" name="_gotcha" style="display:none" />

  <!-- Campos del formulario -->
  <div>
    <label for="name">Nombre completo</label>
    <input type="text" id="name" name="name" required />
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>

  <div>
    <label for="phone">Teléfono</label>
    <input type="tel" id="phone" name="phone" />
  </div>

  <div>
    <label for="message">Mensaje</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>

  <button type="submit">Enviar mi solicitud</button>
</form>

Campos soportados por la API leads

Aquí tiene todos los campos que Prospect Hub reconoce automáticamente:

Nombre del campoTipoDescripción
nametextoNombre completo del contacto
emailemailDirección de email
phonetelNúmero de teléfono
messagetextareaMensaje o comentario
addresstextoDirección postal
citytextoCiudad
postalCodetextoCódigo postal
subjecttextoAsunto (almacenado en formData)

Todos los campos son opcionales excepto name o email (al menos uno de los dos es necesario para identificar el lead).

Protección anti-spam integrada

El campo _gotcha es un honeypot invisible: los bots lo rellenan automáticamente, los humanos no lo ven. Pero es solo la primera línea de defensa. Prospect Hub aplica en realidad 9 capas de protección en cada envío, incluyendo un análisis IA del contenido para bloquear el spam que los honeypots no detectan.

Redirección después del envío

El campo _redirect define adónde será redirigido el usuario después de enviar el formulario. Cree una página de agradecimiento en su sitio para confirmar la recepción.

<input type="hidden" name="_redirect" value="https://susitio.com/gracias" />

Si no especifica redirección, el usuario verá un mensaje de confirmación genérico de Prospect Hub.

Opción 2: JavaScript con fetch API

Para una experiencia de usuario más fluida (sin recarga de página), use JavaScript.

Código completo con async/await

const form = document.getElementById('contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const submitBtn = form.querySelector('button[type="submit"]');
  const originalText = submitBtn.textContent;

  // Feedback visual
  submitBtn.disabled = true;
  submitBtn.textContent = 'Enviando...';

  // Recopilar los datos
  const formData = new FormData(form);

  // Añadir la clave API
  formData.append('_api_key', 'pk_su_clave_aqui');

  try {
    const response = await fetch('https://prospect-hub.app/api/public/leads', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error('Error del servidor');
    }

    const result = await response.json();

    // Éxito: mostrar confirmación
    form.innerHTML = `
      <div class="success-message">
        <h3>¡Gracias por su mensaje!</h3>
        <p>Le responderemos lo antes posible.</p>
      </div>
    `;

  } catch (error) {
    // Error: reactivar el formulario
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Ha ocurrido un error. Inténtelo de nuevo.');
    console.error('Error formulario:', error);
  }
});

Ventajas del método JavaScript

Este enfoque ofrece varios beneficios:

Formato de respuesta de la API

En caso de éxito, la API leads devuelve:

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead creado con éxito"
}

En caso de error:

{
  "success": false,
  "error": "Clave API inválida"
}

Campos ocultos útiles

Más allá de la información de contacto, puede enriquecer sus leads con datos de tracking.

Fuente del lead (UTM)

Identifique de dónde vienen sus visitantes:

<input type="hidden" name="source" id="utm-source" />

<script>
  // Recuperar el parámetro UTM de la URL
  const urlParams = new URLSearchParams(window.location.search);
  const utmSource = urlParams.get('utm_source') || 'sitio-web';
  document.getElementById('utm-source').value = utmSource;
</script>

Página de origen

Saber en qué página se rellenó el formulario:

<input type="hidden" name="formData[page]" id="page-origin" />

<script>
  document.getElementById('page-origin').value = window.location.pathname;
</script>

Esta información aparecerá en la ficha del lead, permitiéndole analizar qué páginas convierten mejor.

Probar su integración

Antes de poner en producción, valide que todo funciona.

Test en local

  1. Abra su formulario en un navegador
  2. Rellene todos los campos con datos de prueba
  3. Envíe el formulario
  4. Verifique en Prospect Hub que el lead aparece

Verificaciones a hacer

Herramientas de desarrollo

Use la pestaña Red de su navegador (F12) para ver la solicitud enviada. Debería ver:

Resolución de problemas: errores comunes

Aquí tiene los problemas más frecuentes y sus soluciones.

Error “Clave API inválida”

Causa: La clave pk_xxx es incorrecta o expirada.

Solución: Verifique en Configuración > Integraciones que la clave esté activa. Cópiela de nuevo asegurándose de no tener espacios antes o después.

Error “CORS”

Causa: El navegador bloquea la solicitud cross-origin.

Solución: La API Prospect Hub acepta solicitudes de cualquier origen. Si ve este error, verifique que usa bien https:// (no http://) y que la URL es correcta.

Lead creado pero incompleto

Causa: Los nombres de los campos no corresponden.

Solución: Use exactamente los nombres listados en la tabla de campos soportados. Por ejemplo, name (no nombre), phone (no telefono).

Formulario que no se envía

Causa: Error JavaScript que bloquea la ejecución.

Solución: Abra la consola del navegador (F12 > Console) para ver los errores. Corríjalos antes de reintentar.

Conclusión: automatice su generación de leads

La integración CRM formulario con Prospect Hub transforma cada visita en oportunidad trazable:

  1. Obtenga su clave API en la configuración
  2. Añada el código a su formulario (HTML o JavaScript)
  3. Pruebe el envío
  4. Reciba sus leads automáticamente

Sin necesidad de vigilar un correo, de copiar-pegar en una hoja de cálculo, o de perder prospectos por falta de organización. Cada lead llega directamente a su pipeline, listo para ser contactado.

Descubra todas las funcionalidades de Prospect Hub para maximizar su prospección, o consulte nuestras tarifas simples para elegir la fórmula adaptada a su actividad.

¿Listo para conectar su formulario? Cree su cuenta gratuita y obtenga su clave API en segundos.

Para recordar:

Etiquetas: formulario integración api html javascript leads
Siguiente articulo 5 plantillas de emails de prospección que realmente convierten
Volver al blog

Listo para pasar a la accion?

Crea tu cuenta gratuita y comienza a organizar tu prospeccion ahora. 300 leads incluidos, sin tarjeta de credito.

Crear mi cuenta gratis Descubrir funcionalidades