Résumé IA
L'affichage des champs de paiement en fonction de dates spécifiques est une exigence courante pour de nombreux sites Web WordPress. Ceci est particulièrement utile pour ceux qui gèrent des inscriptions à des événements, des réservations saisonnières ou des services limités dans le temps.
En utilisant le module complémentaire Calculations de WPForms, vous pouvez afficher un champ de paiement dans votre formulaire uniquement si votre client sélectionne certaines dates dans le champ Date / Heure.
Dans ce guide, je vais vous expliquer comment afficher un champ de paiement basé sur une saisie de date sur votre site WordPress.
Comment afficher un champ de paiement basé sur une date dans WordPress
Étape 1 : Installer et activer le plugin WPForms
WPForms est le meilleur plugin de création de formulaires par glisser-déposer pour créer des formulaires de base et avancés dans WordPress.
Des formulaires de contact simples à des fonctionnalités plus avancées comme la logique conditionnelle, c'est un outil fiable qui a bien fonctionné pour moi sur plusieurs sites.
La licence Pro de WPForms inclut l'accès au module complémentaire Calculations, qui vous permet d'effectuer des opérations mathématiques simples et complexes sur vos formulaires WordPress.
Une fois que vous avez acheté la licence Pro, vous devez installer et activer WPForms sur votre site WordPress. Si c'est la première fois, consultez ce guide pour savoir comment installer WPForms.
Créez votre formulaire WordPress maintenant
Étape 2 : Installer le module complémentaire Calculations
Après avoir installé le plugin WPForms, vous devrez également installer le module complémentaire Calculations.
Pour installer le module complémentaire, rendez-vous dans la zone d'administration de WordPress et allez dans WPForms » Modules complémentaires. Faites ensuite défiler vers le bas jusqu'à trouver le module complémentaire Calculations, ou utilisez la barre de recherche. Lorsque vous l'avez trouvé, cliquez sur Installer le module complémentaire.
Une fois que vous avez installé et activé le module complémentaire Calculations sur votre site, procédez à la création de votre formulaire WordPress.
Étape 3 : Créer votre formulaire de paiement
Vous pouvez créer votre formulaire à partir de zéro, utiliser un modèle de formulaire, ou générer des formulaires avec WPForms AI. Pour ce tutoriel, je vais créer un nouveau formulaire à partir de zéro.
Pour commencer, accédez à WPForms » Nouveau. Ensuite, survolez le widget Formulaire vierge et cliquez sur Créer un formulaire vierge.
Dans le constructeur de formulaire, ajoutez les champs dont vous avez besoin à votre formulaire. Vous pouvez faire glisser et déposer un champ ou cliquer dessus pour l'ajouter au constructeur de formulaire.
Pour ce tutoriel, je suppose que vous avez déjà ajouté vos champs de paiement et configuré vos paramètres de paiement et de champ. Nous nous concentrerons sur la mise en œuvre de la logique pour masquer/afficher le champ de paiement en fonction d'une saisie de date.
Lire aussi : Comment afficher l’historique de vos formulaires dans WordPress
Étape 4 : Activer la logique pour afficher un champ de paiement basé sur la saisie de date
Dans cette section, je vais vous montrer deux exemples pratiques de la façon dont vous pouvez masquer/afficher un champ de paiement sur votre formulaire en fonction de la saisie du champ Date / Heure.
Afficher un champ de paiement basé sur la saisie de date
Pour ce faire, je vais commencer par ajouter un champ Date / Heure et 2 champs Masqués à mon formulaire. J'utiliserai le champ Articles multiples comme champ de paiement. Assurez-vous donc de l'inclure également dans votre formulaire.
Cliquez maintenant sur le champ Date / Heure pour accéder à son panneau Options de champ. Sélectionnez ensuite l'onglet Avancé.
Une fois ici, confirmez le format de date. Par défaut, il est défini sur m/j/A, où m représente le mois, j représente le jour et A représente l'année.
Après avoir confirmé le format de date, cliquez sur l'un des champs Masqués que vous avez ajoutés à votre formulaire et modifiez l'étiquette du champ. J'ai nommé le mien Date par défaut, mais vous pouvez choisir le nom que vous souhaitez.
Ensuite, cliquez sur l'onglet Avancé et définissez la Valeur par défaut du champ sur la date que vous souhaitez vérifier dans la logique conditionnelle.
Après cela, cliquez sur le deuxième champ Masqué de votre formulaire et sélectionnez l'onglet Avancé. Ensuite, activez l'option Activer le calcul.
Dans le générateur de formules de calcul, j'écrirai une logique pour comparer la valeur que l'utilisateur sélectionne dans le champ Date / Heure avec la date par défaut que j'ai spécifiée dans le premier champ Masqué. S'ils correspondent, nous définirons la valeur du champ sur 1. Sinon, le calcul renverra 0. Voici la formule pour implémenter cette logique :
if ( $F12_date == $F14 ):
1
else:
0
endif;
Dans la formule ci-dessus, la variable $F12_date fait référence au sous-champ de date dans le champ Date / Heure. Tandis que $F14 représente le champ Masqué où j'ai spécifié une date par défaut.
Vous devrez remplacer les numéros dans les noms de variables pour qu'ils correspondent aux champs de votre formulaire. Veuillez consulter notre tutoriel pour en savoir plus sur la création de formules avec le module complémentaire Calculs.
Après avoir ajouté la formule, cliquez sur le champ de paiement pour lequel vous souhaitez activer la logique conditionnelle. Sélectionnez ensuite l'onglet Logique intelligente et activez l'option Activer la logique conditionnelle.
Une fois activée, vous devrez définir la condition pour qu'elle vérifie le champ Masqué avec les calculs activés. J'ai défini la logique sur Afficher ce champ si le champ Masqué est 1. Cela signifie que si la formule qui compare la valeur du champ Date / Heure à la date par défaut que j'ai spécifiée est vraie, le champ Paiement s'affichera dans le formulaire.
Après avoir activé la logique conditionnelle, assurez-vous de sauvegarder vos modifications en cliquant sur le bouton Sauvegarder.
Lorsque vous prévisualiserez le formulaire sur le front-end de votre site, le champ de paiement sera masqué par défaut jusqu'à ce que vous sélectionniez une date dans le champ Date / Heure.
Si la date que vous sélectionnez correspond à celle spécifiée dans le champ Masqué Date par défaut, le champ de paiement apparaîtra. Les utilisateurs peuvent maintenant choisir une option de paiement et finaliser leur achat.
Afficher le champ de paiement en fonction de l'âge de l'utilisateur
Dans cet exemple, nous afficherons le champ de paiement uniquement si l'utilisateur a plus de 18 ans. Pour commencer, j'ajouterai 2 champs Masqués, un champ Date / Heure et le champ Article unique.
Sélectionnez ensuite l'un des champs Masqués et modifiez l'étiquette en Date actuelle.
Ensuite, cliquez sur l'onglet Avancé et activez l'option Activer le calcul.
Dans le générateur de formules, ajoutez la fonction ci-dessous.
now()
Cette fonction définira la valeur du champ Masqué à la date et à l'heure actuelles.
Ensuite, sélectionnez le deuxième champ Masqué et définissez l'Étiquette sur Calculateur d'âge.
Sélectionnez ensuite l'onglet Avancé et activez l'option Activer le calcul. Dans le générateur de formules, ajoutez la fonction ci-dessous.
years( $F12, $F14 )
La fonction années() vérifiera la différence de date entre deux dates et renverra la différence en années.
$F12 et $F14 sont les noms de variables pour les champs Date / Heure et Date actuelle, respectivement. Assurez-vous de remplacer les numéros pour qu'ils correspondent à ceux de vos champs.
Après avoir ajouté la formule au Calculateur d'âge, sélectionnez le champ de paiement de votre formulaire pour ouvrir son panneau Options de champ. Ensuite, accédez à l'onglet Logique intelligente et activez l'option Activer la logique conditionnelle.
Ensuite, choisissez le champ Calculateur d'âge dans la liste déroulante de la règle de logique conditionnelle.
Après cela, choisissez l'opérateur supérieur à dans la liste déroulante.
Enfin, entrez 17 dans la valeur. La règle devrait être Afficher ce champ si l'âge calculé est supérieur à 17. Cette logique est utile pour réglementer les paiements en ligne et assurer la conformité appropriée du statut de paiement.
Après avoir ajouté la logique, assurez-vous de sauvegarder vos modifications. Lorsque vous prévisualisez le formulaire, le champ de paiement sera masqué par défaut jusqu'à ce que l'utilisateur spécifie son âge.
Le champ ne s'affichera que si l'âge de l'utilisateur est de 18 ans ou plus.
Étape 5 : Publier votre formulaire de paiement
Enfin, ajoutons le formulaire de paiement à une page. Pour ce faire, cliquez sur le bouton Intégrer en haut à droite du constructeur de formulaire.
Vous aurez la possibilité de publier votre formulaire sur une nouvelle page ou une page existante. Pour ce guide, je choisirai l'option Créer une nouvelle page .
Donnez un nom à votre nouvelle page et cliquez sur C'est parti.
Vous serez dirigé vers l'éditeur de page WordPress avec votre formulaire intégré à la page. Cliquez sur le bouton Publier pour publier votre page.
Lorsque vous consultez cette page sur le frontend, le champ de paiement de votre formulaire sera masqué jusqu'à ce que la valeur du champ Date corresponde à celle spécifiée dans votre règle de logique conditionnelle. Notez qu'il est également possible d'intégrer vos formulaires à l'aide d'un shortcode ou d'un widget.
FAQ — Afficher conditionnellement un champ de paiement basé sur une saisie de date
Voici les réponses à certaines des questions les plus fréquentes concernant l'affichage d'un champ de paiement basé sur une saisie de date.
Que se passe-t-il si le champ de date est laissé vide ?
Si le champ de date est vide, le calcul renverra 0, masquant ainsi le champ de paiement. Je recommande de rendre le champ de date obligatoire pour éviter cette situation.
Comment afficher la date dans WordPress ?
Si vous utilisez le module complémentaire Calculs dans WPForms, vous pouvez afficher la date à l'aide de la fonction now(). Lorsque vous entrez la fonction dans le générateur de formules, la valeur du champ sera définie comme la date et l'heure actuelles.
Ensuite, acceptez les paiements récurrents dans WordPress
Et voilà ! Vous avez maintenant appris 2 méthodes pratiques pour afficher un champ de paiement en fonction d'une saisie de date dans WordPress. Le processus que j'ai expliqué dans ce tutoriel peut également être appliqué aux formulaires de paiement par abonnement.
Vous pouvez consulter notre tutoriel pour apprendre comment accepter les paiements récurrents dans WordPress pour plus de détails sur la façon de vendre des abonnements avec WPForms.
Créez votre formulaire WordPress maintenant
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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
