Comment ajouter des formulaires HTML dans WordPress (2 méthodes)

Vous voulez écrire votre propre balisage de formulaire au lieu de faire glisser des champs dans un constructeur visuel ?

Bonne nouvelle : vous n'avez pas besoin d'écrire de PHP pour que ce formulaire fonctionne. Vous pouvez laisser un plugin léger gérer le traitement pendant que vous écrivez chaque balise vous-même. Alternativement, vous pouvez construire le formulaire visuellement et y déposer du HTML personnalisé exactement là où vous en avez besoin.

Dans ce guide, nous vous montrerons comment créer un formulaire HTML personnalisé qui fonctionne dans WordPress.

Que sont les formulaires HTML et pourquoi en créer un ?

Un formulaire HTML collecte les informations des visiteurs, comme les noms, les e-mails et les commentaires, comme tout autre formulaire sur le web. Ce qui le distingue, c'est *comment* il est construit. Au lieu de s'appuyer sur un éditeur visuel lourd par glisser-déposer, vous construisez un formulaire HTML avec du code brut. Cela signifie que vous tapez vous-même les champs (comme les zones de texte, les cases à cocher et les listes déroulantes).

Les personnes qui utilisent des formulaires HTML plutôt qu'un constructeur de formulaires par glisser-déposer le font généralement pour maximiser les performances de leur site web. Les formulaires HTML simples permettent à vos pages web de se charger un peu plus rapidement. Au-delà de la vitesse, écrire le code vous-même vous donne un contrôle total sur la conception. Au lieu d'être limité par les paramètres rigides d'un constructeur, vous pouvez personnaliser la mise en page exactement selon vos besoins.

La plupart des utilisateurs de WordPress trouvent que les plugins de constructeur de formulaires par glisser-déposer offrent la meilleure expérience utilisateur. Vous bénéficiez d'une personnalisation HTML complète sans les tracas de la configuration manuelle du serveur.

Voici tout ce que nous allons couvrir dans ce guide :

Méthode 1 : Ajouter des formulaires HTML dans WordPress avec un plugin

🎖️ Idéal pour : Les développeurs et les gestionnaires de sites qui souhaitent un contrôle HTML complet avec une solution légère et axée sur la performance. Le plugin met l'accent sur la simplicité et la vitesse par rapport aux constructeurs de formulaires visuels.

Vous pouvez ajouter un formulaire HTML à WordPress en utilisant un plugin de formulaire gratuit comme HTML Forms. Ce plugin gère le PHP et un tout petit peu de JavaScript requis pour exécuter un formulaire HTML dans WordPress, tout en vous donnant une liberté totale pour écrire le HTML vous-même.

La version gratuite couvre tout ce qui est dans ce tutoriel, y compris l'envoi de notifications par e-mail et le stockage de vos soumissions. La protection anti-spam est également gratuite.

Pour commencer, installez le plugin sur votre site WordPress. Si vous avez besoin d'aide, suivez notre guide étape par étape sur l'installation d'un plugin WordPress.

Après activation, allez dans HTML Forms » Ajouter Nouveau pour commencer à créer votre formulaire.

Tapez un nom pour votre formulaire dans le champ « Titre du formulaire ». Dans ce guide, nous créons un formulaire de contact simple, nous avons donc nommé le nôtre « Formulaire de contact ».

Ensuite, cliquez sur le bouton Créer le formulaire.

Une fois que vous avez fait cela, la page « Modifier le formulaire » apparaîtra, et vous pourrez commencer à personnaliser votre formulaire HTML.

En haut de la page, vous verrez les détails de votre formulaire, y compris le titre du formulaire, slug, et shortcode. Sous ces détails, vous trouverez cinq onglets : « Champs », « Messages », « Paramètres », « Actions » et « Soumissions ».

L'onglet « Champs » contient dix boutons qui génèrent votre code de champ.

Au bas de cet onglet, vous trouverez un formulaire HTML pré-construit ainsi qu'un aperçu.

Le formulaire par défaut est assez simple. Il comporte 4 champs pour que les utilisateurs saisissent leur nom, leur adresse e-mail, un bref sujet et un message.

Pour ajouter un nouveau champ, cliquez sur le bouton correspondant juste au-dessus de la boîte « Code du formulaire ».

Nous remplacerons le champ Sujet par un champ déroulant dans ce tutoriel.

Cliquez sur « Déroulant » pour ouvrir ses paramètres. Ensuite, tapez votre question dans la boîte « Étiquette du champ » et ajoutez un choix par type de demande, tel que « Question générale », « Ventes » et « Support ».

Après avoir saisi ces informations, cliquez sur « Ajouter un champ au formulaire ».

Vous verrez alors la nouvelle balise déroulante apparaître dans la boîte « Code du formulaire ». Faites simplement défiler vers le bas pour découvrir votre balisage mis à jour.

Pour rendre le formulaire convivial, plaçons le champ de liste déroulante juste en dessous du champ « Votre e-mail ». Comme ce plugin ne dispose pas d’un constructeur par glisser-déposer, vous devrez couper le code du constructeur de code et le coller là où vous souhaitez le placer.

Pour supprimer le champ Objet, supprimez l’intégralité du bloc de paragraphe contenant le champ Objet.

Une fois que vous avez terminé, vous voudrez vérifier le panneau « Aperçu du formulaire ».

Si vous ne le voyez pas, cliquez sur le lien « Afficher l’aperçu du formulaire ».

Cet aperçu en direct vous permet de confirmer que vos modifications ont fonctionné sans casser la mise en page.

Vous pouvez rapidement vérifier que le champ Objet a disparu et tester que votre nouvelle liste déroulante fonctionne correctement.

Ensuite, cliquez sur le bouton bleu « Enregistrer les modifications ».

Maintenant, vous voudrez peut-être vérifier la configuration du formulaire. Cliquez sur l’onglet « Messages » pour voir comment HTML Forms configure les messages de confirmation de soumission du formulaire.

Cet onglet vous permet de personnaliser les messages de confirmation que les utilisateurs verront.

Si vous êtes satisfait du texte par défaut, vous pouvez le laisser. Sinon, apportez vos modifications, puis cliquez sur Enregistrer les modifications.

Par défaut, un nouveau formulaire enregistre vos entrées dans la base de données, mais il ne vous enverra pas d’e-mail lorsqu’une personne le soumettra.

Pour résoudre ce problème, cliquez sur l’onglet Actions. Vous verrez une notification indiquant « Aucune action de formulaire configurée pour ce formulaire ».

Cliquez sur « Envoyer un e-mail ».

Les champs « De », « À » et « Message » sont tous obligatoires. Vous pouvez utiliser les champs variables listés directement sous la boîte de message pour insérer automatiquement les informations que le visiteur a saisies dans votre formulaire.

Après avoir rempli ces champs, cliquez sur « Enregistrer les modifications ». Vous recevrez désormais un e-mail chaque fois que quelqu’un soumettra votre formulaire.

Une fois tout configuré, il ne vous reste plus qu’à publier votre formulaire HTML. Accédez à la page ou à l’article où vous souhaitez intégrer le formulaire. Ensuite, survolez la zone où vous souhaitez insérer le formulaire et cliquez sur le bouton « + ».

À partir d’ici, commencez à taper « HTML Forms » dans la barre de recherche. Lorsque le bon bloc apparaît, cliquez dessus pour l’ajouter à votre page ou à votre article.

Dans le bloc HTML Forms, cliquez sur le menu déroulant et choisissez le formulaire que vous souhaitez afficher.

Une fois que vous avez sélectionné le formulaire dans le menu déroulant, cliquez sur le bouton « Mettre à jour ».

Votre formulaire de contact est maintenant en ligne. Voici à quoi il ressemblera pour vos visiteurs :

Avant de promouvoir le formulaire n’importe où, nous vous recommandons de le tester vous-même en soumettant un exemple d’entrée. C’est ainsi que vous confirmez que le formulaire n’est pas seulement affiché, mais qu’il est réellement livré.

Après avoir soumis une entrée de test, accédez à HTML Forms » Tous les formulaires. Ici, cliquez sur le lien « Soumissions » de votre formulaire.

Cela affiche toutes les soumissions de votre formulaire. Votre entrée de test apparaîtra dans le tableau, et vous devriez également recevoir une notification dans votre boîte de réception.

Le tableau « Soumissions » s’ouvre avec une colonne « Horodatage » indiquant quand le formulaire a été envoyé, suivie d’une colonne pour chaque champ.

Méthode 2 : Ajout de HTML personnalisé aux formulaires avec glisser-déposer

🎖️ Idéal pour : Toute personne souhaitant créer un formulaire visuellement tout en ayant la possibilité d'y insérer du HTML spécifique, tel qu'une info-bulle, un lien ou une note formatée.

En matière de création de formulaires, nous recommandons WPForms. Il offre un constructeur par glisser-déposer tout en vous permettant d'insérer votre propre balisage, de sorte qu'un lien, une note formatée ou une info-bulle se retrouve exactement là où vous le souhaitez.

Nous utilisons WPForms sur nos propres sites Web pour les formulaires de contact, la génération de prospects, les enquêtes annuelles, et plus encore.

WPForms Lite est entièrement gratuit, mais le champ HTML utilisé dans cette méthode est une fonctionnalité payante. Il est disponible dans le plan Basic (39,60 $/an) et supérieur.

Dans cette méthode, nous vous montrerons comment ajouter des extraits de code HTML pour personnaliser vos formulaires WordPress à l'aide de WPForms.

Pour commencer, installez et activez WPForms.

Une fois cela fait, vous pouvez commencer à créer des formulaires et à ajouter du HTML personnalisé. Pour ce guide, nous vous montrerons comment ajouter une simple info-bulle à votre formulaire de contact.

Pour commencer, créons le formulaire de contact en allant dans WPForms » Ajouter un nouveau.

Dans le panneau de configuration, commencez par donner un nom à votre formulaire.

Ce nom est uniquement à titre de référence interne, vous pouvez donc utiliser ce que vous voulez.

L'étape suivante consiste à décider comment vous souhaitez créer votre formulaire. Avec WPForms, vous pouvez partir d'un modèle prédéfini, créer à partir de zéro, ou décrire ce dont vous avez besoin et laisser le constructeur de formulaires IA l'assembler pour vous.

Si vous souhaitez utiliser le constructeur basé sur l'IA, entrez simplement une invite simple. L'IA créera alors le formulaire pour vous en quelques secondes.

Pour ce tutoriel, nous utiliserons un modèle prédéfini.

Comme il y a plus de 2 100 modèles de formulaires parmi lesquels choisir, vous pouvez utiliser la barre de recherche pour les filtrer rapidement. Pour ce faire, tapez simplement « Formulaire de contact » et attendez que la recherche se termine.

Pour examiner de plus près un modèle, vous pouvez utiliser la fonction d'aperçu intégrée. Survolez simplement n'importe quel modèle de formulaire et cliquez sur « Voir la démo ».

Une fois que vous avez trouvé le formulaire de contact parfait pour vos besoins, survolez-le une fois de plus et cliquez sur « Utiliser le modèle ».

Cela lancera le constructeur de formulaires. Vous verrez tous les outils de personnalisation dans le panneau de gauche et un aperçu en direct sur la droite.

Vous pouvez faire glisser des éléments du panneau de gauche et les déposer sur l'aperçu en direct. Vous pouvez également réorganiser les éléments dans l'aperçu par glisser-déposer.

Faites défiler le panneau de gauche jusqu'au groupe Fancy Fields, puis faites glisser le champ HTML directement sur votre formulaire.

Après avoir ajouté le champ HTML, cliquez dessus pour ouvrir ses options de personnalisation.

Pour commencer, tapez une « Étiquette » pour vous aider à identifier ce champ. Ceci est juste pour votre référence et n'est pas montré aux visiteurs, vous pouvez donc utiliser ce que vous voulez. Vous pouvez également laisser le champ vide.

Ensuite, vous insérerez le code HTML personnalisé dans le champ « Code ».

Pour créer une infobulle, vous pouvez utiliser la balise <span> ou simplement copier le code suivant et le coller dans le champ « Code » :

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Ceci est juste un exemple de code, n'hésitez donc pas à le modifier pour répondre à vos besoins. La partie title="" du code est exactement ce qui indique au navigateur Web de créer l'effet de pop-up au survol, vous obtenez ainsi l'info-bulle sans ajouter de CSS à votre site.

Notez que WPForms n'affiche pas le code HTML dans l'aperçu du constructeur de formulaires. Pour tester l'info-bulle, cliquez sur « Aperçu ».

Cela ouvrira un nouvel onglet.

Ici, vous pouvez tester que l'extrait de code HTML pour votre info-bulle fonctionne correctement en survolant le texte. Après quelques instants, l'info-bulle devrait apparaître.

Lorsque vous êtes satisfait des résultats, vous pouvez revenir au générateur de formulaires pour finaliser votre formulaire.

WPForms configure automatiquement vos paramètres de notification et de confirmation pour vous. Cependant, si vous souhaitez les personnaliser, sélectionnez « Paramètres », puis « Notifications » ou « Confirmations ».

Dans la section « Notifications », vous pouvez ajouter plusieurs destinataires pour la soumission de votre formulaire de contact.

Pour ajouter plusieurs destinataires, séparez les adresses e-mail par des virgules, comme email1@example.com, email2@example.com, email3@example.com.

Une fois que vous avez personnalisé vos notifications et autres paramètres, il est temps de publier et d'intégrer le formulaire WordPress.

Cliquez sur le bouton « Intégrer » dans le coin supérieur droit du générateur de formulaires.

WPForms vous demandera alors si vous souhaitez ajouter le formulaire à une page existante ou à une nouvelle page.

Dans ce guide, nous choisirons « Sélectionner une page existante ».

Dans la fenêtre contextuelle suivante, choisissez une page dans la liste des pages disponibles. Ensuite, vous pouvez cliquer sur « C'est parti ! » pour ouvrir l'éditeur de blocs.

Maintenant, survolez la zone où vous souhaitez ajouter le formulaire et cliquez sur le bouton « + ». Ensuite, sélectionnez le bloc WPForms.

Vous pouvez maintenant choisir le formulaire que vous souhaitez afficher, en utilisant le menu déroulant.

Après avoir sélectionné votre formulaire, WPForms le chargera dans l'éditeur de blocs.

Lorsque vous êtes satisfait de la configuration, cliquez sur le bouton « Mettre à jour ».

Et voilà ! Vous avez ajouté du HTML personnalisé à votre formulaire de contact WPForms et l'avez mis en ligne sur votre site Web WordPress.

Avant d'envoyer de vrais visiteurs au formulaire, nous vous recommandons de soumettre une entrée de test rapide pour vous assurer que tout fonctionne.

Après avoir soumis un test, allez dans WPForms » Tous les formulaires. Ici, survolez votre formulaire de contact et cliquez sur « Entrées » lorsqu'il apparaît.

Sur l'écran suivant, vous verrez toutes vos soumissions de formulaires.

Le tableau affiche chaque information soumise par les utilisateurs, ainsi que l'heure exacte de la soumission.

FAQ : Comment ajouter des formulaires HTML dans WordPress

Pourquoi mon formulaire HTML ne fonctionne-t-il pas sur WordPress ?

Très probablement, WordPress affiche votre formulaire mais ne le traite pas. Coller simplement un formulaire HTML dans une page ne suffit pas pour qu'il fonctionne.

Bien que le formulaire puisse s'afficher correctement, WordPress ne traite pas automatiquement les soumissions de formulaire. Contrairement à un site HTML de base, il n'y a pas de script intégré pour gérer les données lorsqu'une personne clique sur Soumettre.

Pour rendre le formulaire fonctionnel, vous devrez ajouter du code PHP personnalisé pour traiter les soumissions ou utiliser un plugin qui s'en charge pour vous.

Puis-je toujours personnaliser mes formulaires si j'utilise du HTML ?

Oui, absolument. L'utilisation du HTML vous donne un contrôle total sur l'apparence et le fonctionnement de votre formulaire. Gardez simplement à l'esprit que vous serez également responsable de tout le reste, tel que :

• Styliser le formulaire avec votre propre CSS
• Ajouter une validation, des messages d'erreur ou une logique conditionnelle avec du code personnalisé
• S'assurer que le formulaire fonctionne correctement sur différents appareils et navigateurs

Donc oui, vous avez une flexibilité totale, mais aussi une responsabilité totale.

Ressources supplémentaires : Plus de guides sur les formulaires WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter des formulaires HTML dans WordPress. Ensuite, vous voudrez peut-être consulter nos guides sur :

• Comment exporter les entrées de formulaire WordPress vers CSV et Excel
• Comment personnaliser et styliser vos formulaires WordPress
• Meilleurs plugins de formulaire de contact WordPress

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.