Tuto : ajouter un logo sur un formulaire Grist

GariceBP · Juillet 24, 2026, 8:15

[Tuto] Ajouter un logo centré en haut d’un formulaire Grist (sans coder)

Bonjour à toutes et tous,

Si vous utilisez les formulaires Grist pour des démarches ou des inscriptions, vous avez peut-être souhaité ajouter un logo en haut de la page pour renforcer l’identité visuelle de votre structure ou administration.

Bonne nouvelle : c’est très simple à réaliser, et cela ne nécessite aucune compétence en développement web !

Le problème qu’on résout :

Si vous mettez un simple lien internet vers votre image (https://...), il arrive souvent que l’image ne s’affiche pas pour les utilisateurs externes (problèmes de droits d’accès, de serveur sécurisé, etc.).

Pour éviter cela, nous allons convertir l’image en code (Base64) : ainsi, le logo est directement « englobé » dans le formulaire et s’affichera à tous les coups.

Étape 1 : Convertir votre logo en code (1 minute)

Rendez-vous sur le site gratuit : base64-image.de
Glissez-déposez le fichier de votre logo (format .png ou .svg de préférence).
Une fois l’image chargée, cliquez sur le bouton vert « Copy image ».

(Vous venez de copier un long texte qui contient toute votre image).

Étape 2 : L’intégrer dans votre formulaire Grist

Dans votre document Grist, allez sur votre Formulaire.
Tout en haut du formulaire, ajoutez un bloc de construction Section / Texte (ou éditez le premier bloc existant).
Copiez-collez le code suivant dans le bloc :

HTML

<div style="text-align: center; margin: 20px 0;">
  <img src="COLLE_TON_CODE_ICI" width="180" />
</div>

Remplacez le texte COLLE_TON_CODE_ICI par le code que vous avez copié à l’étape 1 (gardez bien les guillemets src="...").

Astuces de personnalisation :

Ajuster la taille du logo : Modifiez le chiffre 180 dans width="180". Par exemple, passez à 220 pour un plus grand logo ou 140 pour un logo plus discret.
Ajuster l’espace autour du logo : La ligne margin: 20px 0; crée une marge de 20 pixels au-dessus et en dessous. Vous pouvez augmenter cette valeur pour aérer le haut du formulaire.

N’hésitez pas à poser vos questions si vous rencontrez un blocage !