Comment afficher des images sur votre formulaire

Ajouter des images à votre formulaire est un moyen simple et efficace de le rendre plus attrayant, plus facile à utiliser et plus professionnel. Ces images fournissent un contexte visuel, permettent d’expliquer les choses plus clairement, présentent des exemples et rendent le formulaire plus attractif. Vous pouvez inclure une photo pour illustrer une demande de service, donner un exemple de conception ou ajouter une carte pour indiquer un emplacement. Bien utilisées, les images peuvent dissiper toute confusion et aider les utilisateurs à remplir votre formulaire plus rapidement et sans hésitation.

Watch on youtube

Utiliser l’élément Image

L’élément Image est un champ dédié à l’ajout d’éléments visuels à votre formulaire. Il ne collecte aucune information, mais est idéal pour afficher des logos, des bannières, ou même pour diviser votre formulaire en sections plus esthétiques.

Que vous souhaitiez créer un formulaire ou mettre à jour un formulaire existant, vous pouvez ajouter et configurer l’élément Image en quelques étapes simples. Voici comment procéder :

1. Dans le Générateur de formulaires Jotform, cliquez sur Ajouter un élément à gauche.

2. Dans le menu Éléments de formulaire, sous l’onglet Basique, cliquez sur Image. Vous pouvez également glisser-déposer l’élément Image à l’emplacement souhaité dans votre formulaire.

Ensuite, sous l’onglet Général dans le volet Propriétés de l’image à droite, cliquez sur Choisir un fichier. Puis, dans le menu qui s’ouvre, accédez à l’un des onglets suivants pour ajouter une image :

Téléverser un fichier : pour sélectionner une image directement depuis votre appareil.

Mes images : pour choisir une image parmi celles que vous avez déjà utilisées et enregistrées dans votre compte Jotform.

Saisir une URL : pour coller un lien qui dirige directement vers l’image que vous souhaitez utiliser.

4. Ensuite, définissez la taille et l’alignement de votre image en fonction de vos besoins :

• Taille : les champs Largeur et Hauteur définissent la taille de l’image en pixels et n’acceptent que des valeurs numériques. Par défaut, l’image conserve sa taille d’origine, sauf si elle est plus large que le formulaire. Dans ce cas, elle est redimensionnée automatiquement pour s’adapter tout en conservant ses proportions. Vous pouvez modifier la taille manuellement et déverrouiller le rapport d’aspect en cliquant sur l’icône Cadenas entre les champs.
• Alignement de l’image : alignez l’image à gauche, au centre ou à droite du formulaire.

Sous l’onglet Avancé, vous pouvez également configurer les paramètres avancés suivants selon vos besoins :

• Texte alternatif : décrivez l’image pour les lecteurs d’écran ou affichez ce texte si l’image ne se charge pas.
• Image liée : activez cette option et saisissez l’URL dans le champ qui apparaît à côté pour transformer l’image en lien cliquable.
• Référence de fichier : définissez un nom de référence pour l’image, qui correspond par défaut à son nom de fichier de base. Ce nom peut être utilisé dans des scripts ou des fonctions internes pour identifier l’image.
• Texte au survol : saisissez le texte qui apparaîtra sous forme d’infobulle lorsque les utilisateurs survolent l’image avec leur souris.

Voilà ! Vous avez maintenant ajouté une image à votre formulaire grâce à l’élément Image.

Et si les images de votre élément Image deviennent obsolètes et que vous souhaitez les modifier, c’est également très simple. Voici comment procéder :

1. Cliquez sur l’icône d’engrenage à droite de l’élément Image pour ouvrir le volet Propriétés de l’image.

2. Sous l’onglet Général, cliquez sur Supprimer cette image à côté de la miniature de l’image 

3. Ensuite, cliquez sur Choisir un fichier pour téléverser un nouveau fichier.

Utiliser l’élément Paragraphe

L’élément Paragraphe vous permet d’ajouter du texte formaté à votre formulaire et prend également en charge les images intégrées. Il est utile pour combiner des éléments visuels avec des instructions, des descriptions ou tout autre contenu complémentaire.

Que vous souhaitiez créer un formulaire ou mettre à jour un formulaire existant, vous pouvez ajouter et configurer l’élément Paragraphe afin d’ajouter une image en quelques étapes simples. Voici comment procéder :

1. Dans le Générateur de formulaires Jotform, cliquez sur Ajouter un élément à gauche.

2. Dans le volet Éléments de formulaire, sous l’onglet Basique, cliquez sur Paragraphe. Vous pouvez également glisser-déposer un élément Paragraphe à l’emplacement souhaité dans votre formulaire.

3. Ensuite, sur le côté droit du champ Paragraphe, cliquez sur l’icône de crayon.

4. Ensuite, dans l’éditeur de texte, cliquez sur l’icône Insérer une image dans la barre d’outils en haut.

5. Dans la fenêtre Insérer une image, accédez à l’un des onglets suivants pour ajouter une image, puis cliquez sur Insérer une image (une fois que vous avez soit sélectionné ou téléversé une image, soit saisi une URL, vous pourrez cliquer sur le bouton Insérer une image) :

• Téléverser : pour sélectionner une image directement depuis votre appareil.
• Mes images : pour choisir une image parmi les images que vous avez déjà utilisées et enregistrées dans votre compte.
• Saisir une URL : collez un lien direct vers l’image que vous souhaitez utiliser.

6. Enfin, cliquez sur l’icône de coche entourée  sur le côté droit du champ Paragraphe.

Voilà ! Vous avez maintenant ajouté une image à votre formulaire grâce à l’élément Paragraphe.

Utiliser des widgets de formulaire

Il existe des widgets de formulaire permettant d’afficher plusieurs images simultanément et qui permettent d’organiser les images de manière claire sans ajouter d’éléments Image distincts. Selon l’apparence souhaitée des images, vous pouvez choisir entre un format Galerie ou Diaporama.

Le widget Galerie d’images affiche plusieurs images en mosaïque, permettant aux utilisateurs de visualiser tous les visuels d’un seul coup d’œil. Il est idéal pour présenter des échantillons de produits, des photos d’événements ou tout groupe d’images connexes.

Pour en savoir plus, vous pouvez consulter notre guide intitulé Comment ajouter et configurer le widget Galerie d’images.

Le widget Diaporama d’images affiche vos images sous forme de diaporama rotatif. Il est utile pour mettre en valeur des photos avant/après, les étapes d’un processus ou tout ensemble d’images pour lequel vous souhaitez une vue compacte et lisible par glissement.

Pour en savoir plus, vous pouvez consulter notre guide intitulé Comment ajouter et configurer le widget Curseur d’image.