Tutoriel 6 min •

Intégrer Prospect Hub à vos formulaires de contact : guide technique

Connectez vos formulaires web à Prospect Hub. Recevez automatiquement vos leads depuis votre site. Guide avec exemples de code HTML et JavaScript.

PH

Équipe Prospect Hub - Christophe Picciotto

Prospect Hub

Intégrer Prospect Hub à vos formulaires de contact : guide technique

Centralisez tous vos leads automatiquement

Votre site génère des demandes de contact. Votre formulaire fonctionne, les emails arrivent… quelque part. Mais ensuite ?

Vous devez copier-coller les informations dans un tableur. Ou pire, vous traitez les demandes directement depuis votre boîte mail, sans suivi, sans historique, sans organisation.

65% des leads web sont perdus faute de traitement dans les 24 heures. Le problème n’est pas le formulaire, c’est ce qui vient après.

Avec l’intégration CRM formulaire de Prospect Hub, chaque soumission arrive directement dans votre pipeline. Plus de copier-coller, plus de leads oubliés. Dans ce guide technique, je vous montre comment connecter n’importe quel formulaire web à votre CRM prospection — en quelques lignes de code.

Prérequis : obtenir votre clé API

Avant de modifier votre formulaire, vous devez récupérer votre clé API leads personnelle.

Étape 1 : Accéder aux intégrations

  1. Connectez-vous à votre compte Prospect Hub
  2. Cliquez sur Paramètres dans le menu
  3. Sélectionnez l’onglet Intégrations

Étape 2 : Créer une clé API

Sur la page des intégrations, vous trouverez la section Clés API.

  1. Cliquez sur Créer une nouvelle clé
  2. Donnez-lui un nom descriptif (ex: “Formulaire site principal”)
  3. Cliquez sur Générer

Étape 3 : Copier la clé

Votre clé apparaît au format pk_xxxxxxxxxxxxxxxxxxxxx. Elle commence toujours par pk_ (pour public key).

Important : Cette clé permet uniquement de créer des leads. Elle ne donne pas accès à vos données existantes. Vous pouvez l’utiliser en toute sécurité dans du code côté client.

Gardez cette clé à portée de main, vous en aurez besoin pour les étapes suivantes.

Option 1 : Formulaire HTML simple

C’est la méthode la plus rapide. Un formulaire classique qui envoie directement les données vers Prospect Hub.

Code complet du formulaire

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

  <!-- Redirection après soumission -->
  <input type="hidden" name="_redirect" value="https://votresite.fr/merci" />

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

  <!-- Champs du formulaire -->
  <div>
    <label for="name">Nom complet</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">Téléphone</label>
    <input type="tel" id="phone" name="phone" />
  </div>

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

  <button type="submit">Envoyer ma demande</button>
</form>

Champs supportés par l’API leads

Voici tous les champs que Prospect Hub reconnaît automatiquement :

Nom du champTypeDescription
nametexteNom complet du contact
emailemailAdresse email
phonetelNuméro de téléphone
messagetextareaMessage ou commentaire
addresstexteAdresse postale
citytexteVille
postalCodetexteCode postal
subjecttexteSujet (stocké dans formData)

Tous les champs sont optionnels sauf name ou email (au moins l’un des deux est requis pour identifier le lead).

Protection anti-spam intégrée

Le champ _gotcha est un honeypot invisible : les bots le remplissent automatiquement, les humains ne le voient pas. Mais ce n’est que la première ligne de défense. Prospect Hub applique en réalité 9 couches de protection sur chaque soumission, dont une analyse IA du contenu pour bloquer le spam que les honeypots ne détectent pas.

Redirection après soumission

Le champ _redirect définit où l’utilisateur sera redirigé après avoir soumis le formulaire. Créez une page de remerciement sur votre site pour confirmer la réception.

<input type="hidden" name="_redirect" value="https://votresite.fr/merci" />

Si vous ne spécifiez pas de redirection, l’utilisateur verra un message de confirmation générique de Prospect Hub.

Option 2 : JavaScript avec fetch API

Pour une expérience utilisateur plus fluide (sans rechargement de page), utilisez JavaScript.

Code complet avec 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 visuel
  submitBtn.disabled = true;
  submitBtn.textContent = 'Envoi en cours...';

  // Collecter les données
  const formData = new FormData(form);

  // Ajouter la clé API
  formData.append('_api_key', 'pk_votre_cle_ici');

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

    if (!response.ok) {
      throw new Error('Erreur serveur');
    }

    const result = await response.json();

    // Succès : afficher confirmation
    form.innerHTML = `
      <div class="success-message">
        <h3>Merci pour votre message !</h3>
        <p>Nous vous répondrons dans les plus brefs délais.</p>
      </div>
    `;

  } catch (error) {
    // Erreur : réactiver le formulaire
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;

    alert('Une erreur est survenue. Veuillez réessayer.');
    console.error('Erreur formulaire:', error);
  }
});

Avantages de la méthode JavaScript

Cette approche offre plusieurs bénéfices :

Format de réponse de l’API

En cas de succès, l’API leads retourne :

{
  "success": true,
  "leadId": "lead_abc123xyz",
  "message": "Lead créé avec succès"
}

En cas d’erreur :

{
  "success": false,
  "error": "Clé API invalide"
}

Champs cachés utiles

Au-delà des informations de contact, vous pouvez enrichir vos leads avec des données de tracking.

Source du lead (UTM)

Identifiez d’où viennent vos visiteurs :

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

<script>
  // Récupérer le paramètre UTM de l'URL
  const urlParams = new URLSearchParams(window.location.search);
  const utmSource = urlParams.get('utm_source') || 'site-web';
  document.getElementById('utm-source').value = utmSource;
</script>

Page d’origine

Savoir sur quelle page le formulaire a été rempli :

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

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

Ces informations apparaîtront dans la fiche du lead, vous permettant d’analyser quelles pages convertissent le mieux.

Tester votre intégration

Avant de mettre en production, validez que tout fonctionne.

Test en local

  1. Ouvrez votre formulaire dans un navigateur
  2. Remplissez tous les champs avec des données de test
  3. Soumettez le formulaire
  4. Vérifiez dans Prospect Hub que le lead apparaît

Vérifications à faire

Outils de développement

Utilisez l’onglet Réseau de votre navigateur (F12) pour voir la requête envoyée. Vous devriez voir :

Dépannage : erreurs courantes

Voici les problèmes les plus fréquents et leurs solutions.

Erreur “Clé API invalide”

Cause : La clé pk_xxx est incorrecte ou expirée.

Solution : Vérifiez dans Paramètres > Intégrations que la clé est active. Copiez-la à nouveau en vous assurant de ne pas avoir d’espace avant ou après.

Erreur “CORS”

Cause : Le navigateur bloque la requête cross-origin.

Solution : L’API Prospect Hub accepte les requêtes de n’importe quelle origine. Si vous voyez cette erreur, vérifiez que vous utilisez bien https:// (pas http://) et que l’URL est correcte.

Lead créé mais incomplet

Cause : Les noms des champs ne correspondent pas.

Solution : Utilisez exactement les noms listés dans le tableau des champs supportés. Par exemple, name (pas nom), phone (pas telephone).

Formulaire ne se soumet pas

Cause : Erreur JavaScript qui bloque l’exécution.

Solution : Ouvrez la console du navigateur (F12 > Console) pour voir les erreurs. Corrigez-les avant de réessayer.

Conclusion : automatisez votre génération de leads

L’intégration CRM formulaire avec Prospect Hub transforme chaque visite en opportunité traçable :

  1. Obtenez votre clé API dans les paramètres
  2. Ajoutez le code à votre formulaire (HTML ou JavaScript)
  3. Testez la soumission
  4. Recevez vos leads automatiquement

Plus besoin de surveiller une boîte mail, de copier-coller dans un tableur, ou de perdre des prospects par manque d’organisation. Chaque lead arrive directement dans votre pipeline, prêt à être contacté.

Découvrez toutes les fonctionnalités de Prospect Hub pour maximiser votre prospection, ou consultez nos tarifs simples pour choisir la formule adaptée à votre activité.

Prêt à connecter votre formulaire ? Créez votre compte gratuit et obtenez votre clé API en quelques secondes.

À retenir :

Tags : formulaire intégration api html javascript leads
Article suivant 5 templates d'emails de prospection qui convertissent vraiment
Retour au blog

Prêt à passer à l'action ?

Créez votre compte gratuitement et commencez à organiser votre prospection dès maintenant. 300 leads inclus, aucune carte bancaire requise.

Créer mon compte gratuit Découvrir les fonctionnalités