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

Vous avez un formulaire HTML prêt à l'emploi, mais son ajout à WordPress se transforme en essais et erreurs.

La raison est simple : WordPress ne gère pas les formulaires de la même manière qu'un site web HTML classique. Si vous copiez-collez simplement le code du formulaire, il ne fonctionnera souvent pas correctement sans quelques étapes supplémentaires.

Sur nos propres sites, nous utilisons le plugin WPForms car il s'occupe de toute la configuration pour nous. Cela dit, nous savons que de nombreux utilisateurs préfèrent utiliser des formulaires HTML personnalisés pour garder les choses légères, garder le contrôle total de leur code, ou éviter d'ajouter un autre plugin.

Dans ce guide, nous vous montrerons 2 méthodes simples pour ajouter des formulaires HTML dans WordPress, afin que votre formulaire s'affiche correctement, fonctionne comme prévu et ne casse pas votre site. 💡

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

Les formulaires HTML fonctionnent un peu comme les autres formulaires de site. Ils permettent aux visiteurs de saisir et de soumettre des informations telles que des noms, des adresses e-mail, des commentaires, des commandes, et plus encore.

Ce qui les différencie, c'est que les formulaires HTML sont créés à l'aide de code plutôt qu'à l'aide d'un éditeur visuel glisser-déposer comme un plugin de formulaire. Cela signifie que vous devez définir vous-même les champs tels que les zones de texte, les cases à cocher, les boutons radio et les menus déroulants.

Voici quelques avantages de la création de formulaires à partir de zéro en utilisant HTML :

• Performances optimisées. Les formulaires HTML ont tendance à se charger plus rapidement et à utiliser moins de mémoire car le code est léger.
• Contrôle. Vous aurez un contrôle total sur la conception et la fonctionnalité du formulaire car vous n'êtes pas limité par les fonctionnalités d'un constructeur de formulaires.
• Personnalisation. Les formulaires HTML peuvent être adaptés exactement à vos besoins, offrant une personnalisation de formulaire plus flexible.

Bien que la création de formulaires HTML à partir de zéro soit un excellent moyen d'apprendre et de pratiquer le codage, cela présente ses propres défis.

Vous pourriez avoir des problèmes de compatibilité entre navigateurs, où le formulaire fonctionne différemment sur différents navigateurs Web.

De plus, d'après notre expérience, la gestion de la validation des formulaires avec JavaScript peut être délicate. Elle nécessite des tests approfondis pour garantir que vous pouvez collecter et traiter correctement toutes les entrées utilisateur.

Cela dit, il existe des moyens d'ajouter des formulaires HTML sans ces complexités. Ainsi, que vous gériez un blog WordPress, un site d'entreprise ou une boutique en ligne, vous pouvez facilement ajouter des formulaires HTML à votre site sans avoir à coder à partir de zéro.

Dans les sections suivantes, nous vous montrerons comment ajouter des formulaires HTML à WordPress. Voici un aperçu rapide des 2 méthodes que nous aborderons dans ce guide :

Prêt ? Commençons.

Méthode 1 : Ajouter des formulaires HTML dans WordPress à l'aide du plugin HTML Forms (Facile)

Un moyen simple d'ajouter un formulaire HTML à un site Web WordPress est d'utiliser un plugin de formulaire gratuit comme HTML Forms. C'est un excellent outil pour créer et configurer des formulaires HTML en un seul endroit, vous n'avez donc pas à vous soucier de la configuration côté serveur.

Dans ce guide, nous utiliserons la version gratuite du plugin, qui comprend tout ce dont vous avez besoin pour créer un formulaire HTML de base.

Pour commencer, assurons-nous que le plugin est installé sur votre site Web WordPress. Si vous avez besoin d'aide, vous pouvez suivre notre guide étape par étape sur l'installation d'un plugin WordPress.

Une fois activé, vous pouvez accéder à Formulaires HTML » Ajouter dans votre tableau de bord d'administration WordPress pour commencer à créer votre formulaire de contact.

Cela vous redirigera vers la page « Ajouter un nouveau formulaire ».

À partir de là, la première chose que vous devrez faire est de nommer votre formulaire en tapant le nom dans le champ « Titre du formulaire ». Par exemple, nous avons nommé notre formulaire « Inscription à la newsletter ».

Ensuite, cliquez sur le bouton « Créer un formulaire » sous le champ.

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

En haut de la page, vous verrez les détails de votre formulaire, y compris le titre du formulaire, le slug et le shortcode. Vous n’avez pas à mémoriser ces détails, car ils seront disponibles sur le tableau de bord des formulaires HTML lorsque vous en aurez besoin.

Sous ces détails, vous trouverez les onglets du menu. Dans l'onglet « Champs », vous pouvez voir divers boutons de champ, tels que « Texte », « Dates », « Cases à cocher » et « Boutons radio », à ajouter à vos formulaires.

Maintenant, faites défiler un peu plus bas.

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

Ce formulaire de contact est assez simple. Il comporte 4 champs pour que les utilisateurs puissent taper leur nom, leur adresse e-mail, un bref sujet et un message.

Maintenant, disons que vous souhaitez ajouter un nouveau champ avec une inscription à une newsletter par e-mail. Cliquez ensuite simplement sur l'un des boutons de champ au-dessus de 'Code du formulaire'.

Par exemple, nous utiliserons un champ déroulant et créerons une option 'Oui/Non' pour l'inscription à la newsletter.

À partir de là, vous devrez cliquer sur « Dropdown » (Déroulant), et cela ouvrira les options de configuration du champ déroulant. Vous pouvez commencer à compléter les détails, qui incluent l'étiquette du champ et les choix.

Après avoir saisi les détails, vous pouvez cliquer sur « Add Field to Form » (Ajouter le champ au formulaire).

Ensuite, vous devriez voir la balise du champ déroulant dans la section « Form Code » (Code du formulaire). Faites simplement défiler l'onglet pour vérifier.

La prochaine étape consiste à réorganiser le formulaire de contact.

Pour maintenir un bon flux, vous voudrez que le champ déroulant soit juste en dessous du champ « Email ».

Comme ce plugin n’a pas de constructeur par glisser-déposer, vous devrez déplacer le code manuellement. Allez-y et coupez le code du champ déroulant (de la balise d'ouverture à la balise de fermeture
).

Ensuite, collez simplement cet extrait de code juste après la balise de fermeture du champ 'Email'.

Le champ « Subject » (Objet) par défaut pourrait ne pas être nécessaire pour un formulaire d'inscription à une newsletter. Nous vous recommandons donc de supprimer ce champ.

Vous pouvez le faire en supprimant sa balise de la première balise <p> à la dernière balise </p>.

Après avoir déplacé et supprimé des balises, vous devrez faire défiler l'onglet jusqu'à la section « Form Preview » (Aperçu du formulaire).

Dans cette section, vous pouvez vérifier si vous avez réussi à déplacer et supprimer les champs sans rien casser. Vous pouvez également vérifier si le menu déroulant fonctionne correctement.

Lorsque vous êtes satisfait des résultats, cliquez sur le bouton bleu « Save Changes » (Enregistrer les modifications) sous la section « Form Code ».

Une fois le processus d'enregistrement terminé, vous devriez voir une notification « Form updated. » (Formulaire mis à jour) en haut de cette page.

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

Cliquez simplement sur « Messages » pour ouvrir l'onglet.

Cet onglet vous permet de modifier le texte pré-écrit pour les cas où la soumission du formulaire d'un utilisateur est réussie et pour d'autres situations similaires.

Si tout vous semble correct, vous pouvez le laisser tel quel. Si vous apportez des modifications, n’oubliez pas de cliquer sur le bouton 'Enregistrer les modifications' afin de ne pas perdre votre progression.

Ensuite, allons à l'onglet « Paramètres ».

Par défaut, HTML Forms définira ‘Oui’ pour enregistrer chaque soumission de formulaire et ‘Non’ pour masquer le formulaire après une soumission réussie. Vous pouvez personnaliser cela selon vos besoins.

Ensuite, dans le champ ‘Rediriger vers l’URL après une inscription réussie’, vous pouvez copier et coller l’URL d’une page Web active de votre site Web WordPress. Ou, tapez 0 dans le champ pour maintenir les utilisateurs sur la page après une soumission de formulaire réussie.

Lorsque tout est configuré, il ne reste plus qu'à ajouter le formulaire HTML à une page WordPress.

Dirigeons-nous vers Articles ou Pages » Tous les articles ou Toutes les pages depuis le tableau de bord WordPress.

Pour ce guide, nous allons ajouter le formulaire HTML à notre page ‘Contact’.

Nous allons donc survoler la page ‘Contact’ dans la liste et cliquer sur ‘Modifier’ lorsqu’elle apparaît.

Cela lancera l’éditeur de blocs de la page ‘Contact’.

Dans l’éditeur, vous pouvez commencer à choisir une zone pour ajouter le formulaire. Ensuite, survolez-le simplement et cliquez sur le bouton ‘+’ pour ajouter le bloc HTML Forms.

Maintenant, vous pouvez taper ‘HTML Forms’ dans la barre de recherche pour trouver rapidement le bloc. Une fois que vous avez le résultat de la recherche, cliquez dessus.

Vous verrez alors un menu déroulant dans le bloc ‘HTML Forms’. Développez-le simplement et sélectionnez le formulaire que vous souhaitez afficher. Ici, nous choisissons le formulaire ‘Inscription à la newsletter’ que nous venons de créer.

Le formulaire apparaîtra lorsque vous publierez votre contenu. Donc, une fois que vous avez sélectionné le formulaire dans le menu déroulant, vous pouvez cliquer sur le bouton ‘Mettre à jour’.

Votre formulaire est maintenant en ligne et les utilisateurs peuvent s'inscrire à votre newsletter. Voici à quoi il pourrait ressembler sur votre site :

Pour voir les soumissions de formulaires, vous pouvez d'abord aller sur Formulaires HTML » Tous les formulaires. Cela vous mènera à la liste de tous vos formulaires HTML.

Ensuite, survolez simplement un formulaire et cliquez sur le bouton « Soumissions » lorsqu'il apparaît.

À partir de là, vous pouvez voir toutes vos soumissions de formulaires.

Le tableau « Soumissions » détaille toutes les informations que les utilisateurs ont remplies dans votre formulaire. Ensuite, il y a la colonne « Horodatage », qui vous indique quand ils ont soumis le formulaire.

Par exemple, ici, la première soumission a été faite par « Utilisateur 1 ».

D'après le tableau, nous pouvons voir que l'utilisateur a soumis le formulaire le 25 juin vers 13h. De plus, « Utilisateur 1 » a répondu « Peut-être plus tard » à la question « Souhaitez-vous vous abonner à notre newsletter ? ». Donc, dans ce cas, vous ne devriez pas ajouter son adresse e-mail à votre liste de diffusion.

Méthode 2 : Ajouter du HTML personnalisé aux formulaires WordPress avec WPForms

Une autre approche consiste à utiliser un constructeur de formulaire de contact visuel. C'est la meilleure option si vous souhaitez créer le formulaire visuellement mais que vous devez insérer des éléments HTML spécifiques, tels qu'un lien, un format de texte ou une info-bulle, à l'aide de code.

Par exemple, vous pourriez utiliser du HTML personnalisé pour afficher un bref message d'avertissement sur un formulaire de paiement avec un lien vers votre page « Politique de remboursement et de retour ». Ou vous pouvez ajouter une barre de progression pour informer les utilisateurs de leur progression dans la complétion du formulaire. Le HTML personnalisé peut même vous permettre d'insérer des émojis ou d'ajouter une info-bulle.

Dans cette méthode, nous vous montrerons comment ajouter des extraits de code HTML pour personnaliser vos formulaires WordPress en utilisant WPForms, le meilleur constructeur de formulaires pour WordPress.

Sur notre site WPBeginner, nous l'utilisons pour les formulaires de contact, les enquêtes annuelles et les demandes de migration de site. Obtenez plus d'informations sur ce plugin dans notre avis détaillé sur WPForms.

WPForms est livré avec des modules complémentaires complets en un clic et des intégrations tierces. Par exemple, vous pouvez installer le module complémentaire Form Abandonment pour suivre et réduire les problèmes d'abandon de formulaire et bien plus encore !

Ainsi, WPForms rend l'extension des fonctionnalités de votre formulaire plus facile que si vous aviez codé manuellement votre formulaire WordPress à partir de zéro.

Avant de commencer, assurons-nous que WPForms est installé et activé sur votre site WordPress. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez naviguer vers WPForms » Paramètres pour saisir votre code de licence. Après avoir entré la clé, cliquez simplement sur le bouton « Vérifier la clé » pour lancer la vérification.

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

Une info-bulle est comme une petite boîte pop-up qui apparaît lorsque vous passez votre souris sur un élément web. C'est pratique car cela permet aux utilisateurs d'en savoir plus sur un élément web spécifique sans avoir à cliquer ou à quitter la page sur laquelle ils se trouvent.

Mais d'abord, créons le formulaire de contact. Rendez-vous simplement sur WPForms » Ajouter nouveau depuis votre zone d'administration WordPress pour commencer.

Cela ouvrira le panneau « Configuration », où vous devrez d'abord nommer votre formulaire. Ce nom est uniquement à des fins de référence interne, vous pouvez donc utiliser ce que vous voulez.

La prochaine étape consiste à sélectionner la manière dont vous souhaitez créer votre formulaire.

Avec WPForms, vous pouvez créer des formulaires en utilisant le générateur de formulaires IA, un modèle prédéfini ou à partir de zéro.

Si vous souhaitez utiliser le générateur alimenté par l'IA, il vous suffit de saisir une simple invite. L'IA créera alors le formulaire pour vous en quelques secondes.

Pour ce tutoriel, cependant, nous utiliserons un modèle pré-conçu.

Comme il y a plus de 2 000 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 soit terminée.

Si vous souhaitez explorer chaque résultat de recherche pour voir à quoi ressemble le formulaire, vous pouvez profiter de la fonction d'aperçu. Survolez simplement le 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 formulaire.

Désormais, tous les outils de personnalisation se trouvent dans le panneau de gauche, et l'aperçu en direct du formulaire se trouve sur le côté droit de votre écran.

Sur cette page, vous pouvez utiliser la fonction glisser-déposer pour ajouter des éléments du panneau de gauche à l'aperçu en direct. Vous pouvez également utiliser la fonction pour déplacer des champs dans l'aperçu en direct.

Essayons d'ajouter le champ HTML au formulaire. Il vous suffit de faire défiler le panneau de gauche, puis de faire glisser et déposer « HTML » sur le formulaire.

Après avoir inséré le champ HTML, vous pouvez cliquer dessus pour ouvrir ses options de personnalisation. Ici, la première chose à faire est de remplir le « Libellé » du champ. Vous pouvez également le laisser vide.

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

Pour créer une bulle d'aide, 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 à modifier le texte pour qu'il corresponde à vos besoins.

Notez que WPForms n'affiche pas le code HTML dans l'aperçu du constructeur de formulaires. Pour prévisualiser le champ et vous assurer que tout est correct, vous pouvez d'abord enregistrer les modifications et cliquer sur « Aperçu ».

Cela vous mènera à un nouvel onglet.

Maintenant, testons si l'extrait de code HTML pour votre info-bulle fonctionne correctement. Survolez simplement le texte et attendez que l'info-bulle apparaisse pendant quelques secondes.

Lorsque vous êtes satisfait du résultat, vous pouvez revenir au constructeur de formulaires pour finaliser votre formulaire.

Your form notification and confirmation settings are already set up in WPForms. However, if you want to customize them, go to ‘Settings’ and then ‘Notifications’ or ‘Confirmations.’

In the ‘Notifications’ section, you can add multiple recipients for your contact form submission.

You’ll see a brief instruction if you hover over the question mark button next to the ‘Send to Email Address’ field. You’ll want to follow it to make sure your notification is sent to the right email addresses.

You can also edit the pre-made copy for your email subject line.

For example, we changed ours from ‘New Entry: Contact Form’ to ‘You’ve got mail: New contact.’

Once you’ve customized your notifications, you’ll want to move to the ‘Confirmation’ panel.

By default, WPForms sets your confirmation type to ‘Message’ and has the pre-made copy ready for you. You can definitely change these settings if you want to.

Other than showing a confirmation message, you can redirect users to a new page or a specific URL.

Once everything is set, it’s time to publish and embed the WordPress form.

Go ahead and click the ‘Embed’ button to start publishing. WPForms will then ask if you want to add the form to an existing or a new page. In this guide, we will choose ‘Select Existing Page.’

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

Maintenant, vous pouvez survoler la zone où vous souhaitez placer le formulaire et cliquer sur le bouton « + ». Sélectionnez ensuite le bloc WPForms.

Ensuite, vous pouvez choisir un formulaire dans le menu déroulant du bloc WPForms.

Une fois que vous avez sélectionné un formulaire, WPForms le chargera dans la zone de contenu sélectionnée. Si vous souhaitez afficher le titre du formulaire, vous pouvez vous rendre dans l'onglet « Bloc » du panneau de droite et activer le curseur « Afficher le titre ».

Lorsque vous êtes satisfait de tout, 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.

Désormais, les utilisateurs peuvent commencer à remplir le formulaire et éventuellement s'inscrire à votre newsletter par e-mail.

Pour voir toutes les soumissions de formulaires WPForms, naviguez vers WPForms » Tous les formulaires.

Ensuite, vous pouvez survoler « Formulaire de contact » ou n'importe quel formulaire de la liste et cliquer sur « Entrées » lorsque le bouton apparaît.

Sur l'écran suivant, vous devriez pouvoir voir toutes les soumissions de votre formulaire.

Le tableau détaille toutes les informations que les utilisateurs ont soumises avec le formulaire, ainsi que l'heure de la soumission.

Par exemple, le 2 juillet vers 8 heures du matin, « Utilisateur 3 » a déclaré vouloir s'inscrire à la newsletter par e-mail et a laissé une question sur la façon de contacter notre équipe de support client.

Nous pouvons également voir la colonne « Actions ». Dans cette colonne, il y a plusieurs boutons : « Voir », « Modifier », « Spam » et « Corbeille ».

Si vous cliquez sur « Voir », WPForms vous redirigera vers la page de présentation dédiée d'une entrée. Sur cette page, le plugin vous encourage à activer deux modules complémentaires.

Le premier est le module complémentaire de géolocalisation pour suivre d'où l'utilisateur soumet le formulaire. Le second est le module complémentaire de parcours utilisateur, qui peut vous aider à analyser le parcours de l'utilisateur sur votre site jusqu'à ce qu'il clique sur le bouton « Soumettre ».

Nous vous recommandons d'installer et d'activer ces modules complémentaires pour des performances de formulaire plus optimisées.

Les boutons « Spam » et « Corbeille » sont utiles pour marquer les soumissions frauduleuses et les supprimer de vos entrées. Pour en savoir plus sur la réduction des soumissions de formulaires frauduleuses, vous pouvez lire notre guide sur comment bloquer le spam des formulaires de contact.

Astuce bonus : Télécharger une page HTML personnalisée sur WordPress

Vous cherchez peut-être aussi un moyen de téléverser une page HTML personnalisée sur votre site WordPress. Cela peut être utile si vous avez un modèle statique que vous souhaitez utiliser ou une page HTML d'un ancien site web.

En règle générale, vous pouvez télécharger une seule page HTML sans fichiers CSS ou image séparés directement.

Mais, si la page que vous souhaitez télécharger inclut des fichiers CSS et des images séparés, vous devrez les télécharger dans un dossier, en conservant la même structure de répertoire que celle utilisée dans votre fichier HTML.

AIOSEO, le meilleur plugin SEO pour WordPress, peut aider les moteurs de recherche à trouver votre page HTML personnalisée en l'ajoutant à vos sitemaps XML.

Pour en savoir plus, consultez notre guide pour débutants sur comment téléverser une page HTML sur WordPress sans erreurs 404.

FAQ : Comment ajouter des formulaires HTML dans WordPress

Nous avons répondu à quelques questions courantes pour vous aider à ajouter facilement des formulaires HTML à WordPress.

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

C'est un problème courant. Dans WordPress, coller simplement un formulaire HTML ne suffit généralement 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.

Comment puis-je m'assurer que mes soumissions de formulaire aboutissent ?

L'option la plus simple est d'utiliser un plugin de formulaire de contact comme WPForms ou Formidable Forms. Ces plugins gèrent tout en coulisses, y compris l'enregistrement des entrées, l'envoi de notifications par e-mail et le blocage du spam, vous évitant ainsi de tout configurer vous-même.

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 :

• La mise en forme du formulaire avec votre propre CSS
• L'ajout de validation, de messages d'erreur ou de 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 créer un formulaire RSVP dans WordPress
• Comment créer un formulaire de réservation en ligne dans WordPress
• Comment créer un formulaire WordPress avec un sélecteur de date
• Comment créer des formulaires multilingues dans WordPress
• Comment créer des formulaires conversationnels dans WordPress
• Comment styliser et personnaliser vos formulaires WordPress
• Comment exporter les entrées de formulaire WordPress vers CSV et Excel
• Guide ultime pour l'utilisation des formulaires WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.