Mon formulaire ne s'affiche pas correctement

Le formulaire se charge, mais semble « abîmé » : coupé, largeur incorrecte, impossible de faire défiler sur mobile, champs invisibles. Voici les causes les plus courantes.

1. L'iFrame est trop étroit ou trop bas

Lors de l'intégration sous forme d'iFrame, ton site web définit souvent une largeur/hauteur fixe — si celle-ci ne correspond pas au formulaire, celui-ci se retrouve divisé en colonnes ou est tronqué.

Solution :

Définir la largeur de l'iFrame sur 100%
Laisser la hauteur de l'iFrame s'ajuster automatiquement — propform fournit un petit snippet JS qui ajuste la hauteur de manière dynamique. Tu trouveras cet extrait de code dans les paramètres du formulaire → Code iFrame à intégrer et tu devras l'ajouter une seule fois à ta page.
Si tu n'utilises pas le code dynamique, définis la hauteur de l'iFrame sur une valeur généreuse (par exemple 1200px) et vérifie si le formulaire s'y intègre correctement.

2. L'élément parent de la page iFrame n'a pas une largeur suffisante

Certains constructeurs de sites web affichent la zone dans laquelle vous insérez l'iFrame dans une colonne à largeur fixe (par exemple 600px). Sur smartphone, cela devient alors trop étroit.

Solution : Dans votre constructeur de site web, réglez la largeur de la colonne/du conteneur sur 100% ou au moins 100vw, si disponible. Dans les constructeurs de pages WordPress (Elementor, Divi), cela s'appelle souvent « Full Width » ou « Stretch ».

3. Conflit CSS avec votre site web

Très rare : un CSS défini globalement sur votre site web (par exemple * { box-sizing: content-box } ou similaire) remplace le style du formulaire.

Solution : Si vous avez du CSS personnalisé sur votre page, isolez le conteneur iFrame ou vérifiez les conflits de style dans la console DevTools du navigateur.

4. L'affichage mobile est tronqué

Le formulaire fonctionne parfaitement sur ordinateur, mais il manque quelque chose sur le bord droit sur smartphone.

Solution :

Dans le fichier <head> de votre site web, la balise meta viewport doit être présente : <meta name="viewport" content="width=device-width, initial-scale=1.0">
Largeur de l'iFrame sur 100% (pas sur px)
Le conteneur parent ne doit pas avoir de min-width

5. Cache du navigateur

Si tu viens d'apporter des modifications au formulaire et qu'il s'affiche toujours comme avant : vide le cache du navigateur ou essaie un onglet de navigation privée.

6. Logo ou bouton disparu

Si le logo ne s'affiche pas ou si un bouton manque :

Le logo a-t-il été téléchargé dans les paramètres du formulaire ?
Le bouton est-il défini sur « invisible » dans une règle de condition ? Vérifiez dans les paramètres du champ sous « Conditions ».

Si rien ne fonctionne

Envoyez-nous un e-mail à hello@propform.io en précisant les informations suivantes :

URL du formulaire (s'il est intégré : indiquez également l'URL de votre site web)
Navigateur + appareil (ordinateur de bureau/tablette/smartphone)
Capture d'écran de l'erreur
Qu'attendiez-vous de voir ?

propform.ioHilfe