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

Vous voulez ajouter une image dans l'en-tête de votre formulaire ? Peut-être est-ce votre logo, une bannière qui correspond à votre site, ou une photo qui montre aux visiteurs de quoi parle le formulaire.

Quoi que vous imaginiez, un simple bloc de champs gris ne rendra pas service à votre marque. J'ai vu tellement de beaux sites Web avec des formulaires qui semblent avoir été empruntés à d'autres sites.

La solution est le champ Contenu dans WPForms. Il vous permet de déposer des images, des logos et du texte directement dans vos formulaires, sans code requis.

Dans cet article, je vais vous guider tout au long du processus d'ajout d'une image d'en-tête de formulaire dans WordPress, étape par étape.

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

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

Une image d'en-tête de formulaire personnalisée est l'un des moyens les plus rapides de faire en sorte que votre formulaire ait l'air d'appartenir à votre site Web. Au lieu d'un ensemble générique de champs, les visiteurs voient d'abord votre marque, ce qui renforce la confiance avant qu'ils ne tapent une seule lettre.

Cela définit également les attentes. Une image d'en-tête ou un logo donne aux gens une idée claire de qui ils contactent et pourquoi, et cela relie votre formulaire au schéma de couleurs général et au thème de conception de votre site.

Votre en-tête peut refléter le sujet du formulaire, ou il peut simplement s'agir du logo de votre entreprise. Et si vous souhaitez le même look de marque sur chaque formulaire que vous créez, vous pouvez créer des modèles de formulaire de marque afin que chaque nouveau formulaire commence déjà avec votre en-tête.

Les logos ont aussi toutes sortes de tailles. Si vous vous demandez quelle taille devrait avoir le vôtre, consultez notre guide sur la meilleure taille de logo pour les sites.

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

Dans ce guide étape par étape, je vais vous montrer comment ajouter une image d'en-tête ou un logo à vos formulaires WordPress sans toucher au code. Ce tutoriel est parfait pour les débutants, et vous n'aurez pas besoin de CSS personnalisé, d'un constructeur de page ou du personnaliseur WordPress.

Étape 1 : Installer le plugin WPForms Basic

WPForms est le moyen le plus simple de créer des formulaires de marque dans WordPress. Vous bénéficiez d'un constructeur par glisser-déposer ainsi que de plus de 2 100 modèles pour commencer, vous ne regarderez donc jamais un formulaire vierge en vous demandant par où commencer.

Ce que j'aime le plus chez WPForms pour ce travail particulier, c'est que le champ Contenu fonctionne comme l'éditeur WordPress que vous connaissez déjà. Ajouter votre logo à un formulaire ressemble exactement à l'ajout d'une image à un article de blog, jusqu'au bouton Ajouter un média.

Vous aurez besoin d'une licence pour utiliser le champ Contenu, car il n'est pas inclus dans la version Lite. La bonne nouvelle est qu'il est débloqué dès le niveau Basic, le premier niveau payant, vous n'avez donc pas à dépenser pour un plan plus cher juste pour marquer vos formulaires.

Pour commencer, achetez la licence Basic. Ensuite, installez WPForms sur votre site Web. Si vous avez besoin d'aide, suivez ces instructions sur comment ajouter un plugin à WordPress.

Obtenir WPForms Basic maintenant !

Étape 2 : Sélectionner le modèle de formulaire de contact simple

Une fois que le plugin est configuré sur votre site, allez dans WPForms » Ajouter nouveau dans votre tableau de bord WordPress.

À partir de là, vous trouverez une immense bibliothèque de modèles de formulaires parmi lesquels choisir.

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

Maintenant, nous allons sélectionner le modèle Formulaire de contact simple.

Cela nous amène directement dans le constructeur de formulaires par glisser-déposer, où nous personnaliserons le modèle.

Étape 3 : Ajouter le champ Contenu

Maintenant que nous sommes dans le constructeur de formulaires, trouvez le champ Contenu dans l'onglet Champs.

Cliquez simplement sur Contenu, puis faites glisser et déposez le champ où vous le souhaitez sur votre formulaire.

Nous faisons glisser le champ Contenu en haut du formulaire afin que le média téléchargé agisse comme une section d'en-tête.

Lorsque le champ est en place dans la zone d'aperçu, cliquez dessus pour ouvrir ses Options de champ. C'est ici que vous ajouterez votre média et modifierez le texte à l'aide de l'éditeur dans le volet de gauche.

Vous pouvez modifier votre contenu visuellement ou passer à l'éditeur de texte pour travailler en HTML. Pour un aperçu complet de tout ce que ce champ peut faire, consultez notre guide complet sur l'utilisation du champ Contenu.

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

Étape 4 : Télécharger le logo ou l'image de votre entreprise

Ensuite, cliquez sur Ajouter un média pour télécharger votre image dans le champ 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.

Quelques conseils rapides avant de téléverser. Pour les logos, utilisez un PNG avec un fond transparent afin que votre logo ne soit pas dans une boîte blanche, et une largeur d'environ 200 pixels est un bon point de départ. Pour les images d'en-tête de style bannière, choisissez quelque chose d'au moins aussi large que votre formulaire, environ 700 à 800 pixels pour la plupart des zones de contenu WordPress, afin qu'il reste net en taille réelle.

Vous n'avez pas encore de logo ? Ces générateurs de logos IA peuvent vous en créer un solide en quelques minutes.

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 nous assurer que notre image agit comme un véritable 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 de l'éditeur de texte.

Nous pouvons également modifier le texte dans le champ. Nous avons écrit un court message de bienvenue pour les visiteurs ici, ainsi qu'une invite amicale pour remplir le formulaire de contact.

Comme le média au-dessus, vous pouvez formater librement le texte dans le champ Contenu. Cliquez sur Étendre 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 Nom à Grande pour correspondre à la largeur de notre image d'en-tête au-dessus.

Il existe de nombreuses façons d'affiner les champs de votre formulaire, 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 Contenu.

Notre en-tête est superbe, alors ajoutons ce formulaire à une page.

Étape 5 : Enregistrer et intégrer le formulaire

Appuyez sur le bouton Enregistrer dans le coin supérieur droit du constructeur de formulaire pour enregistrer vos modifications.

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

Maintenant, cliquez sur le bouton Intégrer en haut pour ajouter ce formulaire à une page de votre site Web WordPress.

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

Vous pouvez sélectionner une page existante ou en créer une nouvelle. Pour ce tutoriel, nous créons une nouvelle page, nous cliquerons donc sur Créer une nouvelle page.

Après cela, il nous est 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, l'enregistrer comme brouillon ou la publier.

Une recommandation supplémentaire. Dans les paramètres du bloc sur le côté droit de l'éditeur, masquez le titre du formulaire afin qu'il ne concurrence pas votre nouvelle image d'en-tête.

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

Lorsque vous êtes prêt, cliquez sur Publier pour rendre cette page active sur votre site.

Fantastique ! Vous avez maintenant un formulaire avec une image d'en-tête ou un logo personnalisé, et le tout vous a probablement pris moins de dix minutes.

FAQ sur l'ajout d'une image d'en-tête de formulaire dans WordPress

L'ajout d'une image d'en-tête ou d'un logo à vos formulaires WordPress soulève généralement les mêmes questions. Voici des réponses rapides à celles que nous entendons le plus souvent.

Pourquoi ne puis-je pas trouver le champ Contenu dans WPForms ?

Le champ Contenu est disponible dans WPForms Basic et supérieur, il n'apparaîtra donc pas dans la liste des champs si vous utilisez la version gratuite Lite. Mettez à niveau vers n'importe quelle licence payante et le champ apparaîtra dans le constructeur de formulaire.

Quelle doit être la taille d'une image d'en-tête de formulaire ?

Pour un logo, environ 200 pixels de large avec un fond PNG transparent fonctionne bien. Pour un en-tête de style bannière, faites correspondre la largeur de votre formulaire, qui est généralement de 700 à 800 pixels dans une zone de contenu WordPress standard. Commencer près de la taille d'affichage permet à votre image de rester nette.

Puis-je ajouter des images ailleurs dans mon formulaire ?

Absolument. Le champ Contenu peut être placé n'importe où sur votre formulaire, et vous pouvez en utiliser plusieurs. Si vous souhaitez des images à côté de vos questions ou à d'autres endroits créatifs, voici comment ajouter des images n'importe où dans vos formulaires WordPress.

Puis-je styliser mon formulaire pour qu'il corresponde à la marque de mon site ?

Oui. Si vous intégrez votre formulaire avec le bloc WPForms, vous pouvez modifier les couleurs, les arrière-plans et les styles de champ directement dans l'éditeur de blocs sans écrire de CSS. Notre guide sur la stylisation de vos formulaires explique toutes les options.

Puis-je modifier l'en-tête de mon site au lieu de l'en-tête du formulaire ?

Ce tutoriel couvre la zone d'en-tête d'un formulaire. Si vous souhaitez mettre à jour l'en-tête de votre site Web entier, cela est contrôlé par votre thème, et nous en parlons dans notre guide sur la façon de modifier l'en-tête de votre site dans WordPress.

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

Avec un nouvel en-tête attrayant sur votre formulaire, vous inviterez beaucoup plus de visiteurs à le remplir. Cependant, vous ne voulez pas que la moitié de ces soumissions soient des indésirables.

Pour éloigner les spammeurs de votre nouveau formulaire rutilant, consultez notre guide sur la façon de prévenir les soumissions de spam dans vos formulaires WordPress.

Créez votre formulaire personnalisé maintenant

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.