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

Des entrées de date incohérentes peuvent transformer un simple formulaire WordPress en un cauchemar frustrant. Slashes, tirets, noms de mois complets – lorsque les utilisateurs saisissent les dates comme ils le souhaitent, il est inévitable de se retrouver avec un désordre de données qui prend des heures à nettoyer.

C'est pourquoi l'ajout d'un sélecteur de date à vos formulaires est une excellente idée.

Au lieu de laisser le formatage à l'utilisateur, un sélecteur de date lui offre une interface de calendrier claire, rendant chaque entrée uniforme et facile à gérer.

Dans ce guide, nous allons partager la manière la plus simple de créer un formulaire WordPress avec un sélecteur de date. Que vous créiez des formulaires de réservation, des inscriptions à des événements ou des planificateurs de rendez-vous, cette petite amélioration peut vous aider, vous et les visiteurs de votre site. 🙌

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

Après avoir géré des milliers de formulaires en ligne dans WordPress, nous avons remarqué que les champs de formulaire liés aux dates sont souvent là où les choses tournent mal. En fait, les formats de date incorrects sont l'une des principales raisons pour lesquelles nous constatons que les soumissions de formulaires échouent ou créent de la confusion.

Un champ sélecteur de date résout ces frustrations courantes et améliore votre expérience utilisateur. Nous l'avons vu fonctionner efficacement pour :

• Formulaires d'inscription qui demandent aux utilisateurs de saisir leur date de naissance.
• Formulaires de commande pour choisir une date et une heure de livraison pour une commande.
• Formulaires de location d'articles pour sélectionner une date de prise en charge ou de retour pour un article loué.
• Formulaires de demande de rappel pour permettre aux utilisateurs de vous faire savoir quand ils souhaitent être contactés au sujet de vos produits ou services.
• Formulaires de demande de congé pour permettre aux employés de saisir les dates de début et de fin de leurs congés.
• Formulaires de rendez-vous ou de réservation pour les sites Web d'hébergement ou de services.

Le meilleur ? Un sélecteur de date garantit la cohérence de toutes les soumissions. Fini de se demander si 03/04/2024 signifie le 4 mars ou le 3 avril, un casse-tête que nous avons rencontré trop souvent avec la saisie manuelle des données.

Cela dit, nous allons vous montrer comment créer facilement un formulaire WordPress avec un sélecteur de date. Voici les étapes que nous allons couvrir, et vous pouvez utiliser les liens rapides ci-dessous pour naviguer :

• Étape 1 : Installer le plugin WPForms
• Étape 2 : Choisir un modèle de formulaire
• Étape 3 : Ajouter le champ Sélecteur de date à votre formulaire WordPress
• Étape 4 : Configurer les paramètres du sélecteur de date et d'heure
• Étape 5 : Intégrer le formulaire WordPress sur votre site Web
• 🎁 Étape bonus : Activer les rappels de rendez-vous
• FAQ : Comment créer un formulaire WordPress avec un sélecteur de date
• Conseils ultimes pour optimiser votre formulaire WordPress

Commençons.

Étape 1 : Installer le plugin WPForms

Nous avons testé des dizaines de plugins de formulaires et de sélecteurs de date au fil des ans, y compris des options populaires comme Ninja Forms et Gravity Forms.

Mais pour ajouter des sélecteurs de date, nous avons trouvé que WPForms est la solution la plus conviviale, en particulier pour les débutants qui souhaitent créer des formulaires d'aspect professionnel sans toucher au code.

En plus d'un sélecteur de date, WPForms propose des fonctionnalités premium telles que la logique conditionnelle pour afficher ou masquer des champs en fonction des sélections de l'utilisateur et des calculatrices intelligentes pour gérer automatiquement les estimations de prix.

Chez WPBeginner, nous utilisons WPForms pour créer la plupart de nos formulaires, et nous ne pouvons que le recommander. Vous pouvez consulter notre avis complet sur WPForms pour plus de détails.

Tout d'abord, vous devez installer WPForms sur votre site web. Pour des instructions détaillées, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Étape 2 : Choisir un modèle de formulaire

Après l'activation, rendez-vous sur la page WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Cela vous dirigera vers la page « Sélectionner un modèle ».

Avant de choisir un modèle, il est conseillé de nommer votre formulaire WordPress afin de pouvoir l'identifier facilement plus tard.

Ensuite, vous choisirez comment vous allez créer votre formulaire – en utilisant WPForms AI, un modèle prédéfini, ou à partir de zéro.

Si vous souhaitez utiliser le générateur de formulaires IA, il vous suffit d'écrire une simple invite. L'IA générera alors le formulaire pour vous en un instant.

Pour cet exemple, nous utiliserons le modèle de formulaire de contact simple, puis nous y ajouterons le champ sélecteur de date. Mais n'hésitez pas à choisir un modèle qui vous convient le mieux.

En faisant défiler la page de configuration, vous verrez plus de 2 000 modèles de formulaires prédéfinis disponibles ici. Vous pouvez utiliser la barre de recherche pour affiner votre choix.

Une fois que vous avez fait votre choix, cliquez simplement sur le bouton « Utiliser le modèle ».

Étape 3 : Ajouter le champ Sélecteur de date à votre formulaire WordPress

Maintenant, vous arriverez dans le constructeur de formulaires WPForms. Vous remarquerez les options de champ dans la colonne de gauche et un aperçu du formulaire sur le côté droit de l'écran.

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

Pour la démonstration, nous allons vous montrer comment ajouter un champ de date à votre formulaire WordPress. Mais si votre modèle en a déjà un, vous pouvez passer à la partie modification de cette étape.

Ce que vous devez faire, c'est faire défiler vers le bas jusqu'à la section Fancy Fields dans la colonne de gauche, où vous verrez le champ 'Date / Heure'.

Faites simplement glisser et déposez ce champ à l'endroit où vous le souhaitez sur votre formulaire. Dans ce tutoriel, nous l'avons placé juste en dessous du champ Email.

Une fois que vous avez fait cela, cliquez sur le champ 'Date/Heure' pour le modifier. Cela ouvrira l'onglet 'Options du champ' sur le côté gauche de votre écran.

À partir de là, vous pouvez modifier l'étiquette 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 en utilisant le menu déroulant Format déroulant. Les options sont Date et Heure, Date, ou Heure uniquement. Cela peut être utile si vous souhaitez utiliser uniquement une date sans champ d'heure pour collecter les dates de naissance des utilisateurs.

En dehors de cela, vous pouvez remplir le texte de description pour donner plus de contexte sur ce que l'utilisateur doit saisir dans le champ.

Enfin, vous pouvez cocher la case « 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 soumettre le formulaire.

Une fois que vous avez fait cela, cliquez simplement sur le bouton « Enregistrer » en haut pour enregistrer les paramètres de votre formulaire.

Étape 4 : Configurer les paramètres du sélecteur de date et d'heure

Par défaut, le champ de sélection de plage de dates sur votre formulaire WordPress sera un calendrier avec un menu déroulant d'heure à côté.

La date actuelle sera sélectionnée, mais l'utilisateur peut la modifier pour choisir une date différente. Le format de date est mois/jour/année.

Pendant ce temps, le menu déroulant d'heure est par défaut sur une horloge de 12 heures avec des intervalles de 30 minutes.

Les utilisateurs peuvent ensuite choisir un créneau horaire qui leur convient le mieux.

Dans certains cas, vous voudrez peut-être modifier les paramètres du sélecteur de date. Par exemple, votre pays utilise peut-être le format jour/mois/année ou le format date et heure de 24 heures plutôt que les formats par défaut.

Pour ce faire, vous devrez 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 changer la plage de dates d'un calendrier à un menu déroulant de dates.

Passer du calendrier de sélection de dates à un menu déroulant de dates est une bonne idée si le formulaire a un espace limité et que le calendrier semble plutôt petit.

Voici à quoi ressemble le menu déroulant de dates :

En dessous, vous pouvez changer 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 calendrier, vous pouvez également insérer du texte d'espace réservé dans le champ « Date ». Vous pouvez le remplir avec votre format de date pour faire savoir aux utilisateurs quel format vous utilisez, afin qu'ils ne soient pas confus.

De plus, vous pouvez activer le commutateur « Limiter les jours » pour ajuster la plage de dates qui peut être sélectionnée. Ce sera utile si vous n'exécutez vos services que pendant la semaine.

N'hésitez pas à désactiver également les dates passées pour empêcher la sélection des dates précédentes.

Ensuite, descendons à la section « Heure » pour changer le sélecteur d'heure.

Ici, vous pouvez changer l'intervalle à 15 minutes ou 1 heure au lieu de 30 minutes. Il est également bon d'entrer du texte d'espace réservé ici pour montrer quel format d'heure vous utilisez.

Le sélecteur d'heure utilise par défaut une horloge de 12 heures, mais vous pouvez passer à une horloge de 24 heures si vous préférez.

De plus, n'hésitez pas à activer le paramètre « Limiter les heures » pour spécifier les heures de début et de fin de vos services. De cette façon, les utilisateurs ne pourront pas prendre rendez-vous en dehors de vos heures d'ouverture.

En dehors de cela, vous pouvez entrer un nom de classe CSS pour le champ de plage de dates. Il s'agit d'une fonctionnalité avancée et facultative, mais vous pouvez l'utiliser pour remplacer le style du formulaire à l'aide de code plus tard.

Enfin, vous pouvez masquer l'étiquette et/ou la sous-étiquette du champ de formulaire si nécessaire.

Une fois que 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 5 : Intégrer le formulaire WordPress sur votre site Web

Vous êtes maintenant prêt à ajouter votre nouveau formulaire avec le sélecteur de date à votre site WordPress. Pour ce faire, cliquez simplement sur le bouton « Intégrer » en haut du constructeur de formulaires.

Une fenêtre contextuelle apparaîtra vous demandant de sélectionner une page existante à laquelle 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, donc les étapes sont 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 WordPress ou votre site Web et cliquez sur « C'est parti ! »

Si vous souhaitez ajouter le formulaire à une nouvelle page, cliquez simplement sur le bouton « Créer une nouvelle page ».

Ensuite, donnez un nom à votre nouvelle page et cliquez sur « C'est parti ! »

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

Tout d'abord, cliquez sur le bouton « + » pour ajouter un bloc.

Ensuite, tapez « WPForms » dans la barre de recherche de blocs.

Faites simplement glisser et déposez le bloc où il convient le mieux sur la page.

Tout ce que vous avez à faire maintenant est de cliquer sur le menu déroulant.

Ensuite, sélectionnez le formulaire que vous venez de créer.

Dans la barre latérale des paramètres de bloc, vous pouvez personnaliser le champ du formulaire, l'étiquette et les styles des boutons pour qu'ils aient un meilleur aspect avec votre thème WordPress.

Vous pouvez modifier la taille, le rayon des bords et les couleurs de chaque élément.

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

Il devrait ressembler à ceci sur votre site WordPress :

Si vous souhaitez insérer le formulaire widget dans un article plutôt que dans une page, vous pouvez alors créer un nouvel article ou en ouvrir un existant dans l'éditeur de blocs.

Après cela, suivez simplement les mêmes étapes pour ajouter le bloc WPForms à une page comme dans cette méthode.

Ajouter le bloc WPForms à une zone prête pour les widgets

Si vous utilisez un thème WordPress classique, vous voudrez peut-être afficher votre formulaire dans une zone d'en-tête, de pied de page ou de barre latérale prête pour les widgets. Cela peut être une bonne idée si votre formulaire est assez court et ne prend pas trop de place.

Pour ce faire, allez simplement dans Apparence » Widgets depuis la zone d'administration de WordPress. Ensuite, accédez à la zone de widget souhaitée et cliquez sur le bouton blanc « + » pour ajouter un bloc à l'intérieur. 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, sélectionnez simplement le formulaire que vous venez de créer. Dans la barre latérale des paramètres du bloc, vous pouvez configurer le design afin qu'il corresponde mieux à votre thème WordPress.

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

C’est tout !

Voici à quoi ressemble notre formulaire en bas d'un article de blog WordPress :

Intégrer votre formulaire WordPress avec un shortcode

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

Dans la fenêtre contextuelle « Intégrer dans une page », cliquez simplement sur le lien « utiliser un shortcode ». Vous verrez alors un shortcode que vous pouvez copier et coller dans une page, un article ou une zone prête pour les widgets.

Pour plus d'informations sur l'utilisation des shortcodes, lisez notre article sur comment ajouter un shortcode dans WordPress.

🎁 Étape bonus : Activer les rappels de rendez-vous

Si vous utilisez votre formulaire pour planifier des rendez-vous ou des réservations, l'ajout de rappels automatisés peut faire une grande différence.

Connecter votre formulaire à votre service de marketing par e-mail vous permet d'envoyer des rappels de rendez-vous, aidant ainsi à réduire les absences et à garder les choses organisées.

Cela rassure également les utilisateurs sur le fait que leur soumission a été réussie et que leur place est confirmée.

Pour configurer cela, vous pouvez suivre notre guide étape par étape sur comment envoyer des e-mails de confirmation à vos soumissionnaires de formulaire. En quelques clics, vous pouvez vous assurer que les utilisateurs reçoivent un rappel rapide sur la date ou l'heure sélectionnée. ⏰

FAQ : Comment créer un formulaire WordPress avec un sélecteur de date

Vous envisagez d'ajouter un sélecteur de date à vos formulaires WordPress ? Voici quelques questions courantes pour vous aider à démarrer.

Qu'est-ce qu'un sélecteur de date dans les formulaires WordPress ?

Un sélecteur de date permet aux utilisateurs de choisir une date dans un calendrier. Il aide à garantir que les dates sont formatées de manière cohérente et réduit les erreurs de saisie.

Comment ajouter un sélecteur d'heure dans WordPress ?

Si vous utilisez un constructeur de formulaires comme WPForms, faites simplement glisser le champ « Date / Heure » dans votre formulaire. Choisissez ensuite l'option « Heure » dans les paramètres.

Comment afficher la date sur mon site WordPress ?

Vous pouvez afficher les dates à l'aide d'un widget, d'un shortcode ou d'un extrait de code PHP personnalisé.

WPCode est l'un des meilleurs plugins d'extraits de code pour WordPress. Il rend l'ajout de code personnalisé, y compris celui pour afficher la date du jour, à votre site Web super sûr et facile.

Comment insérer un sélecteur de date en utilisant HTML ?

En HTML brut, vous pouvez utiliser : <input type="date">. Mais dans WordPress, il est plus facile d'utiliser un plugin de formulaire pour une meilleure compatibilité et un meilleur contrôle.

Conseils ultimes pour optimiser votre formulaire WordPress

Maintenant que vous savez comment ajouter un sélecteur de date dans les formulaires WordPress, abordons les meilleurs conseils pour faire passer vos formulaires au niveau supérieur :

• Acceptez les paiements en ligne dans vos formulaires – WPForms prend en charge 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 collecter beaucoup d'informations, le rendre conversationnel peut augmenter le taux de complétion du formulaire.
• Empêchez le spam des formulaires de contact – Vous pouvez activer la protection anti-spam intégrée de WPForms et la case à cocher reCAPTCHA pour filtrer les soumissions de formulaires indésirables.
• Créez des formulaires multilingues – Atteignez un public diversifié et augmentez l'accessibilité de votre site Web avec des formulaires qui s'affichent dans plusieurs langues.
• Suivez notre liste des meilleures pratiques de conception de formulaires de contact – Ce guide peut vous guider dans la conception du meilleur formulaire WordPress pour convertir les visiteurs réguliers en prospects ou en clients.
• Lisez notre guide d'experts sur la création de formulaires interactifs – Jared Atchison, co-fondateur de WPForms, vous donne des conseils 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 voudrez peut-être aussi consulter notre article sur la façon de créer un formulaire multipage dans WordPress et notre liste ultime des meilleurs plugins d'enquête WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.