Résumé IA
Vous vous demandez comment supprimer le bouton de soumission des formulaires de calcul pour une meilleure expérience utilisateur ?
En supprimant le bouton de soumission des formulaires de calcul créés par WPForms, vous pouvez fournir des calculs instantanés à vos visiteurs.
Dans ce guide, vous apprendrez les étapes simples pour modifier vos formulaires afin d'obtenir des calculs transparents et en temps réel sans avoir besoin d'une action de soumission de formulaire.
Comment supprimer le bouton de soumission des formulaires de calcul
Supprimer le bouton de soumission des formulaires de calcul avec WPForms est incroyablement facile. Tout ce que vous avez à faire est de suivre ces étapes simples ci-dessous :
Dans cet article
Les prérequis
Avant de passer aux étapes de désactivation du bouton de soumission, assurons-nous d'avoir accompli quelques étapes importantes.
Si vous avez déjà terminé ces étapes, n'hésitez pas à passer à la section sur la suppression du bouton de soumission.
1. Posséder une licence WPForms Pro
WPForms est un plugin de création de formulaires et de calcul réputé qui permet aux utilisateurs de créer une large gamme de formulaires, y compris un calculateur de jours entre dates.
Il est important que vous ayez la dernière version de WPForms installée, ainsi que l'accès à la licence Pro.
La version Pro vous donne accès à des intégrations premium, des modules complémentaires et de nombreuses fonctionnalités précieuses comme la logique conditionnelle, les rapports de soumission de formulaires, etc.
2. Utiliser le module complémentaire Calculs
Pour créer des calculateurs personnalisés dans WordPress, vous savez probablement déjà que vous devez avoir le module complémentaire Calculs WPForms installé.
Vous pouvez utiliser ce module complémentaire pour insérer des opérateurs logiques et des instructions si-alors afin de créer des devis personnalisés ou de créer des calculateurs intelligents.
Il vous permet même d'utiliser des fonctions mathématiques intégrées pour arrondir les nombres, calculer des plages horaires, trouver des moyennes, et plus encore.
3. Sélectionner un modèle de formulaire de calcul
Enfin, vous devez avoir un formulaire prêt. Si vous devez en créer un, WPForms propose plus de 2 100 modèles pré-conçus qui facilitent la création de formulaires.
Ceux-ci incluent des modèles de formulaires de calcul conçus par des professionnels qui peuvent être personnalisés pour s'adapter à une variété de cas d'utilisation et d'industries, tels que :
- Modèle de formulaire de calcul hypothécaire — parfait pour les agences immobilières car il permet aux acheteurs potentiels de calculer facilement leur hypothèque et leurs paiements mensuels.
- Modèle de formulaire de calcul des frais d'expédition — aide les sites de commerce électronique à gagner du temps et des efforts en fournissant un simple calculateur d'expédition pour les clients.
- Modèle de formulaire de calcul de l'IMC — idéal pour les sites Web consacrés à la forme physique ou à la santé, qui aident les utilisateurs à évaluer leur état de santé actuel.
- Modèle de formulaire de calcul du ROI — aide les entreprises et les spécialistes du marketing à évaluer efficacement la rentabilité de leurs campagnes ou de leurs projets.
La meilleure partie de tout cela : vous pouvez utiliser le module complémentaire de calcul pour créer des calculateurs personnalisés sans aucune connaissance en HTML, javascript ou en codage complexe.
Supprimer le bouton de soumission
Une fois ces prérequis remplis, vous êtes prêt à modifier votre formulaire pour supprimer le bouton de soumission afin d’améliorer l’expérience utilisateur.
1. Accéder à la bibliothèque d'extraits WPForms
Depuis votre tableau de bord WordPress, allez simplement dans WPForms » Outils. Naviguez ensuite vers l’onglet Extraits de code.
Cela affichera un message pop-up indiquant : « Veuillez installer WPCode pour utiliser la bibliothèque d’extraits WPForms ».
2. Installer + Activer WPCode
Tout ce que vous avez à faire maintenant est de cliquer sur le bouton Installer + Activer WPCode. Le plugin va maintenant prendre quelques secondes pour s’installer.
Une fois le plugin WPCode installé, vous pourrez accéder à la liste complète des extraits WPForms.
3. Utiliser l'extrait Masquer le bouton de soumission
Maintenant, recherchez l’extrait de code pour masquer le bouton de soumission en tapant son nom dans le champ Rechercher des extraits. Ensuite, cliquez sur le bouton Installer l’extrait.
Voici l’extrait de code que nous allons importer :
Cela vous redirigera vers la page d’aperçu de l’extrait WPCode, où vous pourrez voir le code intégré automatiquement.
Maintenant, tout ce que vous avez à faire est d’activer le code de l’extrait. Pour ce faire, déplacez le curseur de Inactif à Actif.
La prochaine étape pour activer l’extrait de code sur l’ensemble du site est d’appuyer sur le bouton Mettre à jour, juste à côté de l’option de curseur Actif.
En suivant cette approche, vous n’aurez besoin d’ajouter l’extrait qu’une seule fois via la bibliothèque d’extraits WPForms.
Ensuite, pour chaque formulaire sur lequel l’utilisateur souhaite utiliser cet extrait, il devra ajouter le nom de la classe CSS du bouton de soumission dans le constructeur.
4. Ajouter une classe CSS au bouton de soumission
Maintenant, tout ce qu’il reste à faire est d’ajouter la classe CSS dans le constructeur de formulaire du calculateur à partir duquel vous souhaitez supprimer le bouton de soumission.
Pour ce faire, ouvrez votre formulaire de calculateur et accédez à l’onglet Général, puis faites défiler jusqu’à l’onglet Avancé.
Après cela, collez le code CSS wpf-calc-form dans le champ Classe CSS du bouton de soumission pour activer l’extrait de code.
Vous pouvez maintenant prévisualiser votre formulaire pour constater que le bouton de soumission de votre calculateur a été supprimé avec succès !
Plus de questions sur les formulaires de calcul
Les formulaires de calculateur sont un sujet populaire parmi nos lecteurs. Voici les réponses à quelques questions fréquemment posées à leur sujet.
Pour désactiver le bouton de soumission dans un formulaire, surtout si vous utilisez WPForms Pro, vous pouvez appliquer du CSS personnalisé. Allez dans WPForms » Outils. Naviguez ensuite vers l’onglet Extraits de code pour accéder à la bibliothèque d’extraits WPForms, qui contient une solution pour désactiver le bouton de soumission dans un formulaire.
Oui, un formulaire peut fonctionner sans bouton de soumission. C’est courant dans les formulaires qui se soumettent automatiquement ou qui utilisent des méthodes alternatives de capture de données. Avec WPForms Pro, vous pouvez créer de tels formulaires en les personnalisant avec du CSS pour masquer le bouton de soumission, en utilisant l’intégration WPCode pour ajouter le code nécessaire de manière transparente.
Ensuite, Apprenez à créer un calculateur en ligne personnalisé
L’ajout d’un calculateur à votre site Web peut augmenter l’engagement en encourageant les visiteurs à rester et à obtenir des réponses à leurs problèmes. Consultez ce guide sur comment créer un calculateur personnalisé dans WordPress pour les besoins uniques de votre site Web.
Créer un calculateur en ligne personnalisé
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é, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
Ce CSS n'empêche pas la soumission du formulaire lorsque la touche Entrée est utilisée dans l'un des champs de texte utilisés dans un formulaire de calcul.
Salut Dean,
Vous avez raison : cet extrait de CSS masque uniquement le bouton de soumission, mais n'empêche pas la soumission du formulaire lorsque la touche Entrée est enfoncée dans un champ de texte.
Si vous souhaitez également désactiver la touche Entrée, nous vous recommandons d'utiliser l'extrait de code fourni dans notre documentation pour les développeurs ici : Comment arrêter la touche Entrée pour soumettre le formulaire.
J'espère que cela vous aidera !