Online form to register personal info and data to web site with mobile phone. Person typing information to internet document, survey or questionnaire with smartphone. Customer registration to website.
Les formulaires HubSpot sont des outils cruciaux pour la collecte d’informations, mais une lacune majeure se présente : l’absence native de la fonction d’autocomplétion. Cependant, en comprenant les avantages et en investissant dans le développement approprié, il est possible d’intégrer cette fonctionnalité pour une expérience utilisateur encore plus fluide.
HubSpot, en dépit de ses fonctionnalités avancées (comme les champs dépendant), ne propose pas nativement l’autocomplétion. Cette lacune peut ralentir le processus de collecte d’informations et créer des frictions pour les utilisateurs. Cependant, cette limitation peut être surmontée grâce à des développements personnalisés.
L’autocomplétion, bien que non pris en charge nativement par HubSpot, peut être implémentée pour améliorer considérablement l’expérience utilisateur. En développant des scripts personnalisés et en utilisant des technologies telles que JavaScript, il est possible de créer une fonction d’autocomplétion qui pré-remplit les champs de formulaire avec des données pertinentes.
L’un des scénarios fréquents pour l’autocomplétion concerne le remplissage automatique de la ville en fonction du code postal fourni. Pour ce faire, nous pouvons utiliser la base officielle des codes postaux (https://www.data.gouv.fr/fr/datasets/base-officielle-des-codes-postaux/), qui recense les codes postaux associés aux villes en France.
Pour procéder à une intégration sur un site web, rendez vous dans sur votre formulaire depuis le Hub Marketing (Menu Marketing > Capture de lead > Formulaire).
Puis sur “Modifier” du formulaire concerné :
Puis sur “Partager” :
Enfin, sur la fenêtre contextuelle, copier le code d’intégration affiché :
Nous allons accrémenter ce code fourni par Hubpsot afin d’ajouter notre script, via la balise onFormReady.
<script charset="utf-8" type="text/javascript" src="https://js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "eu1",
portalId: "[IDENTIFIANT DE PORTAIL]",
formId: "[IDENTIFIANT DU FORMULAIRE]",
// Notre code intervient ici
onFormReady: function($form) {
// Selection de l’iframe contenant le formulaire Hubspot
const iframe = document.getElementById('hs-form-iframe-0');
// On ajoute la librairie Jquery
const jqueryScript = document.createElement('script');
jqueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
iframe.contentDocument.body.appendChild(jqueryScript);
setTimeout(function () {
// On ajoute notre code pour l’autocompletion
const script = document.createElement('script');
script.src = 'https://www.exemple.com/js/hs_form_city.js?t=' + Date.now();
iframe.contentDocument.body.appendChild(script);
}, 300);
}
});
</script>
Et voilà !
Il également possible de faire cette intégration depuis une page de destination.
Rendez-vous sur une Page de destination depuis le menu Marketing > Pages de destination.
Sur cette page, cliquez sur “Paramètres” :
Dans la fenêtre contextuelle, allez à la section “Options avancées” :
Un peu plus bas un section “HTML du pied de page” est visible. C’est ici qu’il faut ajouter un script pour y intégrer l’autocompletion.
<script>
const jqueryScript = document.createElement('script');
jqueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js'; document.body.appendChild(jqueryScript);
setTimeout(function () {
const script = document.createElement('script');
script.src = 'https://exemple.com/build/js/hs_form_city.js?t=' + Date.now();document.body.appendChild(script); }, 300);
</script>
Les avantages :
Les défis:
Bien que HubSpot ne prenne pas en charge nativement l’autocomplétion, le développement sur mesure offre une solution viable. En surmontant les défis techniques et en investissant dans des solutions adaptées, les entreprises peuvent optimiser leurs formulaires HubSpot, offrant ainsi une expérience utilisateur améliorée et des résultats commerciaux positifs. En résumé, le développement de l’autocomplétion s’avère être une stratégie judicieuse pour atteindre l’équilibre entre efficacité opérationnelle et expérience utilisateur exceptionnelle.
Si cet article vous a plu, nous vous invitons à découvrir notre agence HubSpot ainsi que notre offre d’intégration. Pour aller plus loin, vous pouvez télécharger les premières pages de la méthode « Acquisition Strategy Design : le guide ultime pour construire pas à pas son plan d’acquisition »