Comment ajouter une image d’en-tête ou un logo à un formulaire dans WordPress

Voulez-vous apprendre à ajouter une image ou un logo d’en-tête à un formulaire dans WordPress ?

Ajouter une image est un excellent moyen de personnaliser votre formulaire, de donner aux utilisateurs une idée de ce dont il s’agit, ou de présenter un logo pour votre entreprise.

Heureusement, c’est facile à faire avec WPForms. Le champ de contenu dans WPForms simplifie le processus de téléchargement de texte et de médias, tels que des images ou des logos, directement dans vos formulaires.

Dans cet article, nous vous guiderons dans le processus d’utilisation du champ de contenu pour ajouter une image d’en-tête de formulaire dans WordPress.

Ajoutez une image d’en-tête à votre formulaire maintenant

Pourquoi devrais-je ajouter une image d’en-tête à un formulaire ?

Personnaliser votre formulaire avec une image d’en-tête personnalisée est un moyen facile de compléter votre site Web WordPress avec un design cohérent et harmonieux. Puisque notre constructeur de formulaires par glisser-déposer rend la personnalisation des formulaires un jeu d’enfant, vous pouvez utiliser vos images dans une variété de styles.

De plus, l’utilisation d’une image donnera à vos utilisateurs un aperçu clair de ce à quoi s’attendre de votre site et de votre formulaire. Les images aident également à apporter un intérêt visuel à vos formulaires et à les intégrer au schéma de couleurs général et au thème de conception de votre site.

Votre image d’en-tête peut refléter le sujet du contenu de votre formulaire, ou il peut s’agir d’une image qui représente votre entreprise ou organisation, telle qu’un logo.

Comment ajouter une image d’en-tête ou un logo à un formulaire dans WordPress

Dans ce guide étape par étape, nous vous montrerons comment modifier l’en-tête des formulaires WordPress sans aucun code. Ce tutoriel est parfait pour les débutants et ne nécessite pas l’utilisation de CSS personnalisé, d’un constructeur de pages ou du personnalisateur WordPress.

Suivez simplement cette table des matières pour toutes les étapes que nous vous montrerons :

1. Installez le plugin WPForms

Tout d’abord, vous devez installer le plugin WPForms. Consultez toutes les licences WPForms ici, ou téléchargez le plugin depuis votre tableau de bord WordPress.

Afin d’utiliser la fonctionnalité de téléchargement du champ de contenu pour ajouter une image d’en-tête de formulaire, vous devrez sélectionner une licence améliorée comme Pro, Plus ou Elite.

Voici un tutoriel utile sur comment installer un plugin WordPress.

2. Sélectionnez le modèle de formulaire de contact simple

Une fois que le plugin est configuré sur votre site, accédez à WPForms dans votre tableau de bord WordPress et cliquez sur Ajouter nouveau.

À partir de là, vous trouverez une large sélection de modèles parmi lesquels choisir pour créer votre formulaire.

Mais d’abord, nommons le formulaire. Pour ce tutoriel, nous nommerons notre formulaire « Contactez-nous », qui s’affichera en haut du formulaire. 

Maintenant, nous sélectionnerons le Formulaire de contact simple.

Cela nous mènera à une nouvelle page, où nous utiliserons le constructeur de formulaires facile à utiliser pour personnaliser ce modèle.

3. Ajoutez le champ de contenu

Maintenant que nous sommes dans le constructeur de formulaires, nous ajouterons le champ de contenu à partir des sélections dans l’onglet Champs.

Cliquez simplement sur Contenu et faites glisser le champ là où vous le souhaitez sur votre formulaire.

Nous faisons glisser le champ de contenu en haut de la page afin que le média téléchargé agisse comme une section d'en-tête sur notre formulaire.

Une fois le champ de contenu placé dans la zone d'aperçu, nous cliquerons dessus pour accéder à ses Options de champ et ajouterons notre média et modifierons le texte à l'aide de l'éditeur facile situé dans le volet de gauche.

Vous pouvez modifier votre contenu visuellement ou utiliser l'éditeur de texte pour le modifier à l'aide du HTML.

Génial ! Nous sommes maintenant prêts à télécharger notre image et à saisir du texte sur le formulaire.

4. Téléchargez votre logo/image d’entreprise

Ensuite, nous cliquerons sur Ajouter un média pour télécharger notre image dans le champ de contenu.

Vous pourrez télécharger une nouvelle image ou en sélectionner une dans votre médiathèque. Les fichiers JPG et PNG sont acceptés.

Avec notre logo personnalisé en place, nous pouvons ensuite modifier les options de personnalisation telles que la taille de l'image, l'orientation et d'autres détails.

Pour que notre image agisse comme un en-tête de formulaire, nous sommes allés dans l'onglet Avancé et avons défini la Taille du champ sur Grande.

Ensuite, de retour dans l'onglet Général, nous nous sommes assurés que l'image est centrée dans le champ en utilisant les options de mise en forme du champ de texte.

Nous avons également la possibilité de modifier le texte du champ. Nous avons modifié le texte ici pour qu'il s'agisse d'un court message pour les visiteurs et d'une invite à remplir le formulaire de contact.

Comme le média ci-dessus, vous pouvez formater le texte librement avec le champ de contenu. Cliquez sur Développer l'éditeur sous la zone de texte pour encore plus d'options d'édition.

Pour notre logo ici, nous avons centré le texte avec le reste de l'image.

Vous voudrez peut-être aussi personnaliser les autres champs du formulaire.

Par exemple, nous avons augmenté la taille du champ de nom à Grande, pour correspondre à la largeur de notre image d'en-tête ci-dessus.

Il existe de nombreuses façons de personnaliser les détails des champs du formulaire à votre guise, et vous pouvez prévisualiser vos modifications au fur et à mesure.

Assurez-vous de cliquer sur Mettre à jour l'aperçu pour voir les ajustements apportés au champ de contenu.

Excellent ! Nous sommes maintenant prêts à intégrer le formulaire sur n'importe quelle page !

5. Enregistrez et intégrez le formulaire

Appuyez sur le bouton Enregistrer dans le coin supérieur droit du formulaire pour voir les modifications reflétées dans l'aperçu de la page.

Que vous consultiez l'aperçu de la page ou non, vous devrez cliquer sur Enregistrer avant de passer à autre chose.

Maintenant, nous allons cliquer sur le bouton Intégrer en haut pour ajouter ce formulaire sur une nouvelle page de notre site Web WordPress.

Après avoir cliqué sur Intégrer, nous choisirons où placer le nouveau formulaire.

Nous avons la possibilité de sélectionner une page existante ou de créer une nouvelle page. Pour ce tutoriel, nous créons une nouvelle page, nous cliquerons donc sur Créer une nouvelle page.

Après cela, il nous sera demandé de nommer la nouvelle page.

Nous l'appellerons « Contactez-nous » car c'est ainsi que nous avons nommé ce formulaire lorsque nous avons sélectionné le modèle.

Nous pouvons maintenant voir le formulaire sur une page nouvellement créée pour notre site Web WordPress. À partir d'ici, nous pouvons prévisualiser la page, enregistrer la page comme brouillon ou la publier.

Nous vous recommandons de configurer les paramètres du bloc sur le côté droit de l'éditeur pour masquer le titre du formulaire si ce n'est pas déjà fait. Vous ne voulez pas qu'il détourne l'attention de l'image d'en-tête de votre formulaire.

Assurez-vous simplement que le bouton Afficher le titre est désactivé.

Lorsque vous êtes prêt, cliquez sur Publier pour mettre cette page en ligne sur votre site.

Fantastique ! Vous avez maintenant ajouté avec succès un en-tête de formulaire avec une image ou un logo à votre site WordPress.

Ajoutez une image d’en-tête à votre formulaire maintenant

Ensuite, arrêtez le spam des formulaires de contact dans WordPress.

Avec un nouveau formulaire attrayant personnalisé avec l'image d'en-tête de votre choix, vous inviterez de nombreux visiteurs de votre site à remplir votre formulaire.

Mais vous ne voulez pas collecter de spam avec votre nouveau formulaire.

Pour empêcher les spammeurs de remplir vos formulaires, consultez cet article sur comment empêcher les soumissions de spam dans vos formulaires WordPress.

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.