Résumé IA
Vous souhaitez intégrer des extraits de code HTML personnalisés sur vos formulaires de contact WordPress ? L'ajout de HTML personnalisé à votre formulaire est un excellent moyen de faire preuve de créativité et d'améliorer vos formulaires.
Les meilleurs plugins de formulaires WordPress vous permettent de créer des formulaires sans code, tout en vous permettant d'ajouter votre propre HTML personnalisé à vos formulaires pour les rendre encore plus avancés.
Dans ce tutoriel, je vais vous guider à travers l'installation de WPForms, la création d'un formulaire, l'ajout d'un bloc HTML et le collage de votre code.
Ajoutez du HTML personnalisé à votre formulaire WordPress ! 🙂
Pourquoi ajouter du HTML personnalisé à votre formulaire de contact
Vous vous demandez peut-être pourquoi vous devriez ajouter du HTML à vos formulaires WordPress. Dans de nombreux cas, un utilisateur avancé ou un développeur web pourrait vouloir étendre les fonctionnalités d'un formulaire.
L'un des principaux avantages de l'ajout de HTML personnalisé à votre formulaire est qu'il vous aide à faire ressortir votre formulaire du reste du contenu.
Dans l'exemple ci-dessous, vous pouvez voir à quel point il est facile d'ajouter un lien vers une politique de confidentialité dans du texte sur votre formulaire de contact.
Par conséquent, lorsque vos visiteurs arrivent sur la page où se trouve votre formulaire de contact, ils verront quelque chose comme ceci ci-dessous :
De plus, vous pouvez ajouter une image à votre formulaire en utilisant du code HTML personnalisé pour rendre le formulaire plus attrayant visuellement ou pour présenter des produits et des options de produits personnalisés.
Et en ajoutant ces fonctionnalités supplémentaires à vos formulaires, vous pouvez faire ressortir le formulaire sur la page, ce qui aide à attirer l'attention de vos visiteurs.
Comment ajouter du code HTML personnalisé à votre formulaire de contact WordPress
J'ai également partagé une vidéo ci-dessous décrivant toutes les instructions que vous devez suivre pour ajouter du code HTML à votre formulaire dans WordPress.
Si vous préférez lire le tutoriel, suivez ces instructions pour créer un espace sur vos formulaires pour y placer votre code HTML personnalisé.
Étape 1 : Installer le plugin WPForms
La première chose à faire pour commencer est d'installer et d'activer le plugin WPForms. C'est un constructeur de formulaires facile à utiliser qui vous permet de créer n'importe quoi, des formulaires simples aux formulaires avancés.
Ce qui distingue WPForms, c'est la façon dont il gère le HTML personnalisé. Contrairement à d'autres constructeurs de formulaires qui limitent ce que vous pouvez ajouter, WPForms vous donne un contrôle total sur votre contenu HTML tout en gardant tout sécurisé et fonctionnel.
Le champ HTML fait partie de la collection Fancy Fields de WPForms, ce qui signifie que vous aurez besoin au moins du plan Basic pour y accéder. Si vous débutez dans le téléchargement de plugins, voici un guide étape par étape sur comment installer un plugin WordPress.
Passez à WPForms Pro dès maintenant ! :)
Étape 2 : Créez un formulaire et ajoutez des champs de base
La prochaine étape consiste à créer votre premier formulaire. Vous pouvez choisir n'importe quel formulaire auquel vous souhaitez ajouter du HTML personnalisé, mais pour cet exemple, nous allons créer un formulaire de contact simple en utilisant le défi WPForms.
Donnez à votre formulaire un nom descriptif comme « Formulaire de contact avec HTML personnalisé » afin de pouvoir le retrouver facilement plus tard. Vous pouvez commencer avec un modèle comme « Formulaire de contact simple » pour gagner du temps.
Une fois dans le constructeur de formulaires, vous verrez la configuration familière avec les options de champ à gauche et l'aperçu de votre formulaire à droite, avec des champs cruciaux comme Nom, E-mail et Message déjà ajoutés.
Cela vous donne une base solide avant d'ajouter vos éléments HTML personnalisés. Parfait. Maintenant, ajoutons le champ qui acceptera le HTML personnalisé ensuite.
Étape 3 : Ajoutez un bloc HTML à votre formulaire
Voici maintenant la partie amusante : l'ajout de HTML personnalisé à votre formulaire. Recherchez le champ HTML dans la section Champs fantaisistes sur le côté gauche du constructeur de formulaires et faites-le glisser dans la zone d'aperçu de votre formulaire.
Vous pouvez positionner le champ HTML n'importe où dans la structure de votre formulaire. Je le place généralement là où je veux que le contenu personnalisé apparaisse.
Peut-être en haut pour un message de bienvenue, entre les sections de champs comme séparateur, ou en bas pour des informations supplémentaires.
Étape 4 : Insérez votre code HTML personnalisé
Maintenant que votre bloc HTML personnalisé est sur votre formulaire de contact, vous pouvez ajouter votre extrait de code HTML personnalisé. Allez sur votre formulaire à droite et cliquez sur le champ Bloc HTML / Code que vous venez d'ajouter.
Ensuite, dirigez-vous vers le panneau de gauche où vous verrez la boîte de code HTML sous Options du champ. C'est là que vous pouvez ajouter votre extrait de code HTML personnalisé.
Alors, collez votre HTML personnalisé dans ce champ. Vous pouvez ajouter n'importe quel type d'extrait de code HTML personnalisé à votre formulaire. Lorsque vous avez terminé, cliquez sur le bouton Enregistrer dans le coin supérieur droit.
Étape 5 : Mettez votre formulaire HTML personnalisé en ligne
Avant de mettre votre formulaire en ligne, vous devez tout tester pour vous assurer que votre HTML personnalisé s'affiche correctement et n'interfère pas avec les soumissions du formulaire.
Cliquez sur le bouton Aperçu dans le générateur de formulaires pour voir exactement comment votre formulaire apparaîtra aux visiteurs. Si tout fonctionne comme prévu, vous pouvez alors procéder à son ajout sur votre site web. Cliquez sur le bouton Intégrer.
Maintenant, lorsque la notification Intégrer dans une page apparaît, cliquez sur le bouton Créer une nouvelle page. Ensuite, WPForms vous demandera de nommer votre page.
Pour notre exemple, nous ajoutons ce formulaire de contact HTML personnalisé à une page de contact, nous l'appellerons donc Contactez-nous. Tapez le titre de la page que vous souhaitez dans la zone et cliquez sur C'est parti !
Vous verrez donc maintenant la toute nouvelle page avec votre formulaire de contact HTML personnalisé. Vous pouvez cliquer sur le bouton Publier dans le coin supérieur droit de votre page.
Et ensuite, jetez un coup d'œil à votre nouveau formulaire. Vous l'avez fait. Vous avez terminé la configuration d'un formulaire de contact WordPress avec un champ HTML personnalisé.
Ajoutez du HTML personnalisé à votre formulaire WordPress ! 🙂
FAQ sur la façon d'ajouter du HTML personnalisé à vos formulaires WordPress
Apprendre à ajouter du HTML personnalisé à vos formulaires WordPress est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à certaines questions courantes à ce sujet :
Quels types de code HTML puis-je ajouter à WPForms ?
Vous pouvez ajouter presque tous les éléments HTML standard au champ HTML. Cela inclut les titres, les paragraphes, les séparateurs, les images, les vidéos intégrées, les zones de texte stylisées, les liens et même les tableaux HTML simples.
Vous pouvez également utiliser du CSS en ligne pour styliser ces éléments exactement comme vous le souhaitez. Le champ HTML prend en charge la plupart des balises HTML courantes.
Le HTML personnalisé affectera-t-il la fonctionnalité de soumission du formulaire ?
Non, l'ajout de HTML à votre formulaire n'interférera pas du tout avec les soumissions de formulaire. Le champ HTML est purement destiné à l'affichage et ne collecte aucune donnée qui est soumise avec le formulaire.
Vos champs de formulaire réguliers (comme Nom, E-mail, Message) continueront de fonctionner exactement comme ils l'ont toujours fait. Le HTML personnalisé améliore simplement la présentation visuelle et l'expérience utilisateur sans toucher à la fonctionnalité de traitement du formulaire.
Puis-je utiliser du JavaScript dans le champ HTML ?
Non, le code JavaScript est automatiquement filtré du champ HTML pour des raisons de sécurité. WPForms supprime les balises <script> et les gestionnaires d'événements JavaScript pour protéger votre site contre les vulnérabilités de sécurité potentielles.
Si vous avez besoin de fonctionnalités interactives au-delà de ce que le HTML et le CSS peuvent offrir, vous pourriez envisager d'explorer les fonctionnalités intégrées de WPForms comme la logique conditionnelle, qui peut créer un comportement de formulaire dynamique sans nécessiter de JavaScript personnalisé.
Quelle est la différence entre le champ HTML et le champ Contenu ?
Le champ HTML vous permet d'ajouter du code HTML personnalisé avec un contrôle de style complet, tandis que le champ Contenu est conçu pour du contenu textuel simple avec des options de formatage de base. Le champ HTML vous offre beaucoup plus de flexibilité pour les éléments de conception personnalisés.
Si vous avez juste besoin d'ajouter du texte brut ou du contenu formaté simplement, le champ Contenu pourrait être plus facile à utiliser. Mais lorsque vous souhaitez un style personnalisé, des médias intégrés ou des mises en page complexes, le champ HTML est définitivement la solution.
Y a-t-il une limite à la quantité de code HTML que je peux ajouter ?
Il n’y a pas de limite stricte de caractères pour le champ HTML, mais il est conseillé de garder votre code concis et ciblé. Une quantité excessive de HTML peut ralentir le temps de chargement de votre formulaire et le rendre plus difficile à gérer.
Je recommande de diviser le HTML complexe en sections plus petites et logiques en utilisant plusieurs champs HTML si nécessaire. Cela rend votre formulaire plus facile à modifier ultérieurement et contribue aux performances globales et à la vitesse de chargement du formulaire.
Ensuite, Apprenez à styliser vos formulaires WordPress
Maintenant que vous avez ajouté du HTML personnalisé à votre formulaire, vous devriez consulter notre guide sur la stylisation des formulaires de contact dans WordPress pour vous assurer que votre code personnalisé s’affiche comme vous le souhaitez.
Créez votre formulaire WordPress 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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
