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

Voulez-vous ajouter un sélecteur de date à votre formulaire de contact ? Un sélecteur de date est nécessaire lorsque vous souhaitez que vos utilisateurs sélectionnent une date et une heure dans le formulaire.

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

Quand et pourquoi devriez-vous ajouter un sélecteur de date dans les formulaires WordPress ?

De nombreux formulaires de contact comportent des champs simples comme le nom, l'e-mail, le téléphone et le message. Ces informations suffisent pour entrer en contact avec vos utilisateurs. Cependant, si vous souhaitez planifier un rendez-vous avec vos utilisateurs, vous devrez ajouter un sélecteur de date à votre formulaire.

Si vous gérez une boutique eCommerce et que vous souhaitez que les clients ajoutent leur date de disponibilité pour la livraison, vous pouvez ajouter un champ de date et d'heure sur le formulaire de contact ou de commande.

Il existe de nombreuses autres raisons pour lesquelles vous pourriez avoir besoin de demander à vos utilisateurs de soumettre des dates et des heures avec leurs informations de base. Examinons comment créer facilement un formulaire WordPress avec un sélecteur de date.

Créer un formulaire WordPress avec un sélecteur de date

La première chose à faire est d'installer et d'activer le plugin WPForms. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devrez vous rendre sur la page WPForms » Ajouter un nouveau pour créer un formulaire dans WordPress. Cela lancera l'écran de configuration de WPForms où vous trouverez plusieurs modèles prédéfinis pour créer facilement un nouveau formulaire de votre choix. Vous pouvez également sélectionner un formulaire vierge pour commencer à partir de zéro.

Pour commencer, nous choisissons le modèle Formulaire de contact simple.

Un formulaire de contact simple se chargera avec les champs de base nom, e-mail, commentaire, etc. Vous pouvez voir plus de champs sur le côté gauche et un aperçu de votre nouveau formulaire sur le côté droit de l'écran. Faites simplement glisser et déposez n'importe quel champ du côté gauche dans votre nouveau formulaire sur le côté droit.

Puisque vous souhaitez ajouter un sélecteur de date, vous devrez faire glisser et déposer le champ Date / Heure de la colonne de gauche sur votre formulaire. Vous pouvez placer le sélecteur de date au-dessus ou en dessous de n'importe quel champ du formulaire WordPress.

Le formulaire est entièrement flexible, ce qui signifie que vous pouvez facilement réorganiser l'ordre des champs ou personnaliser n'importe quel champ à partir de la section d'aperçu de votre formulaire sur le côté droit.

Une fois que vous cliquez sur un champ dans l'aperçu du formulaire, ses paramètres s'afficheront sur le côté gauche pour ce champ spécifique. Par exemple, si vous cliquez sur le champ Date / Heure que vous venez d'ajouter à votre formulaire, vous verrez ces paramètres pour le personnaliser :

• Libellé : C'est le titre du champ Date / Heure dans votre formulaire.
• Format : Dans cette liste déroulante, vous pouvez sélectionner un format pour la date, l'heure ou les deux.
• Description : Cela vous permet d'ajouter des instructions pour les utilisateurs sous le champ.
• Obligatoire : Si vous cochez cette option, un utilisateur ne pourra pas soumettre le formulaire sans sélectionner une date / heure dans ce champ.

Outre ces paramètres de base, il existe des options avancées pour personnaliser la conception et le style du champ date/heure.

Parmi les options avancées, on trouve :

• Taille du champ : Différentes tailles d'affichage sont disponibles pour le champ date/heure.
• Date : C'est un espace réservé. Le texte que vous ajouterez ici sera affiché par défaut aux utilisateurs. À côté, vous pouvez également sélectionner le format de la date.
• Type : Vous pouvez sélectionner un type pour le sélecteur de date. Il existe 2 types : Sélecteur de date et Liste déroulante de date
• Heure : Ceci est un autre espace réservé pour l'heure. Vous devrez également choisir un format parmi 12 heures ou 24 heures.

Il existe de nombreux autres paramètres personnalisés comme l'intervalle, masquer les étiquettes, et plus encore.

Vous devriez également consulter ce guide sur comment ajouter du CSS personnalisé à votre formulaire pour des instructions plus détaillées.

Assurez-vous de cliquer sur le bouton Enregistrer pour sauvegarder vos modifications.

Paramètres de confirmation et de notification

Une fois que vous êtes satisfait des champs, vous devrez gérer les paramètres de confirmation et les notifications par e-mail pour votre formulaire. Visitez simplement la page Paramètres » Confirmation dans le constructeur WPForms. À partir de là, vous pouvez ajouter un message personnalisé à vos utilisateurs qu'ils recevront après avoir soumis le formulaire. Vous pouvez également modifier le type de confirmation pour rediriger les utilisateurs vers une page de remerciement.

Après cela, vous pouvez aller à la page Paramètres » Notifications pour gérer les notifications par e-mail pour les soumissions de formulaire. Vous pouvez également envoyer plusieurs notifications à différentes adresses e-mail.

Pour les paramètres avancés, vous pouvez ajouter une logique conditionnelle à votre formulaire pour envoyer des notifications spécifiques aux utilisateurs. Cela signifie que, en fonction des options sélectionnées par l'utilisateur, vous pouvez leur envoyer différentes notifications par e-mail automatisées.

En savoir plus ici : Comment configurer les bonnes notifications et confirmations de formulaire.

Enfin, vous devrez cliquer sur le bouton Enregistrer pour voir votre formulaire de contact en action.

Afficher le formulaire sur votre site WordPress

Vous pouvez ajouter le nouveau formulaire que vous venez de créer avec un sélecteur de date à WordPress très facilement avec WPForms. Nous vous montrerons comment le faire en utilisant l'éditeur de blocs et l'éditeur classique. Nous vous montrerons également comment l'ajouter à une barre latérale.

Ajouter un formulaire WordPress à une page ou un article WordPress (Gutenberg)

Pour ajouter le formulaire sur n'importe quelle page ou article WordPress, vous pouvez rechercher le bloc WPForms et l'ajouter à l'éditeur de texte. 

Ensuite, vous verrez un menu déroulant où vous pourrez sélectionner le formulaire de contact que vous venez de créer.

Après avoir sélectionné le formulaire, vous verrez l'aperçu dans l'éditeur de texte. Pour ajouter le formulaire de contact à votre site, cliquez sur le bouton Publier dans le coin supérieur droit. 

Ajouter un formulaire WordPress à une page ou un article WordPress (Éditeur classique)

Si vous utilisez l'éditeur classique de WordPress, vous pouvez ajouter le formulaire en utilisant le bouton Ajouter un formulaire. Ou, vous pouvez simplement copier et coller le shortcode du formulaire pour intégrer le formulaire sur votre site web. 

Ajouter un formulaire WordPress dans une barre latérale

Vous pouvez également ajouter le formulaire à votre widget de barre latérale. Pour cela, allez dans Apparence » Widget. Maintenant, faites glisser le widget WPForms dans la barre latérale ou le menu du pied de page à droite.

Après cela, sélectionnez votre formulaire à l'aide du menu déroulant et enregistrez vos modifications.

Une fois terminé, cliquez sur le bouton Enregistrer. Votre formulaire commencera maintenant à s'afficher dans la barre latérale de votre site web.

C'est tout. 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 guide sur comment créer un formulaire de téléchargement de fichiers dans WordPress.