How to Allow the Date Picker Inside Conversational Forms

Introduction

Would you like to allow the date picker pop-up inside Conversational Forms? By default, the Conversational Forms will only show a date field that will accept manually typing in the date in a number’s format.

If you add a small PHP snippet, you can allow the Date Picker pop-up to appear inside a Conversational Form, and in this tutorial, we’ll walk you through each step.

Creating the form

First, we’ll create our form and add our Date Picker field as well as the other fields we want on our form.

If you need some help in creating a form, please see this documentation.

Enabling Conversational Forms

Next, from inside the form builder, navigate to the Settings tab and click Conversational Forms to enable it.

If you need any help when using the Conversational Forms addon, please review this documentation.

While on this tab, make sure you make any other necessary changes you’d like for your form, and then click Save.

Adding the snippet for the Date Picker pop-up

Now it’s time to add the code snippet that will allow the Date Picker pop-up inside your form.

Just copy and paste this snippet to your site. If you need any help in adding snippets to your site, please see this 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/js/flatpickr.min.js',
		array( 'jquery' ),
		'5.0.6',
		true
	);
	
        // Load the stylesheet for flatpickr
	wp_enqueue_style(
		'wpforms-flatpickr',
		WPFORMS_PLUGIN_URL . 'assets/css/flatpickr.min.css',
		array(),
		'4.6.3'
	);
	
}
add_action( 'wpforms_wp_footer', 'wpf_dev_enqueue_scripts', 100 );

This snippet will look inside the WPForms file directories to find and load the JavaScript files (for functionality) as well as the CSS files (for styling) that are needed to provide the pop-up for the date picker while viewing your form.

Now when you’re visitors visit the form, they’ll see the date picker pop-up.

Related

Action Reference: wpforms_wp_footer