Placeholders du formulaire Klaviyo invisibles sur Shopify

Question

Bonjour,Je rencontre un problème d’affichage avec un formulaire Klaviyo intégré à notre boutique Shopify.Le formulaire fonctionne et les champs sont bien présents, mais les textes indicatifs à l’intérieur des champs (« Ton prénom », etc.) sont totalement invisibles sur le site.Voici les vérifications déjà effectuées :	Dans l’inspecteur du navigateur, nous avons confirmé que le placeholder est bien présent dans le code, par exemple : placeholder="Ton prénom".			L’opacité relevée est opacity: 1.			Nous avons testé le formulaire via son intégration actuelle en Custom Liquid sur Shopify.			Nous avons également ajouté le formulaire via le bloc officiel Klaviyo « Embedded Form » dans Shopify : le problème est exactement le même, les placeholders restent invisibles.			Le problème ne semble donc pas provenir du code Custom Liquid.			L’identifiant du formulaire concerné est : XQNGMX.	Nous avons déjà sollicité l’assistance Shopify ainsi que l’éditeur de notre thème, sans parvenir à résoudre le problème.Quelqu’un pourrait-il m’aider à identifier pourquoi les placeholders définis dans Klaviyo ne s’affichent pas sur Shopify et m’indiquer la correction à appliquer ?Je peux transmettre l’URL de la page concernée ou toute autre information technique nécessaire.Merci beaucoup pour votre aide.MélissaALKIMI

GabbyEsposito · Answer

Bonjour ​@Alkimi,Merci pour tous ces détails. Puisque le placeholder est bien présent dans le DOM et que le problème se reproduit avec le bloc Custom Liquid comme avec le bloc officiel « Embedded Form », il est probable qu’une règle CSS du thème Shopify masque le texte du placeholder.Dans l’inspecteur, sélectionnez le champ concerné et vérifiez les styles calculés de ::placeholder, notamment color, visibility, font-size, -webkit-text-fill-color et la couleur d’arrière-plan. La valeur opacity: 1 ne suffit pas à exclure un problème de couleur, de transparence ou de style hérité.Pour confirmer le diagnostic, vous pouvez tester temporairement une règle de ce type, en remplaçant le sélecteur par celui du conteneur du formulaire :.formulaire-klaviyo input::placeholder {  color: #6b7280 !important;  opacity: 1 !important;  -webkit-text-fill-color: #6b7280 !important;}Si les placeholders réapparaissent, la correction devra être appliquée dans le CSS du thème, idéalement en ciblant uniquement ce formulaire. Il ne devrait pas être nécessaire de modifier le code généré par Klaviyo. L’URL de la page concernée et une capture des styles appliqués à ::placeholder permettraient de confirmer précisément la règle responsable.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials