Como Permitir o Seletor de Datas para Formulários Conversacionais

Introdução

Gostaria de permitir o seletor de datas para Formulários Conversacionais? Por defeito, os Formulários Conversacionais apresentarão apenas um campo de data que aceitará a digitação manual da data no formato de número.

Se adicionar um pequeno trecho de PHP, pode permitir que o pop-up do Seletor de Datas apareça dentro de um Formulário Conversacional, e neste tutorial, vamos guiá-lo através de cada passo.

Criação do formulário

Primeiro, criaremos o nosso formulário e adicionaremos o nosso campo Seletor de Datas, bem como os outros campos que pretendemos no nosso formulário.

Se precisar de ajuda na criação de um formulário, consulte esta documentação.

Ativar Formulários Conversacionais

Enquanto edita o formulário, clique em Definições. Em seguida, navegue até ao separador Formulários Conversacionais e clique na caixa de verificação para Ativar Modo de Formulário Conversacional.

Se precisar de ajuda ao usar o complemento Formulários Conversacionais, reveja esta documentação.

Enquanto estiver neste separador, certifique-se de que faz quaisquer outras alterações necessárias que deseje para o seu formulário e, em seguida, clique em Guardar.

Adicionar o trecho para o pop-up do Seletor de Datas

Agora é hora de adicionar o trecho de código que permitirá ao Seletor de Datas aparecer dentro do seu formulário.

Basta copiar e colar este trecho no seu site. Se precisar de ajuda para adicionar trechos ao seu site, consulte 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 trecho irá procurar dentro das pastas de ficheiros do WPForms para encontrar e carregar os ficheiros JavaScript (para funcionalidade), bem como os ficheiros CSS (para estilo) que são necessários para fornecer o pop-up para o seletor de datas ao visualizar o seu formulário.

Agora, quando os seus visitantes visitarem o formulário, verão o pop-up do seletor de datas.

E é tudo o que precisa para permitir um seletor de datas para formulários conversacionais. Gostaria de usar a sua própria folha de estilos em formulários conversacionais? Consulte o nosso tutorial sobre Como Enfileirar uma Folha de Estilos para Formulários Conversacionais.

Relacionado

Referência de Ação: wpforms_wp_footer