Une landing page isolée, destinée à une seule campagne publicitaire de trois mois, ne justifie pas toujours d’installer un plugin de formulaire complet sur un site en éditeur de site qui n’en avait pas besoin jusque-là. C’est le constat qui a guidé ce projet pour une entreprise de services B2B utilisant HubSpot comme CRM marketing, souhaitant une page de capture de leads légère et rapide à charger.
Ce billet décrit l’appel direct à l’API HubSpot Forms depuis un template de page dédié, sans passer par un plugin de formulaire généraliste. La configuration du CRM HubSpot lui-même et les workflows marketing associés ne sont pas traités ici, ce projet s’appuyant sur un formulaire HubSpot déjà créé et configuré en amont.
Pourquoi éviter un plugin de formulaire généraliste
Le site utilisait déjà un thème bloc léger, sans dépendance JavaScript lourde. Ajouter un plugin de formulaire généraliste pour une seule page aurait introduit une bibliothèque complète, des tables supplémentaires en base de données et une surface de maintenance disproportionnée par rapport au besoin réel : trois champs, un bouton d’envoi, une redirection de confirmation.
HubSpot expose une API publique de soumission de formulaire, accessible sans authentification complexe côté client, à condition de connaître l’identifiant du portail et l’identifiant du formulaire créé côté HubSpot. Cette API convient parfaitement à un appel direct en JavaScript depuis une page statique.
Construire le template de la landing page
Un template dédié templates/landing-demo-produit.html a été créé, assigné à une page unique via le mécanisme de template personnalisé de l’éditeur de site, avec un bloc de groupe contenant les champs du formulaire en HTML natif plutôt qu’un bloc de formulaire fourni par une extension.
<!-- wp:group {"className":"wpm-hubspot-form"} -->
<div class="wp-block-group wpm-hubspot-form">
<form id="wpm-demo-form">
<input type="email" name="email" placeholder="Adresse professionnelle" required />
<input type="text" name="firstname" placeholder="Prénom" required />
<button type="submit">Demander une démonstration</button>
</form>
<p id="wpm-demo-form-message" role="status"></p>
</div>
<!-- /wp:group -->
Appeler l’API HubSpot Forms côté client
Le script associé intercepte la soumission du formulaire, désactive le bouton pour éviter une double soumission, et transmet les champs à l’API HubSpot via une requête fetch au format JSON attendu par le service.
document.getElementById( 'wpm-demo-form' ).addEventListener( 'submit', async function( event ) {
event.preventDefault();
const bouton = event.target.querySelector( 'button' );
bouton.disabled = true;
const donnees = {
fields: [
{ name: 'email', value: event.target.email.value },
{ name: 'firstname', value: event.target.firstname.value },
],
};
try {
const reponse = await fetch(
'https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/FORM_ID',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify( donnees ),
}
);
if ( ! reponse.ok ) {
throw new Error( 'Réponse HubSpot invalide' );
}
document.getElementById( 'wpm-demo-form-message' ).textContent =
'Merci, un conseiller vous recontacte sous 24 heures.';
event.target.reset();
} catch ( erreur ) {
document.getElementById( 'wpm-demo-form-message' ).textContent =
'Une erreur est survenue, merci de réessayer.';
bouton.disabled = false;
}
} );
Points d’attention sur cette approche
- L’identifiant de formulaire HubSpot n’est jamais secret : il apparaît dans l’URL de l’API et peut être lu par n’importe quel visiteur inspectant le code source, sans conséquence de sécurité puisque l’API ne fait qu’accepter des soumissions.
- Un contrôle anti-spam basique côté HubSpot, activé dans les réglages du formulaire, reste nécessaire puisqu’aucun plugin tiers ne filtre les soumissions avant leur arrivée dans le CRM.
- Le message de confirmation reste géré entièrement côté client, un rechargement de page complet aurait pu être préféré pour un public moins habitué au JavaScript, selon le contexte du site.
Un appel d’API direct convient bien à une page isolée ; il devient vite ingérable dès qu’un site multiplie les formulaires vers des destinataires différents.
Notre verdict
Pour une landing page ponctuelle avec un besoin de capture de leads simple, l’appel direct à l’API HubSpot Forms évite l’installation d’un plugin généraliste et garde le site léger. Cette approche montre vite ses limites dès que le nombre de formulaires ou la complexité de validation augmente : au-delà de deux ou trois formulaires similaires, une solution plus structurée, voire un plugin dédié, redevient pertinente.
