Résumé IA
Voulez-vous ajouter 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.
La façon la plus rapide de le faire est d'utiliser le champ HTML dans WPForms. Vous ajoutez le champ à votre formulaire, collez votre code et enregistrez. Vous n'aurez pas besoin de toucher aux fichiers de votre thème ni d'installer un plugin séparé.
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 propre code. Je partagerai également quelques extraits de code HTML à copier-coller que vous pourrez utiliser immédiatement.
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
- Étape 2 : Créez un formulaire et ajoutez des champs de base
- Étape 3 : Ajoutez un bloc HTML à votre formulaire
- Étape 4 : Insérez votre code HTML personnalisé
- Étape 5 : Mettez votre formulaire HTML personnalisé en ligne
- Exemples de code HTML que vous pouvez copier et coller
É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 ! 🙂
Exemples de code HTML que vous pouvez copier et coller
Voici quelques-unes de mes idées préférées, ainsi que le code réel que vous pouvez coller directement dans le champ HTML. Chacune utilise du HTML simple et du CSS en ligne, il n'y a donc rien de plus à installer.
L'extrait que j'utilise le plus souvent est une simple ligne de politique de confidentialité. Il ajoute une courte note avec un lien, ce qui rend votre formulaire de contact conforme au RGPD.
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>Si vous préférez recueillir un consentement formel, vous pouvez ajouter un champ d'accord RGPD à la place d'un simple lien.
Pour rendre votre formulaire plus attrayant, vous pouvez intégrer une vidéo YouTube directement dedans. Remplacez VIDEO_ID par l'ID dans l'URL de votre vidéo et elle s'affichera dans le formulaire.
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>Sur une page de contact, une carte Google intégrée aide les gens à trouver votre entreprise en personne. Récupérez le lien d'intégration de Google Maps en utilisant l'option Partager, puis Intégrer une carte, et collez-le à la place de VOTRE_CODE_INTÉGRATION.
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>Vous gérez un formulaire de commande ? Une boîte stylisée est un bon moyen de mettre en évidence une réduction ou une offre à durée limitée. Vous pouvez même l'associer à une logique conditionnelle pour qu'elle ne s'affiche que lorsque quelqu'un sélectionne une certaine option.
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>Pour les formulaires plus longs, un titre et un séparateur permettent de regrouper facilement les champs liés en sections claires.
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">Et si vous souhaitez un bouton d'appel à l'action qui corresponde à votre image de marque, vous pouvez styliser un lien pour qu'il ressemble à un bouton sans toucher à votre thème.
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>FAQ sur la façon d'ajouter du HTML personnalisé à vos formulaires WordPress
L'ajout de code HTML personnalisé à un formulaire de contact WordPress soulève quelques questions courantes. Voici les réponses que l'on me pose le plus souvent.
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 de 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.
Puis-je créer un formulaire de contact WordPress uniquement avec du code HTML ?
Vous pouvez coder manuellement un formulaire de contact en HTML pur, mais il n'enverra ni ne stockera les soumissions par lui-même. Le HTML ne gère que la mise en page, vous auriez donc toujours besoin de PHP ou d'un service de gestion de formulaires pour traiter ce que les gens soumettent. C'est pourquoi la plupart des gens utilisent un constructeur de formulaires pour gérer les soumissions, puis ajoutent du HTML personnalisé pour les touches de conception.
Comment ajouter du code HTML à un formulaire de contact sans plugin ?
Sans plugin, vous ajouteriez le HTML de votre formulaire directement sur une page à l'aide du bloc HTML personnalisé de WordPress, puis vous écririez du PHP pour gérer la soumission et vous l'envoyer par e-mail. Cela fonctionne, mais c'est plus technique et vous êtes responsable vous-même de la protection contre le spam et de la validation. Le champ HTML dans un plugin de formulaire vous donne le même contrôle créatif sur votre balisage tout en gérant pour vous le côté soumission sécurisée.
Dois-je savoir coder pour utiliser le champ HTML ?
Le champ HTML ne nécessite aucune connaissance réelle en codage. Si vous savez copier-coller, vous pouvez l'utiliser, et les exemples plus tôt dans ce guide sont prêts à être utilisés une fois que vous remplacez le texte d'espace réservé par le vôtre. Le HTML de base et un peu de CSS en ligne couvrent la plupart de ce que vous voudrez faire.
Le champ HTML fonctionne-t-il dans la version gratuite de WPForms ?
Le champ HTML fait partie de la collection Fancy Fields, vous aurez donc besoin au moins du plan Basic pour l'utiliser. La version gratuite WPForms Lite couvre les champs standard comme le nom, l'e-mail et le message, ce qui est suffisant pour un formulaire de contact de base. Une fois que vous souhaitez du HTML personnalisé, des listes déroulantes d'images ou des téléchargements de fichiers, c'est là qu'un plan payant intervient.
Puis-je ajouter le même HTML à plusieurs formulaires WordPress ?
Oui, mais le champ HTML est ajouté par formulaire, il n'y a donc pas de paramètre global qui l'applique partout. L'approche la plus simple consiste à enregistrer votre extrait quelque part à portée de main et à le coller dans le champ HTML de chaque formulaire qui en a besoin. Si vous réutilisez souvent le même bloc, conserver un petit fichier texte de vos extraits préférés vous fera gagner du temps.
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.
