会話形式フォームで日付ピッカーを許可する方法

はじめに

会話形式フォームで日付ピッカーを許可しますか？ デフォルトでは、会話形式フォームには、日付を手動で数字形式で入力できる日付フィールドのみが表示されます。

短いPHPスニペットを追加すると、会話形式フォーム内に日付ピッカーのポップアップを表示できるようになります。このチュートリアルでは、各ステップを順を追って説明します。

フォームの作成

まず、フォームを作成し、日付ピッカーフィールドと、フォームに追加したいその他のフィールドを追加します。

フォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

会話型フォームの有効化

フォームの編集中に、設定をクリックします。次に、会話形式フォームタブに移動し、会話形式フォームモードを有効にするチェックボックスをクリックします。

会話形式フォームアドオンの使用中にサポートが必要な場合は、こちらのドキュメントをご確認ください。

このタブで、フォームに必要なその他の変更を加え、保存をクリックします。

日付ピッカーポップアップ用のスニペットの追加

次に、フォーム内に日付ピッカーをポップアップ表示できるようにするコードスニペットを追加します。

このスニペットをサイトにコピー＆ペーストしてください。スニペットをサイトに追加するのにサポートが必要な場合は、こちらのチュートリアルをご覧ください。

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

このスニペットは、WPFormsのファイルディレクトリ内を検索して、フォームを表示している間、日付ピッカーのポップアップを提供するために必要なJavaScriptファイル（機能用）およびCSSファイル（スタイル用）を見つけて読み込みます。

これで、訪問者がフォームにアクセスすると、日付ピッカーのポップアップが表示されます。

これで、会話形式フォームで日付ピッカーを許可するために必要なすべてが揃いました。会話形式フォームで独自のスタイルシートを使用したいですか？ 会話形式フォームのスタイルシートのエンキュー方法に関するチュートリアルをご覧ください。

関連

アクションリファレンス: wpforms_wp_footer