Utilisation du champ HTML

Souhaitez-vous intégrer du HTML personnalisé dans vos formulaires ? Le champ HTML de WPForms vous le permet. Cela peut être utile pour ajouter du texte, des liens et d'autres éléments à vos formulaires.

Ce tutoriel vous montrera toutes les options disponibles pour le champ HTML dans WPForms, ainsi que quelques cas d'utilisation.

---

Avant d'aller plus loin, assurez-vous que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au constructeur de formulaires.

Ajouter un champ HTML à votre formulaire

Étant donné que le champ HTML est une fonctionnalité avancée, vous le trouverez sous Champs fantaisistes dans le constructeur de formulaires.

Pour l'ajouter à votre formulaire, cliquez dessus ou faites-le glisser dans la zone de prévisualisation.

Outre l'ajout de votre HTML, la seule option de champ que vous devez configurer est l'étiquette. Vous pouvez saisir le texte de votre choix dans le champ prévu à cet effet.

Contrairement aux autres champs, l'étiquette du champ HTML n'est visible que dans le constructeur de formulaires pour vous aider à l'identifier dans la zone de prévisualisation. Les utilisateurs ne la verront pas sur le frontend, et le champ ne sera pas inclus dans les soumissions de votre formulaire.

Utilisation du champ HTML

Les bases de l'utilisation du champ HTML sont assez simples. Il suffit de saisir votre texte ou votre HTML dans le champ prévu à cet effet dans le panneau Options du champ.

Cependant, il existe de nombreux cas d'utilisation différents pour ce champ. Il est très flexible et vous pouvez l'adapter à de nombreuses situations différentes.

Ci-dessous, nous avons couvert certains des cas d'utilisation les plus populaires plus en détail.

Ajouter du texte stylisé à un formulaire

Les champs HTML sont l'un des nombreux moyens d' ajouter du texte supplémentaire à vos formulaires, tels que des instructions pour les remplir ou des informations importantes que vous souhaitez que les utilisateurs voient avant de soumettre leurs entrées.

Cependant, le champ HTML est unique car il vous permet d'inclure du texte stylisé, tel que du texte en gras ou en italique. Vous pouvez ajouter les balises HTML appropriées directement dans le champ Code du panneau Options du champ.

Sur le frontend, l'exemple ci-dessus ressemblerait à ceci :

De plus, vous pouvez utiliser des balises HTML pour ajouter des titres, des listes et plus encore au texte supplémentaire de vos formulaires.

Ajouter des liens à un formulaire

Le champ HTML vous permet également d'ajouter des liens à votre formulaire. Cela peut être utile si vous souhaitez permettre aux utilisateurs d'accéder rapidement à une autre page pendant qu'ils remplissent votre formulaire.

Pour ajouter un lien à votre champ HTML, vous devez utiliser la balise <a>. Tout d'abord, ajoutez les balises ouvrantes et fermantes autour du texte que vous souhaitez utiliser pour ancrer votre lien.

Ensuite, dans la balise ouvrante, ajoutez l'attribut href et définissez-le sur l'URL vers laquelle vous souhaitez créer un lien.

Sur le frontend, cela apparaîtra comme un lien cliquable dans votre formulaire.

Intégrer une image dans un formulaire

Vous pouvez également utiliser des éléments <img> pour ajouter des images à votre formulaire. Pour ce faire, ajoutez <img> au champ Code dans le panneau Options du champ.

Ensuite, vous devrez ajouter la src ou l'URL source de l'image. Si l'image que vous ajoutez à votre formulaire se trouve dans votre bibliothèque de médias WordPress, vous pouvez trouver son URL en consultant ses détails d'attachement.

L'URL du fichier se trouve en bas de la fenêtre, et vous pouvez cliquer sur le bouton pour la copier dans votre presse-papiers.

Ajoutez-la ensuite à l'élément <img> dans votre champ HTML.

Vous pouvez également utiliser des attributs HTML pour modifier la taille de votre image et y ajouter un texte alternatif. Sur le frontend, cela pourrait ressembler à ceci :

Intégrer une vidéo dans un formulaire

Le dernier cas d'utilisation que nous aborderons dans cet article est l'intégration d'une vidéo dans un formulaire. Pour ce faire, vous devez utiliser un élément HTML appelé <iframe>.

Tout d'abord, ajoutez l'élément <iframe></iframe> au champ Code dans le panneau Options du champ.

Ensuite, vous devez ajouter la src de la vidéo que vous souhaitez intégrer. Si vous avez téléchargé la vidéo que vous utilisez dans votre bibliothèque de médias WordPress, vous pouvez trouver l'URL du fichier comme nous l'avons décrit dans la section précédente.

Pour les vidéos YouTube, vous pouvez cliquer sur Partager » Intégrer pour copier l'intégralité de l'iframe et la coller dans votre champ HTML.

Une fois que vous avez ajouté votre src à votre champ HTML, vous pouvez utiliser des attributs HTML pour modifier la taille de l'iframe et plus encore. Sur le frontend, cela pourrait ressembler à ceci :

Questions fréquemment posées

Ce sont quelques-unes des questions les plus fréquentes que nous recevons concernant le champ HTML.

Puis-je utiliser des balises intelligentes dans les champs HTML de mes formulaires ?

Oui, bien que les balises intelligentes soient un moyen dynamique d'extraire et d'afficher des données dans votre formulaire, elles ne sont pas traitées par défaut dans les champs HTML. Cependant, avec un petit extrait de code PHP, vous pouvez activer les balises intelligentes dans ces champs.

Pour des instructions détaillées sur la façon de mettre en œuvre cette fonctionnalité, veuillez vous référer à notre documentation pour les développeurs.

C'est tout ! Vous avez maintenant quelques idées sur l'utilisation du champ HTML dans WPForms.

Ensuite, souhaitez-vous en savoir plus sur l'ajout de CSS personnalisé à vos formulaires ? Notre tutoriel pour débutants contient tout ce dont vous avez besoin pour commencer.