Résumé IA
Besoin de collecter des dates auprès des visiteurs du site Web ? Vous savez probablement déjà que les champs de texte standard pour les dates créent le chaos. Les clients entrent souvent les dates dans des formats différents (12/25/2025 vs 25/12/2025 vs 25 décembre 2025).
Cela entraîne des erreurs de réservation, des rendez-vous manqués et, finalement, des clients frustrés. Un sélecteur de date approprié résout ce problème en fournissant une interface de calendrier visuelle qui fonctionne de la même manière sur tous les appareils.
Dans ce guide, je vais vous montrer comment ajouter des formulaires de sélection de date professionnels à WordPress en utilisant le champ et la fonctionnalité de formulaire de sélection de date/heure avancés de WPForms, ainsi que quelques conseils si vous souhaitez le personnaliser.
Créez votre formulaire avec sélecteur de date dès maintenant ! 🙂
Comment créer un formulaire WordPress avec un sélecteur de date
Avec WPForms, il est très simple d'ajouter un champ qui permet aux utilisateurs de sélectionner une date, une heure ou les deux. Voici un tutoriel étape par étape pour créer un formulaire WordPress avec un sélecteur de date/heure :
Si vous préférez des instructions écrites pour ajouter un sélecteur de date WordPress à vos formulaires, consultez les étapes ci-dessous :
- Étape 1 : Créer un formulaire WordPress avec WPForms
- Étape 2 : Ajouter le sélecteur de date à votre formulaire WordPress
- Étape 3 : Personnalisations avancées du sélecteur de date WPForms
- Étape 4 : Personnalisations avancées du champ horaire WPForms
- Étape 5 : Configurer les paramètres de votre formulaire avec sélecteur de date
- Étape 6 : Configurer les notifications de votre formulaire
- Étape 7 : Ajouter le formulaire avec sélecteur de date WordPress à votre site
Étape 1 : Créer un formulaire WordPress avec WPForms
La première chose à faire est d'installer et d'activer le plugin WPForms. Vous aurez besoin d'une version payante du plugin car le champ Sélecteur de date/heure n'est pas disponible dans la version gratuite.
Ce champ puissant inclut des fonctionnalités avancées telles que des restrictions de date, des créneaux horaires et un formatage personnalisé que les plugins de base ne peuvent égaler.
Pour plus de détails, consultez ce guide étape par étape sur comment installer un plugin dans WordPress. Une fois que vous avez acheté et installé le plugin WPForms, allez dans WPForms » Ajouter nouveau pour créer un nouveau formulaire.
Sur l'écran de configuration, nommez votre formulaire et sélectionnez le modèle de formulaire que vous souhaitez utiliser. La bonne nouvelle est que WPForms propose plus de 2 100 modèles de formulaires WordPress.
Dans mon exemple, j'utiliserai le modèle Formulaire de contact simple. Une fois sélectionné, je vous montrerai également comment personnaliser ce formulaire et y ajouter le champ sélecteur de date.
Étape 2 : Ajouter le sélecteur de date à votre formulaire WordPress
Vous pouvez ajouter des champs supplémentaires à votre modèle de formulaire sélectionné en utilisant l'éditeur simple par glisser-déposer de WPForms. Alors, allons-y et faisons glisser le champ Date/Heure sur votre formulaire, où vous le souhaitez.
Une fois qu'il est sur votre formulaire, vous pouvez le faire glisser vers le haut ou vers le bas pour le placer ailleurs et cliquer à nouveau sur le champ pour ouvrir ses paramètres et le personnaliser. Lorsque vous cliquez sur le champ de formulaire Date / Heure, vous verrez les options suivantes :
- Libellé : C'est le titre du champ que les visiteurs du site verront sur votre formulaire.
- Format : Choisissez si vous souhaitez que ce champ inclue la date et l'heure, seulement la date ou seulement l'heure.
- Description : Ajoutez une description pour le champ. C'est un bon endroit pour ajouter des instructions ou des détails pour vos utilisateurs.
- Obligatoire : Activez ce bouton bascule pour empêcher les utilisateurs de soumettre le formulaire tant que ce champ n'est pas rempli.
Si vous faites défiler vers le bas et cliquez sur Options avancées, vous pouvez personnaliser davantage le champ Sélecteur de date/heure comme nous le montrons ci-dessous.
Étape 3 : Personnalisations avancées du sélecteur de date WPForms
Par défaut, le champ de sélection de date dans WPForms est défini sur le format de vue calendrier. Le plus convivial pour sélectionner des dates, en particulier sur les appareils mobiles. Idéal pour :
- Demandes de vacances
- Formulaires de réservation de rendez-vous
- Inscription à des événements
- Soumissions de dates limites
Les formats du champ Date/Heure sont faciles à modifier dans WPForms. Pour ce faire, cliquez d'abord sur l'onglet Avancé sous Options du champ. Ensuite, vous pouvez personnaliser les options suivantes :
- Type : Vous pouvez choisir entre le Sélecteur de date (la vue calendrier par défaut) ou le Menu déroulant de date (ajoute des menus déroulants distincts pour le mois, le jour et l'année).
- Format : Ici, vous pouvez sélectionner différents formats de date (j/m/a ou m/j/a).
- Limiter les jours : Activez cette option pour sélectionner les jours de la semaine que les utilisateurs sont autorisés à choisir.
- Désactiver les dates passées : Avec cette option, vous pouvez empêcher les utilisateurs de sélectionner des dates passées.
Ensuite, nous allons examiner les options de personnalisation de la section Heure du champ Date/Heure dans WPForms.
Étape 4 : Personnalisations avancées du champ horaire WPForms
La sélection de l'heure est tout aussi importante que la sélection de la date pour créer des systèmes de réservation efficaces. WPForms offre un contrôle granulaire sur les options d'heure qui correspondent à vos heures d'ouverture et évitent les conflits de planification.
Semblable aux paramètres du sélecteur de date, vous pouvez personnaliser les options de la section Heure du champ Date/Heure. Par défaut, le format de l'heure est défini sur une horloge de 12 heures avec des intervalles de 30 minutes :
Comme précédemment, vous pouvez modifier les paramètres du champ Heure en accédant à l'onglet Avancé sous Options du champ. Voici à quoi ressemblent ces paramètres :
- Intervalle : WPForms vous permet de choisir entre des intervalles de 15 minutes, 30 minutes et 1 heure pour le champ Heure.
- Format : Vous permet de choisir entre une horloge de 12 heures ou une horloge de 24 heures.
- Limiter les heures : Définissez la plage horaire que les utilisateurs peuvent sélectionner.
Quel que soit le format que vous choisissez, sachez que le champ Sélecteur de date/heure est un excellent moyen d'obtenir des données précises sur vos formulaires. La date sera toujours validée et dans le bon format dans le champ Sélecteur de date/heure.
Vous voulez que quelqu'un ne remplisse votre formulaire Sélecteur de date/heure qu'une seule fois ? Si vous souhaitez savoir comment limiter les saisies pour les utilisateurs, consultez ce tutoriel sur comment limiter le nombre de saisies de formulaire WordPress.
Une fois que vous avez terminé de personnaliser vos paramètres, cliquez sur Enregistrer.
Étape 5 : Configurer les paramètres de votre formulaire avec sélecteur de date
Les confirmations de formulaire sont des messages affichés aux personnes une fois qu'elles ont rempli votre formulaire. Les confirmations leur font savoir que leur formulaire a été traité et vous donnent la possibilité de leur indiquer les prochaines étapes à suivre. WPForms propose 3 types de confirmation parmi lesquels choisir :
- Message : C'est le type de confirmation par défaut dans WPForms. Lorsqu'un visiteur du site soumet votre formulaire, un simple message apparaît, lui indiquant que son formulaire est en cours de traitement.
- Afficher la page : Ce type de confirmation redirigera vos visiteurs vers une page Web spécifique de votre site Web pour les remercier d'avoir rempli le formulaire Sélecteur de date/heure et vous permettra de leur indiquer ce qu'ils doivent faire ensuite. Pour vous aider, consultez notre tutoriel sur la redirection des clients vers une page de remerciement.
- Accéder à l'URL (Redirection) : Cette option est pour lorsque vous souhaitez envoyer les personnes vers une page spécifique contenant des informations connexes qui se trouvent sur un site Web différent.
Voyons donc comment configurer une confirmation de formulaire simple dans WPForms afin que vous puissiez personnaliser le message que les personnes verront lorsqu'elles soumettront leur formulaire Sélecteur de date/heure. Pour commencer, cliquez sur l'onglet Confirmation dans l'éditeur de formulaire sous Paramètres.
Ensuite, personnalisez le message de confirmation à votre guise et cliquez sur Enregistrer. Pour obtenir de l'aide sur d'autres types de confirmation, consultez notre documentation sur la configuration des confirmations de formulaire.
Maintenant, configurons les notifications de votre formulaire.
Étape 6 : Configurer les notifications de votre formulaire
Vous souhaitez que la date et l'heure auxquelles quelqu'un remplit vos formulaires vous soient envoyées immédiatement par e-mail ? Configurons les notifications de votre formulaire pour faire exactement cela.
Les notifications sont un excellent moyen de vous envoyer automatiquement un e-mail, ainsi qu'à vos employés et à la personne qui a rempli votre formulaire. Sauf si vous désactivez cette fonctionnalité, chaque fois que quelqu'un soumet un formulaire sur votre site, vous recevrez une notification à ce sujet.
Si vous utilisez les balises intelligentes, vous pouvez également recevoir uniquement la date et l'heure dans vos notifications de formulaire. Pour ce faire, ajoutez simplement un horodatage dans votre e-mail de notification en utilisant cette balise intelligente – {date format="m/d/Y"}
Excellent travail ! Vous êtes maintenant prêt à ajouter votre formulaire Sélecteur de date/heure à votre site Web.
Étape 7 : Ajouter le formulaire avec sélecteur de date WordPress à votre site
WPForms vous permet d'ajouter vos formulaires dans divers emplacements de vos articles de blog, pages, pied de page, et votre barre latérale.
Examinons l'option la plus courante : intégrer votre formulaire dans un article ou une page. Cliquez sur le bouton Intégrer en haut à droite du constructeur de formulaires.
Ensuite, cliquez sur Créer une nouvelle page.
Donnez un nom à votre page, puis sélectionnez C'est parti.
Cela vous mènera à votre éditeur de blocs WordPress pour une nouvelle page avec votre formulaire déjà intégré. Appuyez sur Publier pour mettre en ligne votre nouveau formulaire de sélection de date WordPress.
Félicitations ! Votre formulaire avec un sélecteur de date est maintenant publié.
Et voilà ! Vous savez maintenant comment ajouter un formulaire WordPress avec un sélecteur de date à votre site web.
FAQ sur la création d'un formulaire de sélection de date WordPress
Apprendre à créer un formulaire de sélection de date WordPress est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :
Comment ajouter un sélecteur de date à WPForms ?
Installez WPForms Pro, puis allez dans WPForms » Ajouter pour créer un formulaire. Dans le constructeur de formulaires, faites glisser le champ Date/Heure depuis la bibliothèque de champs sur votre formulaire.
Vous pouvez personnaliser le format de date, restreindre les dates passées, limiter les jours disponibles et définir des intervalles de temps, le tout via les paramètres du champ. Aucun codage requis !
Puis-je créer un calendrier WPForms pour la réservation de rendez-vous ?
Oui, le champ de sélection de date WPForms fonctionne parfaitement pour la réservation de rendez-vous. Vous pouvez désactiver les dates passées, restreindre les réservations à des jours spécifiques de la semaine, définir des créneaux horaires disponibles et limiter les heures de disponibilité des rendez-vous.
Pour les systèmes de réservation avancés, combinez le sélecteur de date avec la logique conditionnelle pour afficher différents créneaux horaires en fonction des types de services ou de la disponibilité du personnel.
Comment personnaliser le format du sélecteur de date WordPress ?
Dans WPForms, cliquez sur votre champ Date/Heure, puis allez dans Options avancées.
Vous pouvez choisir entre différents formats de date (j/m/a, m/j/a, ou formats personnalisés), sélectionner l'affichage de l'heure sur 12 ou 24 heures, et définir des intervalles de temps de 15 minutes à 1 heure.
Le sélecteur de date s'adapte automatiquement au format choisi et valide la saisie de l'utilisateur pour éviter les erreurs de formatage.
Puis-je désactiver les dates passées dans les formulaires de sélection de date WordPress ?
Absolument. Dans les paramètres du champ Date/Heure de WPForms, activez Désactiver les dates passées pour empêcher les utilisateurs de sélectionner des dates qui sont déjà passées.
Ceci est essentiel pour les formulaires de réservation, les inscriptions à des événements et les soumissions de délais. Vous pouvez également utiliser Limiter les jours pour restreindre les sélections à des jours spécifiques de la semaine.
Comment ajouter des créneaux horaires aux formulaires de sélection de date WordPress ?
WPForms inclut la personnalisation du champ horaire intégrée. Dans les paramètres du champ Date/Heure, allez dans Options avancées et configurez l'intervalle horaire (15, 30 ou 60 minutes), définissez le format de l'heure (12 ou 24 heures) et limitez les heures disponibles.
Par exemple, vous pouvez restreindre les réservations à 9h – 17h en semaine uniquement. Le sélecteur de date affiche automatiquement uniquement les créneaux disponibles pour les clients.
Quelle est la différence entre le sélecteur de date et la liste déroulante de date dans WPForms ?
Le sélecteur de date affiche un calendrier visuel sur lequel les utilisateurs cliquent pour sélectionner des dates. Il est plus convivial et réduit les erreurs.
La liste déroulante de date affiche des menus déroulants distincts pour le mois, le jour et l'année. Elle est plus compacte mais nécessite plus de clics.
Pour la plupart des formulaires, le sélecteur de date (vue calendrier) offre une meilleure expérience utilisateur et des taux de complétion plus élevés, en particulier sur les appareils mobiles.
Puis-je intégrer le sélecteur de date WPForms avec WooCommerce ?
Bien que les sélecteurs de date WPForms fonctionnent très bien pour collecter des dates dans les formulaires, pour la sélection de dates spécifiques aux produits sur les pages WooCommerce, vous aurez besoin de plugins dédiés de sélecteur de date WooCommerce.
Cependant, vous pouvez utiliser WPForms pour la collecte de dates liées à WooCommerce, comme les formulaires de commande personnalisés, les préférences de date de livraison ou les achats de billets d'événement qui nécessitent des informations supplémentaires au-delà des options de produits standard.
Ensuite, essayez les modèles de formulaires professionnels
Besoin de déterminer la durée entre les dates ? Apprenez comment calculer le nombre de jours entre deux dates dans WPForms. Parfait pour les formulaires de réservation de location, les calendriers de projet ou les formulaires de demande de vacances où vous devez afficher la durée automatiquement.
Pour les réservations complexes, envisagez de diviser votre formulaire en plusieurs étapes. Notre tutoriel sur les formulaires multipages montre comment créer des formulaires de rendez-vous qui collectent d'abord les informations de contact, puis la disponibilité, puis les détails du service. Cette approche augmente les taux de complétion de 67 % pour les formulaires de réservation plus longs.
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.
Mais comment faire pour qu'une heure ne soit plus disponible une fois qu'elle a été choisie ? J'ai créé un sélecteur de date de formulaire, et plusieurs personnes peuvent choisir la même date et la même heure.
Bonjour Sabrina,
Nous n'avons pas de fonctionnalité d'inventaire de dates qui garde une trace des dates déjà choisies et affiche les dates non choisies. J'ai ajouté votre vote pour considérer cette demande de fonctionnalité pour les améliorations futures.
Merci pour votre suggestion ! 🙂
J'ai besoin de cette option !
À aucun moment vous ne mentionnez que nous devons payer 49 $ pour utiliser une quelconque option de date. Merci d'avoir fait perdre du temps à tout le monde.
Salut Derek – Je m'excuse pour toute confusion, mais c'est clairement mentionné dans la première étape. Voici une capture d'écran pour votre référence.
Si vous avez d'autres questions, n'hésitez pas à nous le faire savoir. Merci 🙂
Est-il possible de restreindre la sélection des dates futures ?
par ex. 1. Ne pas autoriser les dates le jour de Noël « 5 déc
par ex. 2 La date choisie doit être au minimum 2 jours après la date d'aujourd'hui ?
Merci
Salut Mark – Bien sûr, pour le premier, vous pouvez utiliser ces extraits de code et les personnaliser selon vos besoins.
Pour le second, vous pouvez utiliser ces extraits de code. Changez simplement le +1) par le nombre de jours (dans votre cas, vous pouvez utiliser +2) à l'avance que vous souhaitez restreindre le sélecteur.
J'espère que cela vous aide. Merci :)
J'ai ajouté un champ pour la date d'arrivée et un champ pour la date de départ. Le problème est qu'un utilisateur peut choisir une date d'arrivée dans le futur, mais une date de départ antérieure à la date d'arrivée. Existe-t-il une logique conditionnelle que je peux utiliser pour limiter la date de départ à toute date POSTÉRIEURE à la date d'arrivée ?
Merci,
Tony
Salut Tony – C'est possible de réaliser cela avec WPForms. Vous pouvez utiliser un extrait de code PHP pour comparer deux dates dans le même formulaire afin de vous assurer que la date de départ est égale ou supérieure à la date d'arrivée. L'extrait de code vérifierait si la deuxième date est inférieure ou égale à la première date, et si c'est le cas, il afficherait un message d'erreur. Cette fonctionnalité peut être implémentée avec n'importe quelle licence WPForms.
Veuillez consulter ce tutoriel avec les détails et le code PHP personnalisé que vous devez entrer sur votre site.
Si cela peut aider, voici notre tutoriel avec les moyens les plus courants d'ajouter du code personnalisé comme celui-ci.
J'espère que cela vous aide. Merci 🙂
Salut !
Comment puis-je restreindre la sélection des dates aux 1er et 16 de chaque mois ?
Salut !
Vous pouvez y parvenir avec un petit extrait de code personnalisé. Nous avons un exemple dans notre documentation développeur ici : Limiter des dates spécifiques dans le sélecteur de date.
Dans cet extrait, seules certaines dates du mois sont autorisées. Vous pouvez mettre à jour les numéros de date dans le code (par exemple, les changer en 1 et 16) afin que seules ces dates restent sélectionnables. Si vous souhaitez de l'aide pour adapter l'extrait à votre formulaire, n'hésitez pas à contacter notre équipe de support.