Como permitir o seletor de data para formulários de conversação

Introdução

Gostaria de permitir o seletor de data para os formulários de conversação? Por predefinição, os formulários de conversação apenas mostrarão um campo de data que aceite a introdução manual da data no formato de um número.

campo de data predefinido em formulários de conversação

Se adicionar um pequeno snippet de PHP, pode permitir que o pop-up do Date Picker apareça dentro de um Formulário de Conversação e, neste tutorial, vamos guiá-lo através de cada passo.

Criar o formulário

Primeiro, vamos criar o nosso formulário e adicionar o nosso campo Date Picker, bem como os outros campos que queremos no nosso formulário.

para começar, crie o seu formulário e adicione pelo menos um campo de seleção de data

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

Ativação de formulários de conversação

Enquanto ainda estiver a editar o formulário, clique em Definições. Em seguida, navegue até ao separador Formulários de conversação e clique na caixa de verificação para Ativar o modo de formulário de conversação.

em Definições do formulário de conversação, clique para ativar o modo de formulário de conversação

Se precisar de ajuda para utilizar a extensão Conversational Forms, consulte esta documentação.

Neste separador, certifique-se de que efectua quaisquer outras alterações necessárias ao seu formulário e, em seguida, clique em Guardar.

Adicionar o snippet para o pop-up do Date Picker

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

Basta copiar e colar este snippet no seu site. Se precisar de ajuda para adicionar snippets 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 snippet vai procurar dentro dos diretórios de arquivos do WPForms para encontrar e carregar os arquivos JavaScript (para a funcionalidade), bem como os arquivos CSS (para o estilo) que são necessários para fornecer o pop-up para o seletor de data durante a visualização do seu formulário.

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

agora pode ver o seletor de datas para formulários de conversação

E isto é tudo o que precisa para permitir um seletor de datas para formulários de conversação. Gostaria de usar a sua própria folha de estilo em formulários de conversação? Confira nosso tutorial sobre Como enfileirar uma folha de estilos para formulários de conversação.

Referência da ação: wpforms_wp_footer