Cómo permitir el selector de fechas para formularios conversacionales

Introducción

¿Te gustaría permitir el selector de fechas para Formularios Conversacionales? Por defecto, los Formularios Conversacionales solo mostrarán un campo de fecha que permitirá escribir la fecha manualmente en formato numérico.

Si añades un pequeño fragmento de PHP, puedes permitir que la ventana emergente del Selector de Fechas aparezca dentro de un Formulario Conversacional, y en este tutorial te guiaremos paso a paso.

Creación del formulario

Primero, crearemos nuestro formulario y añadiremos nuestro campo Selector de Fechas, así como los otros campos que queramos en nuestro formulario.

Si necesitas ayuda para crear un formulario, consulta esta documentación.

Habilitar Formularios Conversacionales

Mientras editas el formulario, haz clic en Ajustes. A continuación, navega a la pestaña Formularios Conversacionales y haz clic en la casilla para Habilitar Modo de Formulario Conversacional.

Si necesitas ayuda al usar el complemento de Formularios Conversacionales, revisa esta documentación.

Mientras estás en esta pestaña, asegúrate de hacer cualquier otro cambio necesario que desees para tu formulario y luego haz clic en Guardar.

Añadir el fragmento para la ventana emergente del selector de fechas

Ahora es el momento de añadir el fragmento de código que permitirá que el Selector de Fechas aparezca dentro de tu formulario.

Simplemente copia y pega este fragmento en tu sitio. Si necesitas ayuda para añadir fragmentos a tu sitio, consulta este 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 );

Este fragmento buscará dentro de los directorios de archivos de WPForms para encontrar y cargar los archivos JavaScript (para funcionalidad) así como los archivos CSS (para estilo) que son necesarios para proporcionar la ventana emergente del selector de fechas al ver tu formulario.

Ahora, cuando tus visitantes vean el formulario, verán la ventana emergente del selector de fechas.

Y eso es todo lo que necesitas para permitir un selector de fechas para formularios conversacionales. ¿Te gustaría usar tu propia hoja de estilos en formularios conversacionales? Echa un vistazo a nuestro tutorial sobre Cómo incluir una hoja de estilos para Formularios Conversacionales.

Relacionado

Referencia de acción: wpforms_wp_footer