Comment créer un formulaire WordPress avec un sélecteur de date (méthode simple)

Voulez-vous créer un formulaire WordPress avec un sélecteur de date ?

Un champ sélecteur de date est un moyen pratique de capturer des informations liées à la date dans vos formulaires WordPress. Par exemple, vous pouvez avoir besoin de connaître la date de naissance de vos utilisateurs/utilisatrices, ou vous voulez qu’ils puissent facilement planifier un rendez-vous pour vos services à travers vos formulaires.

Dans cet article, nous allons vous afficher comment créer facilement un formulaire WordPress avec un sélecteur de date.

Pourquoi créer un formulaire WordPress avec un sélecteur de date ?

Un champ sélecteur de date dans un formulaire WordPress est utile lorsque vous souhaitez que les utilisateurs/utilisatrices saisissent des dates. Les exemples les plus courants sont les suivants :

• Lesformulaires d’inscription qui demandent aux utilisateurs/utilisatrices de saisir leur date de naissance.
• Formulaires de commande permettant de choisir une date et un délai de distribution pour une commande.
• Les formulaires de location permettent de sélectionner une date de prise en charge ou de restitution d’un article loué.
• Formulaires de demande de rappel permettant aux utilisateurs/utilisatrices de vous faire savoir quand ils/elles souhaitent être contacté(e)s au sujet de vos produits ou services.
• Formulaires de demande de congé permettant aux employés de saisir les dates de début et de fin de leur inactif.
• Formulaires de rendez-vous ou de réservation pour les sites d’hébergement ou de services.

Un champ de saisie de date est un moyen beaucoup plus facile pour les utilisateurs/utilisatrices d’insérer des dates que de les taper manuellement. Il garantit que le format de la date reste cohérent dans toutes les entrées du formulaire, ce qui réduit les erreurs et améliore le compte des utilisateurs/utilisatrices.

Cela dit, voyons comment créer facilement un formulaire WordPress avec un sélecteur de date. Vous pouvez utiliser ces liens rapides pour naviguer dans cet article :

Étape par étape : Installer l’extension WPForms et choisir un Modèle

La première étape consiste à installer WPForms. C’est la meilleure extension de formulaire de contact WordPress sur le marché qui rend super facile la création de toutes sortes de formulaires WordPress sur votre site, y compris les formulaires avec des champs sélecteurs de date.

Pour des instructions détaillées, vous pouvez consulter notre guide étape par étape sur l’installation d’une extension WordPress.

Vous pouvez consulter notre Avis terminé sur WPForms pour plus de détails.

Une fois activé, rendez-vous sur la page WPForms  » Ajouter une nouvelle  » de votre Tableau de bord WordPress.

Vous êtes alors dirigé vers la page « Sélectionner un Modèle ».

Avant de choisir un modèle, il est judicieux de donner un nom à votre formulaire WordPress afin de pouvoir l’identifier facilement ultérieurement.

En défilant vers le bas, vous verrez un grand nombre de modèles de formulaires prédéfinis disponibles ici, dont beaucoup comportent déjà le champ de la plage de dates.

Pour les besoins de l’exemple, nous utiliserons le Modèle de formulaire de contact simple et y ajouterons le champ sélecteur de date. Mais n’hésitez pas à choisir le modèle qui vous convient le mieux.

Une fois que vous avez fait votre choix, il vous suffit de cliquer sur le bouton « Utiliser le Modèle ».

Etape par 2 : Ajouter un champ sélecteur de date à votre formulaire WordPress

Vous arrivez maintenant sur le Constructeur de formulaires de WPForms. Vous remarquerez les options de champ dans la colonne de gauche et une prévisualisation du formulaire sur le côté droit de l’écran.

Par défaut, le modèle de formulaire de contact simple comporte uniquement les champs nom, adresse e-mail et commentaires ajoutés au formulaire.

À des fins de démonstration, nous allons vous afficher comment ajouter un champ de date à votre formulaire WordPress. Mais si votre Modèle en dispose déjà, alors vous pouvez passer à la partie modification de cette étape.

Vous devez défiler vers le bas jusqu’à la section Champs fantaisie dans la colonne de gauche, où vous verrez le champ « Date / Heure ».

Il suffit de faire glisser et de déposer ce champ à l’endroit voulu sur votre formulaire. Dans ce tutoriel, nous l’avons placé juste en dessous du champ E-mail.

Une fois que vous avez fait cela, cliquez sur le champ « Date/heure » pour le modifier. L’onglet « Options de champ » s’ouvre alors sur le côté gauche de l’écran.

À partir de là, vous pouvez modifier le libellé du champ, qui est par défaut « Date / Heure ». Nous allons utiliser « Heure préférée pour l’appel téléphonique » pour notre champ.

Vous pouvez également modifier le format de date du champ à l’aide du menu déroulant Format. Les options sont les suivantes : Date et heure, Date ou Heure uniquement. Cette option peut s’avérer utile si vous souhaitez utiliser uniquement un champ de date sans champ d’heure pour collecter les dates de naissance des utilisateurs/utilisatrices.

Par ailleurs, vous pouvez compléter le texte de la description pour donner plus de détails sur ce que l’utilisateur doit saisir dans le champ.

Enfin, vous pouvez cocher la case « Prérequis » si vous souhaitez que ce champ soit obligatoire. Cela signifie que l’utilisateur devra sélectionner une date et une heure avant de pouvoir envoyer le formulaire.

Une fois cela fait, il vous suffit de cliquer sur le bouton « Enregistrer » en haut de la page pour stocker les réglages de votre formulaire.

Étape par étape : Configuration des options avancées du sélecteur de date et d’heure

Par défaut, le champ sélecteur de plage de dates de votre formulaire WordPress sera un calendrier avec un menu déroulant de durée à côté.

La date du jour est sélectionnée, mais l’utilisateur peut la modifier pour choisir une autre date. Le format de la date est mois/jour/année.

Par défaut, le menu déroulant de l’heure affiche une horloge de 12 heures avec des intervalles de 30 minutes.

Les utilisateurs/utilisatrices peuvent alors choisir le créneau horaire qui leur convient le mieux.

Dans certains cas, vous pouvez souhaiter modifier les Réglages du sélecteur de date. Par exemple, votre pays abonde peut-être en formats de date et d’heure jour/mois/année ou 24 heures plutôt qu’en formats par défaut.

Pour ce faire, vous devez passer à l’onglet « Avancé » en haut du panneau de gauche.

Ici, vous pouvez ajuster la taille du champ du sélecteur de date. Ensuite, dans la section Date, vous pouvez modifier la plage de dates en passant d’un calendrier à un menu déroulant de dates.

Le remplacement du sélecteur de date par un menu déroulant est une bonne idée si le formulaire dispose d’un espace limité et que le calendrier semble plutôt petit.

Voici à quoi ressemble le menu déroulant de la date :

En dessous, vous pouvez modifier le format de la date de mois/jour/année (1/31/2024) à jour/mois/année (31/1/2024) ou Mois Jour, Année (31 janvier 2024).

Si vous choisissez le sélecteur de date du calendrier, vous pouvez également insérer un texte de remplacement dans le champ « Date ». Vous pouvez le remplir avec votre format de date pour que les utilisateurs/utilisatrices sachent quel format vous utilisez et qu’ils ne s’y perdent pas.

En outre, vous pouvez activer le commutateur « Limiter les jours » pour ajuster la plage de dates qui peut être sélectionnée. Cette fonction est utile si vous utilisez vos services uniquement en semaine.

N’hésitez pas à désactiver les dates passées pour éviter que des dates antérieures ne soient sélectionnées.

Passons ensuite à la section « Temps » pour modifier le sélecteur de temps.

Ici, vous pouvez modifier l’intervalle en 15 minutes ou 1 heure au lieu de 30 minutes. Il est également utile de saisir ici un texte de remplacement pour afficher le format de l’heure que vous utilisez.

Le sélecteur de temps est par défaut une horloge de 12 heures, mais vous pouvez passer à une horloge de 24 heures si vous le souhaitez.

N’hésitez pas non plus à activer le réglage  » Limiter les heures  » pour spécifier les heures de début et de fin de vos services. Ainsi, les utilisateurs/utilisatrices ne pourront pas prendre rendez-vous en dehors de vos heures d’ouverture.

À part cela, vous pouvez saisir un nom de classe CSS pour le champ de la plage de dates. Il s’agit d’une fonctionnalité avancée et facultative, mais vous pouvez l’utiliser pour surcharger le style du formulaire en utilisant du code ultérieurement.

Dernier point, mais non des moindres, vous pouvez masquer le libellé et/ou le sous-libellé du champ de formulaire si nécessaire.

Lorsque vous êtes satisfait de votre nouveau formulaire, vous pouvez l’enregistrer en cliquant sur le bouton « Enregistrer » dans le coin supérieur droit de l’écran.

Étape par 4 : Contenu embarqué du formulaire WordPress sur votre site

Vous êtes maintenant prêt à ajouter votre nouveau formulaire avec le sélecteur de date à votre site WordPress. Pour ce faire, il vous suffit de cliquer sur le bouton « Contenu embarqué » dans la partie supérieure du Constructeur de formulaires.

Une fenêtre surgissante vous demande de sélectionner une page existante pour y ajouter le formulaire ou de créer une nouvelle page pour le formulaire à partir de zéro. Les deux options utilisent l’éditeur de blocs, les étapes sont donc assez similaires.

Ajouter le bloc WPForms à une page existante ou nouvelle

Pour insérer le formulaire dans une page existante, cliquez sur le bouton  » Sélectionner une page existante « . Ensuite, sélectionnez l’une des pages que vous avez déjà sur votre blog ou site WordPress et cliquez sur « Let’s Go ! ».

Si vous souhaitez ajouter le formulaire à une nouvelle page, il vous suffit de cliquer sur le bouton « Créer une nouvelle page ».

Donnez ensuite un nom à votre nouvelle page et cliquez sur « Let’s Go ».

Ces deux méthodes vous amèneront à l’éditeur de blocs, où vous verrez quelques instructions sur la façon d’ajouter le module WPForms.

Cliquez d’abord sur le bouton « + » pour ajouter un bloc.

Tapez ensuite « WPForms » dans la barre de recherche du bloc.

Il suffit de faire glisser et de déposer le bloc à l’endroit qui convient le mieux sur la page.

Il ne vous reste plus qu’à cliquer sur le menu déroulant.

Sélectionnez ensuite le formulaire que vous venez de sélectionner.

Dans la colonne latérale des Réglages du bloc, vous pouvez personnaliser les styles des champs, des libellés et des boutons du formulaire pour les adapter à votre thème WordPress.

Vous pouvez modifier la taille, le rayon-radius de la bordure et les couleurs de chaque élément.

Vous pouvez maintenant cliquer sur le bouton « Mettre à jour » ou « Publier » pour rendre le formulaire direct sur votre site.

Il devrait ressembler à ceci sur votre site WordPress :

Si vous souhaitez insérer le widget de formulaire dans une publication plutôt que dans une page, vous pouvez créer une nouvelle publication ou ouvrir une publication existante dans l’éditeur de blocs.

Ensuite, il suffit de suivre les mêmes étapes pour ajouter le bloc WPForms à une page comme dans cette méthode.

Ajouter le bloc WPForms à une zone prête à accueillir des widgets

Si vous utilisez un thème WordPress classique, vous pouvez afficher votre formulaire dans un en-tête, un pied de page ou une colonne latérale avec des widgets. Cela peut être une bonne idée si votre formulaire est assez court et ne prend pas trop de place.

Note : Si vous utilisez un thème en bloc, cette méthode ne fonctionnera pas pour votre site.

Pour ce faire, il suffit d’aller dans Apparence «  Widgets à partir de la zone d’administration de WordPress. Ensuite, naviguez jusqu’à la zone prête à accueillir le widget de votre choix et cliquez sur le bouton blanc  » +  » d’ajout de bloc à l’intérieur de celle-ci. Après cela, vous pouvez rechercher le bloc WPForms.

Si vous voyez deux options, vous pouvez choisir l’une ou l’autre, car les deux font la même chose.

Comme dans la méthode précédente, il suffit de sélectionner le formulaire que vous venez de créer plus tôt. Dans la colonne latérale des Réglages du bloc, vous pouvez configurer le design pour qu’il s’adapte mieux à votre thème WordPress.

Une fois que vous êtes satisfait des modifications, cliquez sur le bouton « Mettre à jour ».

C’est tout !

Voici à quoi ressemble notre formulaire au bas d’une publication de blog WordPress :

Contenu embarqué de votre formulaire WordPress avec un code court

Si le bloc ou le widget WPForms ne fonctionne pas, vous pouvez également ajouter votre formulaire WordPress à l’aide d’un code court.

Dans la fenêtre surgissante « Contenu embarqué dans une page », cliquez simplement sur le lien « Utiliser un code court ». Vous verrez alors un code court que vous pouvez copier et coller sur une page, une publication ou une zone prête à accueillir un widget.

En savoir plus sur l’utilisation des codes courts, consultez notre article sur l ‘ajout d’un module court dans WordPress.

Astuces pour optimiser votre formulaire WordPress

Maintenant que vous savez comment ajouter un champ sélecteur de date à vos formulaires, passons aux meilleures astuces pour faire passer vos formulaires au niveau supérieur :

• Envoyez des e-mails de confirmation aux personnes qui soumettent un formulaire – De cette façon, les utilisateurs/utilisatrices recevront une notification leur indiquant que vous avez bien reçu leur formulaire, et ils n’oublieront pas la date ou l’heure qu’ils ont choisie.
• Acceptez les paiements en ligne dans vos formulaires – WPForms supporte les passerelles de paiement populaires comme Stripe, PayPal, Square, et Authorize.net. Vous pouvez collecter des paiements uniques ou récurrents, et il n’y a pas de frais de transaction supplémentaires.
• Rendez vos formulaires plus longs conversationnels – Si vous avez un formulaire d’inscription à un évènement ou à un utilisateur qui doit recueillir beaucoup d’informations, le rendre conversationnel peut augmenter le taux d’achèvement du formulaire.
• Empêcher le spam du formulaire de contact – Vous pouvez activer la protection anti-spam intégrée de WPForms et la case à cocher reCAPTCHA pour filtrer nos entrées de formulaire indésirables.
• Créez des formulaires multilingues – Atteignez un public diversifié et améliorez l’accessibilité de votre site grâce à des formulaires qui s’affichent en plusieurs langues.
• Suivez notre liste des meilleures pratiques de conception de formulaire de contact – Ce guide peut vous aider à concevoir le meilleur formulaire WordPress pour convertir les visiteurs réguliers en prospects ou en clients.
• Lisez notre guide d’expert sur la création de formulaires interactifs – Jared Atchison, cofondateur de WPForms, vous donne des indications sur la façon de rendre les formulaires plus attrayants, de l’utilisation de la logique conditionnelle à l’ajout de contenu multimédia.

Nous espérons que cet article vous a aidé à apprendre comment créer un formulaire WordPress avec un sélecteur de date. Vous pourriez également consulter notre article sur la façon de créer un formulaire multi-pages sur WordPress et notre liste ultime des meilleurs plugins d’enquête WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.