Résumé IA
Souhaitez-vous modifier l'apparence du champ Date / Heure dans vos formulaires WordPress ? Le champ Date / Heure est un moyen simple et intuitif de permettre à vos utilisateurs de planifier des rendez-vous et plus encore.
Ce tutoriel vous montrera comment personnaliser ce champ dans WPForms.
Avant de commencer le tutoriel ci-dessous, assurez-vous que WPForms est installé et activé sur votre site. Ensuite, vérifiez votre licence si ce n'est pas déjà fait.
Vous devrez également créer un nouveau formulaire ou en ouvrir un existant pour le modifier et y ajouter un champ Date / Heure. Une fois que vous l'avez fait, cliquez sur le champ dans la zone d'aperçu du constructeur pour ouvrir son panneau Options de champ.
Modification du libellé et de la description du champ
Dans les options du champ Date / Heure, vous pouvez personnaliser les libellés des champs et leur visibilité, ainsi qu'ajouter une description.
Personnalisation du libellé et des sous-libellés du champ
Par défaut, le libellé du champ sera Date / Heure. De plus, si vous avez affiché les sous-champs Date et Heure, il y aura également un sous-libellé sous chaque champ.
Vous pouvez personnaliser le libellé du champ en saisissant votre texte dans le champ prévu à cet effet.
Les sous-libellés Date et Heure ne sont pas personnalisables.
Masquer le libellé et les sous-libellés du champ
Vous pouvez supprimer n'importe lequel des libellés de votre champ Date / Heure depuis le panneau Options de champ. Pour ce faire, cliquez sur Avancé, puis faites défiler jusqu'en bas du panneau et activez les paramètres Masquer le libellé et Masquer les sous-libellés.
Ajout d'une description
Vous pouvez également ajouter une description à votre champ Date / Heure pour fournir plus de contexte ou d'informations à vos utilisateurs. Saisissez simplement le texte souhaité dans le champ prévu à cet effet dans les options générales du champ.
Cette description apparaîtra directement sous les champs de saisie sur le frontend de votre site.
Affichage de la date, de l'heure ou des deux
Dans le champ Date / Heure, vous avez la possibilité d'afficher uniquement le sous-champ Date, uniquement le sous-champ Heure, ou les deux sous-champs.
Vous pouvez modifier les sous-champs que vous souhaitez afficher à l'aide du menu déroulant Format dans le panneau Options du champ.
Dans ce menu déroulant, vous pouvez choisir parmi les options suivantes :
- Date et Heure
- Date
- Heure
Champ obligatoire
Pour vous assurer que vos utilisateurs doivent sélectionner une date ou une heure avant de soumettre votre formulaire, activez le paramètre Requis dans les options du champ.
Sélection de la taille du champ
L'option Taille du champ se trouve dans l'onglet Avancé du panneau Options du champ. Elle détermine la largeur des sous-champs Date et Heure. Vous pouvez choisir parmi Petit, Moyen ou Grand.
Cette option est particulièrement utile lors de la configuration d'un formulaire à plusieurs colonnes.
Modification de l'affichage de la date
Il existe plusieurs options d'affichage que vous pouvez personnaliser pour le sous-champ Date : Type, Placeholder et Format. Pour accéder à ces options, ouvrez l'onglet Avancé dans le panneau Options du champ.
Type
Le sous-champ Date propose deux types d'affichage différents parmi lesquels vous pouvez choisir : Sélecteur de date ou Liste déroulante de dates.
Sélecteur de date
L'option Sélecteur de date créera une fenêtre contextuelle de calendrier à partir de laquelle vos utilisateurs pourront sélectionner une date.
Liste déroulante de dates
L'option Liste déroulante de dates affichera 3 listes déroulantes à partir desquelles les utilisateurs pourront sélectionner les valeurs du mois, du jour et de l'année.
Espace réservé
L'option Placeholder vous permet de définir un texte d'espace réservé qui sera affiché dans le champ Date / Heure si vous utilisez le type Sélecteur de date.
Vous pouvez personnaliser ce texte pour ajouter plus de clarté à vos formulaires, par exemple en indiquant aux utilisateurs de sélectionner une date. Entrez simplement votre texte d'espace réservé dans le champ prévu à cet effet dans l'onglet Avancé du panneau Options du champ.
Format
Par défaut, le sous-champ Date propose plusieurs options intégrées pour le formatage d'une date. Celles-ci incluent :
- M/J/A : Formate la date numériquement par Mois/Jour/Année.
- J/M/A : Formate la date numériquement par Jour/Mois/Année.
- A/M/J : Formate la date numériquement par Année/Mois/Jour.
- Mois.Jour.Année, Jour.Mois.Année, Année.Mois.Jour : Les mêmes formats que ci-dessus, mais utilisant des points au lieu de barres obliques comme séparateur.
- Mois, Jour, Année : Formate la date sous forme de chaîne contenant le Mois, le Jour et l'Année complets.
Sélectionnez votre format préféré dans le menu déroulant.
Modification de l'affichage de l'heure
Le sous-champ Heure propose également des options que vous pouvez personnaliser, notamment l'Intervalle, le Placeholder et le Format.
Intervalle
Ce paramètre vous permet de choisir les intervalles dans lesquels les options de temps apparaissent. Les options intégrées pour ce paramètre permettent d'afficher les heures par incréments de 15, 30 ou 60 minutes.
Par défaut, l'intervalle sera défini sur 30 minutes. Utilisez le menu déroulant dans l'onglet Avancé du panneau Options de champ pour le modifier si vous le souhaitez.
Espace réservé
L'option Placeholder vous permet de définir un texte d'espace réservé qui apparaîtra dans le sous-champ Heure lorsque vos utilisateurs ouvriront votre formulaire. Par exemple, vous pouvez utiliser ce paramètre pour indiquer à vos utilisateurs de sélectionner une heure.
Pour personnaliser l'espace réservé de l'heure, entrez simplement votre texte souhaité dans le champ fourni dans l'onglet Avancé du panneau Options de champ.
Format
Le sous-champ Heure propose deux options différentes pour le format de l'heure : 12 heures ou 24 heures.
Format 12h
Choisir un format de 12 heures affichera les heures disponibles de 12h00 à 12h00.
Format 24h
Le format de 24 heures affichera les heures disponibles de 0h00 à 23h00.
Limitation des dates et heures disponibles
Si vous souhaitez avoir plus de contrôle sur les dates que vos utilisateurs peuvent choisir, vous pouvez personnaliser les options disponibles de plusieurs manières, notamment en limitant les jours disponibles, en désactivant les dates passées et en limitant les heures disponibles. Tous ces paramètres sont disponibles dans les options de champ Avancé.
Limiter les jours disponibles
Afin de choisir les jours de la semaine disponibles pour votre sélection, activez le paramètre Limiter les jours.
Cela révélera un ensemble de cases à cocher pour les jours de la semaine. Si vous souhaitez empêcher les utilisateurs de choisir un jour spécifique de la semaine, décochez simplement sa case pour le désactiver.
Désactiver les dates passées
En plus de limiter les jours disponibles, vous pouvez également empêcher les utilisateurs de sélectionner des dates passées dans vos formulaires. Pour ce faire, activez le paramètre intitulé Désactiver les dates passées.
Lorsqu'une date est désactivée, elle sera grisée sur votre site et ne sera pas cliquable.
Limiter les heures disponibles
Si vous le souhaitez, vous pouvez personnaliser les heures que vos utilisateurs peuvent sélectionner dans vos formulaires. Pour ce faire, activez l'option Limiter les heures.
Cela révélera des menus déroulants pour l'heure de début et l'heure de fin de vos heures disponibles. Choisissez vos heures préférées pour définir la plage disponible.
Sur le frontend de votre site, seules les heures comprises entre votre heure de début et votre heure de fin sélectionnées seront disponibles pour que vos utilisateurs puissent choisir.
C'est tout ! Vous pouvez maintenant personnaliser le champ Date / Heure pour tous vos formulaires.
Ensuite, souhaitez-vous en savoir plus sur les options de personnalisation avancées disponibles pour d'autres types de champs dans WPForms ? Consultez nos tutoriels sur les champs Liste déroulante, Cases à cocher et Choix multiples pour tous les détails !