Comment autoriser le sélecteur de date pour les formulaires conversationnels

Introduction

Souhaitez-vous autoriser le sélecteur de date pour les Formulaires Conversationnels ? Par défaut, les Formulaires Conversationnels n'affichent qu'un champ de date qui accepte la saisie manuelle de la date au format numérique.

Si vous ajoutez un petit extrait de code PHP, vous pouvez permettre à la fenêtre contextuelle du Sélecteur de Date d'apparaître dans un Formulaire Conversationnel, et dans ce tutoriel, nous vous guiderons à travers chaque étape.

Création du formulaire

Tout d'abord, nous allons créer notre formulaire et ajouter notre champ Sélecteur de Date ainsi que les autres champs que nous souhaitons sur notre formulaire.

Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.

Activation des Formulaires Conversationnels

Tout en modifiant le formulaire, cliquez sur Paramètres. Ensuite, accédez à l'onglet Formulaires Conversationnels et cochez la case pour Activer le Mode Formulaire Conversationnel.

Si vous avez besoin d'aide lors de l'utilisation du module complémentaire Formulaires Conversationnels, veuillez consulter cette documentation.

Pendant que vous êtes sur cet onglet, assurez-vous d'apporter toutes les autres modifications nécessaires que vous souhaitez pour votre formulaire, puis cliquez sur Enregistrer.

Ajout de l'extrait de code pour la fenêtre contextuelle du Sélecteur de Date

Il est maintenant temps d'ajouter l'extrait de code qui permettra au Sélecteur de Date d'apparaître dans votre formulaire.

Copiez et collez simplement cet extrait sur votre site. Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * Load Flatpicker script and stylesheet on Conversational Forms
 *
 * @link https://wpforms.com/developers/how-to-allow-the-date-picker-inside-conversational-forms/
 */
 
function wpf_dev_enqueue_scripts() {
      
        // Load the javascript file for flatpickr
    wp_enqueue_script(
        'wpforms-flatpickr',
        WPFORMS_PLUGIN_URL . 'assets/lib/flatpickr/flatpickr.min.js',
        array( 'jquery' ),
        '4.6.9',
        true
    );
     
        // Load the stylesheet for flatpickr
    wp_enqueue_style(
        'wpforms-flatpickr',
        WPFORMS_PLUGIN_URL . 'assets/lib/flatpickr/flatpickr.min.css',
        array(),
        '4.6.9'
    );
     
}
add_action( 'wpforms_wp_footer', 'wpf_dev_enqueue_scripts', 100 );


/**
 * Scroll to next input when selecting date
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 */
 
function wpf_cf_datepicker_scroll( $forms ) {
	
	foreach ( $forms as $form ) {
		// Only run if conversational form
        if ( ! empty( $form[ 'settings' ][ 'conversational_forms_enable' ] ) ) {
            ?>
            <script type="text/javascript">
				window.wpforms_datepicker = {
					disableMobile: true,
					// Skip to next input when date is selected, except when it is date / time format
					onValueUpdate: function(selectedDates, dateStr, instance) {
						if ( ! jQuery(instance.input).parents( '.wpforms-field-row-block' ).length ) {
							window.WPFormsConversationalForms.scroll.next();	
						}
					},
				}
			</script>
            <?php
        }
    }
}
add_action( 'wpforms_wp_footer_end', 'wpf_cf_datepicker_scroll', 10 );

Cet extrait recherchera dans les répertoires de fichiers WPForms pour trouver et charger les fichiers JavaScript (pour la fonctionnalité) ainsi que les fichiers CSS (pour le style) nécessaires pour fournir la fenêtre contextuelle du sélecteur de date lors de la visualisation de votre formulaire.

Maintenant, lorsque vos visiteurs visiteront le formulaire, ils verront la fenêtre contextuelle du sélecteur de date.

Et c'est tout ce dont vous avez besoin pour autoriser un sélecteur de date pour les formulaires conversationnels. Souhaitez-vous utiliser votre propre feuille de style sur les formulaires conversationnels ? Consultez notre tutoriel sur Comment intégrer une feuille de style pour les formulaires conversationnels.

Articles associés

Référence d'action : wpforms_wp_footer