Come abilitare il Date Picker per i Moduli Conversazionali

Introduzione

Desideri abilitare il Date Picker per i Moduli Conversazionali? Per impostazione predefinita, i Moduli Conversazionali mostreranno solo un campo data che accetterà l'inserimento manuale della data in formato numerico.

Se aggiungi un piccolo snippet PHP, puoi abilitare la finestra popup del Date Picker all'interno di un Modulo Conversazionale, e in questo tutorial ti guideremo passo dopo passo.

Creazione del modulo

Innanzitutto, creeremo il nostro modulo e aggiungeremo il nostro campo Date Picker insieme agli altri campi che desideriamo nel nostro modulo.

Se hai bisogno di aiuto nella creazione di un modulo, consulta questa documentazione.

Abilitazione dei moduli conversazionali

Mentre modifichi ancora il modulo, fai clic su Impostazioni. Successivamente, naviga alla scheda Moduli Conversazionali e fai clic sulla casella di controllo per Abilita Modalità Modulo Conversazionale.

Se hai bisogno di aiuto durante l'utilizzo del componente aggiuntivo Moduli Conversazionali, esamina questa documentazione.

Mentre sei su questa scheda, assicurati di apportare eventuali altre modifiche necessarie per il tuo modulo, quindi fai clic su Salva.

Aggiungere lo snippet per la finestra popup del Date Picker

Ora è il momento di aggiungere lo snippet di codice che consentirà al Date Picker di apparire all'interno del tuo modulo.

Copia e incolla semplicemente questo snippet sul tuo sito. Se hai bisogno di aiuto nell'aggiungere snippet al tuo sito, consulta questo tutorial.

/**
 * 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 );

Questo snippet cercherà nelle directory dei file di WPForms per trovare e caricare i file JavaScript (per la funzionalità) e i file CSS (per lo stile) necessari per fornire la finestra popup per il date picker durante la visualizzazione del tuo modulo.

Ora, quando i tuoi visitatori visiteranno il modulo, vedranno la finestra popup del date picker.

E questo è tutto ciò che ti serve per abilitare un date picker per i moduli conversazionali. Desideri utilizzare il tuo foglio di stile sui moduli conversazionali? Dai un'occhiata al nostro tutorial su Come includere un foglio di stile per i Moduli Conversazionali.

Correlati

Riferimento azione: wpforms_wp_footer