### [How to Allow the Date Picker For Conversational Forms](https://wpforms.com/developers/how-to-allow-the-date-picker-inside-conversational-forms/)

**Published:** May 6, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how you can allow the date picker for conversational forms. 

**Content:**

## Introduction

Would you like to allow the date picker for **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.

![default date field in conversational forms](https://wpforms.com/wp-content/uploads/2021/05/conversationa-forms-default-date-field.jpg)

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.

![to begin, create your form and add at least one date picker field](https://wpforms.com/wp-content/uploads/2022/05/wpforms-date-picker-cf.jpg)

If you need some help in creating a form, [please see this documentation](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form").

## Enabling Conversational Forms

While still editing the form, click **Settings**. Next, navigate to the **Conversational Forms** tab and click the checkbox to **Enable Conversational Form Mode**.

![under Conversation Form Settings, click to Enable Conversational Form Mode](https://wpforms.com/wp-content/uploads/2022/05/wpforms-enable-conversational-forms.jpg)

If you need any help when using the **Conversational Forms addon**, [please review this documentation](https://wpforms.com/docs/how-to-install-and-use-the-conversational-forms-addon/ "How to Install and Use the Conversational Forms Addon").

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** to popup 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](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * 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' ] ) ) {
            ?>

**Categories:** Tutorials

**Tags:** Conversational Forms, PHP

---