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

Vous avez un formulaire HTML prêt à l'emploi, mais son ajout à WordPress peut être délicat et nécessite beaucoup de tests.

La raison est simple : ajouter des formulaires HTML à WordPress nécessite la bonne approche pour s'assurer qu'ils fonctionnent correctement et s'intègrent parfaitement à votre site.

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 allons vous montrer 2 façons simples d'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 des champs tels que des zones de texte, des cases à cocher, des boutons radio et des champs 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 vous assurer que vous pouvez collecter et traiter correctement toutes les entrées utilisateur.

Pour résumer, voici les principaux avantages et défis de la création manuelle de formulaires HTML :

✅ Avantages	🛑 Défis
Temps de chargement des pages plus rapides avec un code léger	Assurer la compatibilité entre différents navigateurs
Contrôle total sur la conception et la fonctionnalité	Création de la validation des formulaires et de la gestion des erreurs
Personnalisation précise pour des exigences spécifiques	Configuration manuelle de la protection anti-spam
Meilleures opportunités d'optimisation des performances	Gestion de la configuration et du traitement côté serveur

La plupart des utilisateurs de WordPress trouvent que les plugins offrent le meilleur compromis. Ils vous donnent des options de personnalisation HTML sans la complexité de la configuration manuelle du serveur.

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 :

• Méthode 1 : Ajouter des formulaires HTML dans WordPress à l'aide du plugin HTML Forms (Facile)
• Méthode 2 : Ajouter du HTML personnalisé aux formulaires WordPress avec WPForms
• Astuce bonus : Télécharger une page HTML personnalisée sur WordPress
• FAQ : Comment ajouter des formulaires HTML dans WordPress
• Ressources supplémentaires : Plus de guides sur les formulaires WordPress

Prêt ? Commençons.

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

🎖️ 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 plutôt que sur les constructeurs visuels.

Étant donné que WordPress ne traite pas les soumissions de formulaires HTML bruts par défaut, un moyen simple d'ajouter un formulaire HTML à un site Web WordPress est d'utiliser un plugin de formulaire gratuit comme HTML Forms. Cela fournit le code backend nécessaire pour collecter et vous envoyer les données par e-mail, tout en vous permettant d'écrire le HTML vous-même.

Avec plus de 10 000 installations actives et une note de 4,9 étoiles sur 5 sur WordPress.org, c'est un outil de confiance pour créer et configurer des formulaires HTML en un seul endroit, vous évitant ainsi toute configuration côté serveur.

Pour commencer, assurons-nous que le plugin est installé sur votre site Web WordPress.

Depuis votre tableau de bord WordPress, allez dans Plugins » Ajouter depuis la barre latérale gauche et utilisez la boîte de recherche pour trouver le plugin.

Lorsque vous le voyez dans le résultat de recherche, cliquez sur « Installer maintenant », puis sur « Activer ». Si vous avez besoin d'aide, vous pouvez suivre notre guide étape par étape sur l'installation d'un plugin WordPress.

Après l'activation, vous pouvez accéder à HTML Forms » Ajouter depuis la barre latérale gauche de 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 HTML Forms 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 à la newsletter par e-mail. Cliquez 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 les champs déroulants soient juste en dessous du champ « E-mail ».

Étant donné que 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 depuis la balise <p> d'ouverture jusqu'à la balise </p> de fermeture.

Ensuite, collez simplement cet extrait de code juste après la balise de fermeture du champ « E-mail » (qui ressemble généralement à </p> ou </label>).

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 l'intégralité du bloc de paragraphe contenant l'étiquette et le champ de saisie du sujet, y compris les balises d'ouverture <p> et de fermeture </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 déplacé et supprimé les champs avec succès sans rien casser. Dans l'aperçu du formulaire ci-dessous, vous pouvez vérifier que le champ Sujet a disparu sans casser la mise en page du formulaire. 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 la section « Rediriger vers l’URL après les inscriptions réussies », vous pouvez copier et coller l’URL d’une page Web active de votre site Web WordPress. Alternativement, vous pouvez laisser le champ vide ou entrer 0 pour maintenir les utilisateurs sur la page actuelle 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 Page » 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 simplement une zone entre les blocs et cliquez sur le bouton « + » pour ajouter le bloc Formulaires HTML, ou cliquez sur l'icône d'insertion de bloc dans la barre d'outils en haut à gauche.

Maintenant, vous pouvez taper « Formulaires HTML » dans la barre de recherche en haut du panneau d'insertion de bloc 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 vous rendre 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

🎖️ Idéal pour : Les utilisateurs non techniques qui souhaitent des formulaires professionnels en quelques minutes sans codage. WPForms est salué par les utilisateurs pour avoir rendu possible la création rapide de beaux formulaires grâce à son interface intuitive de glisser-déposer.

Une autre approche consiste à utiliser un constructeur de formulaires de contact visuel comme WPForms, le plugin de formulaire WordPress le mieux noté avec plus de 6 millions d'installations actives et une note de 4,8 sur 5 étoiles basée sur plus de 14 000 avis.

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, en utilisant du 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 indiquer aux utilisateurs où ils en sont dans la complétion du formulaire. Le HTML personnalisé peut même vous permettre d'insérer des emojis ou d'ajouter une info-bulle.

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

Plus sur WPForms

WPForms est le constructeur de formulaires WordPress le plus populaire, avec plus de 6 millions d'installations actives.

Au-delà de son constructeur par glisser-déposer, il comprend une grande bibliothèque de modules complémentaires et d'intégrations qui peuvent étendre vos formulaires sans nécessiter de développement personnalisé. Par exemple, vous pouvez :

• Suivre et récupérer les abandons de formulaires (plan Elite)
• Créer des formulaires conversationnels (plan Pro)
• Mener des enquêtes et des sondages (plan Pro)
• Accepter les paiements via Stripe, PayPal, Square et Authorize.Net (plan Plus)
• Collecter des signatures numériques (plan Pro)
• Enregistrer automatiquement les utilisateurs WordPress (plan Pro)

La version gratuite WPForms Lite inclut le constructeur de formulaires de base et les champs essentiels. Le champ HTML utilisé dans ce tutoriel nécessite une licence premium (Basic ou supérieure). La disponibilité varie selon le plan : le champ HTML est disponible à partir de Basic (49,50 $/an), et la plupart des modules complémentaires avancés nécessitent Pro (199,50 $/an) ou Elite (299,50 $/an).

Chez WPBeginner, nous utilisons WPForms pour les formulaires de contact, les enquêtes annuelles et les formulaires de demande de migration de site car cela rend la création et la gestion des formulaires beaucoup plus faciles que de les coder à la main.

Obtenez plus d'informations sur ce plugin sur notre avis détaillé sur WPForms.

Avant de commencer, assurons-nous que vous disposez d'un compte WPForms avec une licence premium qui inclut le champ HTML (plan Basic ou supérieur).

Sur le site web de WPForms, cliquez sur le bouton « Obtenir WPForms maintenant », choisissez un plan qui inclut le champ HTML (licence Basic ou supérieure à 49,50 $/an ou plus), et finalisez votre achat.

Après votre inscription, vous aurez votre propre tableau de bord WPForms, où vous pourrez télécharger votre fichier zip WPForms et copier votre clé de licence.

Maintenant, vous êtes prêt à installer et activer WPForms sur votre site web WordPress.

Depuis votre tableau de bord WordPress, allez dans Plugins » Ajouter et cliquez sur le bouton « Téléverser un plugin » en haut.

Vous devriez maintenant voir l'outil de téléversement de fichiers.

Cliquez sur « Choisir un fichier » pour téléverser votre fichier zip WPForms depuis votre ordinateur local. Ensuite, cliquez simplement sur « Installer maintenant », puis sur « Activer ».

Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

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

Une fois terminé, vous pouvez commencer à créer votre formulaire et à ajouter du HTML personnalisé.

Pour ce guide, nous allons vous montrer comment ajouter une simple info-bulle à votre formulaire de contact.

Une infobulle est comme une petite boîte contextuelle qui apparaît lorsque vous placez 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 espace 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 créateur de formulaires IA (plan Basic ou supérieur), 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 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.

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 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 à modifier le texte pour qu'il corresponde à vos besoins. La partie title="" du code est exactement ce qui indique au navigateur web de créer l'effet de survol !

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.

Vos paramètres de notification et de confirmation de formulaire sont déjà configurés dans WPForms. Cependant, si vous souhaitez les personnaliser, allez dans « 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 : email1@example.com, email2@example.com, email3@example.com. Vous pouvez également survoler le bouton point d'interrogation à côté du champ « Envoyer à l'adresse e-mail » pour des instructions supplémentaires.

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.

Outre l'affichage d'un message de confirmation, vous pouvez rediriger les utilisateurs vers une nouvelle page ou une URL spécifique.

Une fois que tout est configuré, il est temps de publier et d'intégrer le formulaire WordPress.

Cliquez sur le bouton orange « Intégrer » dans le coin supérieur droit du constructeur de formulaires pour commencer la publication.

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, 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 une zone entre les blocs et cliquer sur le bouton « + », ou cliquer sur l'icône d'insertion de bloc dans la barre d'outils en haut à gauche. Allez-y et sélectionnez 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.

Maintenant, les utilisateurs peuvent commencer à remplir le formulaire et éventuellement s'inscrire à votre newsletter.

Pour voir toutes les soumissions de vos formulaires WPForms, accédez à 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 Géolocalisation pour suivre d'où l'utilisateur soumet le formulaire. Le second est le module complémentaire 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. Notez que les deux modules complémentaires sont disponibles dans la licence Pro (199,50 $/an) ou supérieure.

Les boutons « Spam » et « Corbeille » sont pratiques 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.

D'une manière générale, vous pouvez téléverser une seule page HTML sans fichiers CSS ou image séparés en utilisant un plugin de gestion de fichiers ou un client FTP.

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 consiste à utiliser un plugin de formulaire de contact comme WPForms ou Formidable Forms. Ces plugins gèrent tout en coulisses, y compris la sauvegarde des entrées, l'envoi de notifications par e-mail et le blocage du spam, vous n'avez donc pas à 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 :

• 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 créer un formulaire de réservation dans WordPress (méthodes faciles)
• Comment créer des formulaires multilingues dans WordPress
• Comment créer des formulaires conversationnels dans WordPress
• Comment exporter les entrées de formulaire WordPress vers CSV et Excel
• Guide ultime pour l'utilisation des formulaires 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.