Como Permitir o Seletor de Data para Formulários Conversacionais

Introdução

Você gostaria de permitir o seletor de datas para Formulários Conversacionais? Por padrão, os Formulários Conversacionais exibirão apenas um campo de data que aceitará a digitação manual da data no formato de números.

Se você adicionar um pequeno trecho de PHP, poderá permitir que o pop-up do Seletor de Datas apareça dentro de um Formulário Conversacional, e neste tutorial, vamos guiá-lo por cada etapa.

Criando o formulário

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

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

Ativando Formulários Conversacionais

Enquanto ainda edita o formulário, clique em Configurações. Em seguida, navegue até a aba Formulários Conversacionais e clique na caixa de seleção para Ativar Modo de Formulário Conversacional.

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

Enquanto estiver nesta aba, certifique-se de fazer quaisquer outras alterações necessárias que desejar para o seu formulário e, em seguida, clique em Salvar.

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

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

Basta copiar e colar este trecho em 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 procurará nos diretórios de arquivos do WPForms para encontrar e carregar os arquivos JavaScript (para funcionalidade) e os arquivos CSS (para estilo) que são necessários para fornecer o pop-up para o seletor de datas ao visualizar seu formulário.

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

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

Relacionado

Referência de Ação: wpforms_wp_footer