Affichage d'un formulaire ne fonctionne pas dans WordPress

[CDUMANOIR]

Bonjour,

J'ai un problème d'affichage d'un formulaire Hubspot. Il a bien été créé et je l'ai intégré dans mon site (www.savoiesportanimation.fr/), il apparaît parfaitement dans mon interface wordpress, tout comme le module de prise de RV d'ailleurs : 

En revanche, une fois le site publié, le module de RV apparaît bien mais pas le formulaire, ni sur PC ni sur mobile :

J'ai beau retourner le sujet, je n'arrive pas à comprendre ce qui coince, le formulaire est actif dans Hubspot, j'ai essayé soit en intégration avec un bloc dans WP, soit avec le code ... rien n'y fait. Et je ne comprends pas pourquoi ça fonctionne avec le module RV et pas avec le formulaire

Avez-vous des idées ?

Merci de votre aide

[CDUMANOIR]

Pour info je teste désormais sur la page www.savoiesportanimation.fr/vide/ 

[CDUMANOIR]

C'est probablement le code qui coince mais je ne saisis pas tout.

Sur le PC où j'intègre, je retrouve bien le script avec mon id Hubspot : 

En revanche sur mon PC de test la console renvoie un message de script bloqué :

Et dans l'onglet "Response" j'obtiens un message d'erreur : Failed to load response data : No data found for resource with given identifier

J'ai pourtant tout vérifié : mes formulaires sont bien enregistrés dans mon compte Hubspot, présents sous WordPress, mais cela ne semble pas faire le lien.

[sylvain_tirreau]

Bonjour,

Alors tu as pas mal d'erreurs... Ça peut être long (ou pas).

Essaye déjà un truc : sur le PC où tu intègres, déconnecte toi de l'admin de wordpress, vide ton cache de navigateur, et recharge la page : est-ce que le formulaire a disparu ou est-il toujours là ? Si il n'est plus là, tu as un problème de droit (le bloc qui contient le code ou les endroits où sont insérés les codes Hubspot n'est pas autorisés pour les utilisateurs publics; je ne sais pas où cela se gère dans Wordpress ni quel plugin peut interférer avec ça...).

Ensuite il y a une erreur avec le script Hubspot qui n'est pas chargé ("t.contentWindow.hbspt is undefined"), mais tu as une erreur ("no CSRF Cookie found") qui signifie peut-être qu'il y a un problème sur le code de tracking : https://community.hubspot.com/t5/APIs-Integrations/quot-No-CSRF-Cookie-found-quot-error-with-trackin....

Dans les erreurs, tu as aussi un indice qui indique que les cookies ne fonctionnent pas. As-tu géré ça dans Hubspot ? Ta bannière de cookies est activée dans Hubspot ? Moi je n'ai vu aucune banière de cookies quand je suis arrivé sur ta page. Regarde aussi de ce côté-là.

Il y a un problème assez clair (certains scripts d'Hubspot ne sont pas chargés), mais il faut trouver ce qui les bloque. Je penche pour les cookies Hubspot qui ne sont pas configurés dans Hubspot, mais creuse toutes les pistes indiquées ci-dessus...

Fais tous ces tests avec le cache OFF.

Bon courage et tiens-nous au courant.

[CDUMANOIR]

Bonjour à tous,

J'ai testé beaucoup de choses sans succès et je tourne en rond.

Il est possible que ce soit lié à la gestion des cookies, mais je ne comprends pas comment faire gérer les cookies hubspot dans ma propre bannière de consentement wordpress, pour ne pas avoir deux bannières de consentement sur la même page.

Je perds un temps fou à essayer de faire fonctionner les deux systèmes ensemble, et je ne suis pas développeur donc je vais m'arrêter là et me contenter du formulaire wordpress, à regret.

Merci à tous pour votre aide et vos propositions, c'était pointu ... mais probablement trop pour moi 😓

[sylvain_tirreau]

Bonjour,

Tu sais quel plugin gère tes cookies sous wordpress et pourquoi tu l'as installé (= quelle partie de ton site nécessite cette banière Wordpress) ?

[CDUMANOIR]

Oui, j'ai l'extension CookieYes, pour le suivi statistique de la fréquentation du site notamment (et le formulaire de contact initial, évidemment). 

[sylvain_tirreau · Accepted solution]

Bonjour,

Si c'est juste pour ça, je te conseille de désactiver ce plugin et d'activer la banière de cookie de Hubspot. Avec le code de tracking, tu as aussi un suivi des visites de ton site (selon tes hubs) et les suivi des conversions. Et ton formulaire de contact général tu le mets aussi avec Hubspot.

Étudies cette possibilité sans te lancer tête baissée dedans : regarde comment tu remplaces les fonctionnalités que tu avais avec ce plugin CookieYes et trouve les équivalents Hubspot, et lance toi après. Je pense que cela va régler pas mal de tes soucis.

L'autre possibilité est d'ajouter les scripts Hubspot à ta bannière CookieYes, mais là on est dans des manipulations un peu plus poussées...

Bon courage.

[CDUMANOIR]

Bonjour, 

Petit bilan des manips ce matin :

- En essayant sur une page vide avec le même formulaire puis avec un autre pas de succès.

- La console renvoie bien "Javascript unabled" : 

 

- En réessayant avec le plugin, j'obtiens les mêmes résultats, avec un complément d'erreur dans la console quand même. Mas je n'y connais absolument rien en javascript, ça peut être là que ça coince ? 

 

Il est possible qu'il y ait un souci avec le code de tracking Hubspot, mais normalement le plugin est censé l'installer automatiquement sur toutes les pages. Je creuse ce matin pour vérifier que c'est bien le cas 

[CDUMANOIR]

Dans le doute j'ai également désactivé le cache navigateur et la mise en cache d'objet mais ça ne change rien.

[BérangèreL]

Bonjour @CDUMANOIR et bienvenue, c'est un plaisir de vous avoir ici ! 🎉

Merci de demander à la Communauté !

J'ai quelques questions pour pouvoir vous aider au mieux :

1. Il s'agit d'un formulaire HubSpot, c'est bien ça ?
2. Ce formulaire a été ajouté sur un site externe Wordpress. Dites-moi si ce n'est pas le cas.

Je vous partage ces articles qui pourront peut-être vous aiguiller :

- Ajouter des formulaires HubSpot aux pages et aux articles WordPress
- Dépanner les formulaires HubSpot intégrés en externe

Aussi, je voudrais faire appel à quelques-uns de nos Experts : Bonjour @Bruno_Teixeira, @sylvain_tirreau, @LoicMiret et @Edouardbrunetot avez-vous des suggestions pour aider @CDUMANOIR s'il vous plaît ?

Merci énormément et belle journée !
Bérangère.

[CDUMANOIR]

Bonjour @BérangèreL ,

Oui il s'agit bien d'un formulaire HubSpot directement intégré à un site WordPress, via le module d'intégration dédié.

En l'intégrant via Elementor / Bloc Formulaire, j'obtiens le code suivant : 

<script>
window.hsFormsOnReady = window.hsFormsOnReady || [];
window.hsFormsOnReady.push(()=>{
hbspt.forms.create({
portalId: 48811571,
formId: "8bd92fec-eb3e-4e67-83ba-b2e19959f8c7",
target: "#hbspt-form-1738249343000-3656406731",
region: "na1",

})});
</script>

Ce code n'est pas tout à fait celui donné par Hubspot, j'ai donc réessayé en utilisant directement le bloc code HTML dans Elementor avec le code suivant donné par Hubspot :

 <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>
hbspt.forms.create({
portalId: "48811571",
formId: "8bd92fec-eb3e-4e67-83ba-b2e19959f8c7"
});
</script>

Quand je visualise ma page sur mon PC, ce code apparaît bien et le formulaire avec. Mais sur n'importe quel autre PC / téléphone, la page reste vide et le code n'apparaît pas ! Je ne comprends pas 😞 

[sylvain_tirreau]

Bonsoir,

Vous confirmez que vous voyez le formulaire sur votre PC mais pas sur une autre machine ?

Si oui, je vois que vous utilisez un cache (LiteSpeed). Je vous conseille de désactiver le cache (https://help.krystal.io/web-hosting/how-to-disable-lite-speed-server-caching) et de voir si votre formulaire apparait bien ensuite sur les autres machines. Si c'est le cas, si vous voyez bien le formulaire, il faudra que vous remettiez votre cache (LiteSpeed) à jour à chaque fois que vous ferez une modif de cet ordre sur vos pages (https://www.greengeeks.com/support/article/clear-litespeed-cache/).

Dîtes-nous si cela a donné des résultats.

[CDUMANOIR]

Bonsoir Sylvain, 

Merci de la proposition. LiteSpeed est effectivement installé sur mon WP, j'ai donc désactivité le cache comme demandé.

Malheureusement je ne vois aucun changement de comportement ni sur mobile ni sur PC 🙁

[sylvain_tirreau]

Re-bonsoir,

Alors il faudrait tout désactiver et retester.

Sinon :

- prendre le bout de code donné par Hubspot pour insérer le formulaire et le mettre sur une page de ton site entièrement vide, et voir si ça marche : si ça marche, c'est que quelque chose sur ta page précédente empêche l'affichage. Si ça ne marche pas, essaye d'insérer un autre formulaire Hubspot pour voir si tu obtiens le même résultat. Si tu n'as rien d'affiché, remplace le code du formulaire par ceci : « <script>console.log('Javascript unabled');</script> », puis retourne sur la page publique, clic droit sur la page et inspecte, puis tu cliques sur l'onglet "console", puis tu recharge la page et tu regardes si dans ta console tu as "Javascript unabled" qui s'affiche après le chargement de la page. Si tu ne sais pas comment faire cette vérification, dis-moi quand tu as mis le code dans ton bloc, et j'irai vérifier. Si ça s'affiche, il faudra chercher le problème ailleurs; si ça s'affiche pas, le javascript ne fonctionne pas dans le bloc wordpress dans lequel tu mets le code du formulaire.

- as-tu bien le code de tracking Hubspot sur ton site (il faut que tu ais le plugin installé https://community.hubspot.com/t5/Questions-produits-et-conseils/Affichage-d-un-formulaire-ne-fonctio...) ? Je pense que tu l'as, mais vérifie.

- essaye de mettre le formulaire via le plugin dédié plutôt que par du code Javascript dans un bloc.

Dis-nous ce qu'il en est.