Comment supprimer le bouton Soumettre des formulaires de calcul

Publié: 2023-11-15

Vous vous demandez comment supprimer le bouton Soumettre des formulaires de calcul pour une expérience utilisateur plus rationalisée ?

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 pour des calculs transparents et en temps réel sans avoir besoin d'une action d'envoi de formulaire.

Comment supprimer le bouton Soumettre des formulaires de calcul

Supprimer le bouton de soumission des formulaires de calcul avec WPForms est incroyablement simple. Tout ce que vous avez à faire est de suivre ces étapes simples ci-dessous :

Dans cet article

  • Les prérequis
    • 1. Avoir une licence WPForms Pro
    • 2. Utilisation du module complémentaire de calculs
    • 3. Sélection d'un modèle de formulaire de calculatrice
  • Suppression du bouton Soumettre
    • 1. Accédez à la bibliothèque d'extraits de WPForms
    • 2. Installer + Activer WPCode
    • 3. Utilisez l'extrait du bouton Masquer Soumettre
    • 4. Ajouter une classe CSS de bouton d'envoi
  • Plus de questions sur les formulaires de calcul
    • Comment désactiver le bouton Soumettre dans un formulaire ?
    • Un formulaire peut-il ne pas avoir de bouton d'envoi ?

Les prérequis

Avant de passer aux étapes pour désactiver le bouton de soumission, assurons-nous que nous avons effectué quelques étapes importantes.

Si vous avez déjà effectué ces étapes, n'hésitez pas à passer directement à la section relative à la suppression du bouton de soumission.

1. Avoir une licence WPForms Pro

WPForms est un plugin de création de formulaires et de calculatrice réputé qui permet aux utilisateurs de créer une large gamme de formulaires.

The WPForms homepage

Il est important que vous disposiez de la dernière version de WPForms et que vous ayez 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 telles que la logique conditionnelle, les rapports de soumission de formulaires, etc.

2. Utilisation du module complémentaire de calculs

Pour créer des calculatrices personnalisées dans WordPress, vous savez probablement déjà que vous devez installer le module complémentaire de calcul WPForms.

calculations addon banner

Vous pouvez utiliser cet add-on 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 calculatrices intelligentes.

Il vous permet même d'utiliser des fonctions mathématiques intégrées pour arrondir des nombres, calculer des plages de temps, trouver des moyennes, etc.

3. Sélection d'un modèle de formulaire de calculatrice

Enfin, vous devez préparer un formulaire. Si vous avez besoin d'en créer un, WPForms propose plus de 1 100 modèles prédéfinis qui facilitent la création de formulaires.

calculator form templates category page

Ceux-ci incluent des modèles de formulaires de calculatrice conçus par des professionnels qui peuvent être personnalisés pour s'adapter à une variété de cas d'utilisation et de secteurs, tels que :

  • Modèle de formulaire de calcul de prêt hypothécaire : parfait pour les agences immobilières car il permet aux acheteurs potentiels de calculer leurs mensualités sans effort.
  • Modèle de formulaire de calcul des frais d'expédition : aide les sites de commerce électronique à économiser du temps et des efforts en fournissant un calculateur d'expédition simple aux clients.
  • Modèle de formulaire de calcul d'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 retour sur investissement : aide les entreprises et les spécialistes du marketing à évaluer efficacement la rentabilité de leurs campagnes ou projets.

La meilleure partie de tout : vous pouvez utiliser le module complémentaire de calculs pour créer des calculatrices personnalisées sans aucune connaissance en HTML, javascript ou en codage complexe.

Suppression du bouton Soumettre

Une fois ces conditions préalables remplies, vous êtes prêt à modifier votre formulaire pour supprimer le bouton d'envoi pour une expérience utilisateur plus rationalisée.

1. Accédez à la bibliothèque d'extraits de WPForms

Depuis votre tableau de bord WordPress, accédez simplement à WPForms » Outils. Ensuite, accédez à l’onglet Extraits de code .

wpforms code snippets

Cela affichera un message contextuel indiquant : « Veuillez installer WPCode pour utiliser la bibliothèque d'extraits de code WPForms. »

2. Installer + Activer WPCode

Il ne vous reste plus qu'à cliquer sur le bouton Installer + Activer WPCode . L'installation du plugin prendra maintenant quelques secondes.

install and activate wpcode

Une fois le plugin WPCode installé, vous pourrez accéder à la liste complète des extraits WPForms.

all code snippets

3. Utilisez l'extrait du bouton Masquer Soumettre

Maintenant, recherchez l’extrait du bouton de soumission masqué en tapant son nom dans le champ Extraits de recherche . Ensuite, cliquez sur le bouton Installer l’extrait .

Install hide submit button snippet

Cela vous redirigera vers la page d'aperçu de l'extrait de code WPCode, où vous pourrez voir le code automatiquement intégré.

Hide submit button code snippet preview

Il ne vous reste plus qu'à activer l'extrait de code. Pour ce faire, déplacez le bouton de Inactif à Actif .

Activate hide submit button snippet

La prochaine étape maintenant pour activer l'extrait de code sur l'ensemble du site consiste à appuyer sur le bouton Mettre à jour , juste à côté de l'option de bascule Active .

Update hide submit button snippet

En suivant cette approche, vous n'aurez besoin d'ajouter l'extrait qu'une seule fois via la bibliothèque d'extraits de WPForms.

Ensuite, pour chaque formulaire sur lequel l'utilisateur souhaite utiliser cet extrait, il devra ajouter le nom de la classe CSS du bouton Soumettre dans le générateur.

4. Ajouter une classe CSS de bouton d'envoi

Il ne reste plus qu'à ajouter la classe CSS dans le générateur de formulaire de la calculatrice dont vous souhaitez supprimer le bouton de soumission.

Pour ce faire, ouvrez le formulaire de votre calculatrice et accédez à l'onglet Général , puis faites défiler jusqu'à l'onglet Avancé .

Après cela, collez le CSS wpf-calc-form dans la classe CSS du bouton Soumettre pour activer l'extrait de code.

Add css class to submit button

Vous pouvez maintenant prévisualiser votre formulaire pour voir que le bouton d'envoi de votre calculatrice a été supprimé avec succès !

Mortgage calculator without submit button

Plus de questions sur les formulaires de calcul

Les formulaires de calcul sont un sujet populaire parmi nos lecteurs. Voici les réponses à quelques questions fréquemment posées à leur sujet.

Comment désactiver le bouton Soumettre dans un formulaire ?

Pour désactiver le bouton de soumission dans un formulaire, surtout si vous utilisez WPForms Pro, vous pouvez appliquer du CSS personnalisé. Accédez à WPForms »Outils. Ensuite, accédez à l'onglet Extraits de code et accédez à la bibliothèque d'extraits de code WPForms, qui contient une solution pour désactiver le bouton de soumission dans un formulaire.

Un formulaire peut-il ne pas avoir de bouton d'envoi ?

Oui, un formulaire peut fonctionner sans bouton de soumission. Ceci est courant dans les formulaires qui sont soumis automatiquement ou qui utilisent des méthodes alternatives pour la capture de données. Avec WPForms Pro, vous pouvez créer de tels formulaires en les personnalisant avec CSS pour masquer le bouton de soumission, en utilisant l'intégration WPCode pour ajouter le code nécessaire de manière transparente.

Ensuite, découvrez comment créer une calculatrice en ligne personnalisée

L'ajout d'une calculatrice à votre site Web peut stimuler l'engagement en encourageant les visiteurs à rester et à trouver des réponses à leurs problèmes. Consultez ce guide pour savoir comment créer une calculatrice personnalisée dans WordPress pour les besoins uniques de votre site Web.

Créer une calculatrice en ligne personnalisée

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 comprend 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.