How to Manually turn an input field into a Date Picker using CSS Selectors

Click here to learn more about the Automatic integration with Contact Form 7 or Divi.

In this tutorial, we’ll see how we can manually integrate the Date and Time Picker with a text input field by using the CSS Selector.

Basic Plugin

1. Copy the CSS Selector

1. Go to Input WP → Integration
2. Copy the CSS Selector → Click Save (Keep the CSS Selector as it is for Contact Form 7 and Gravity Forms. Read more about Divi integration)

2. Paste the CSS Selector

1. Locate the Input field you would like to integrate with.
2. Paste the CSS Selector into the field’s ID / Class field.
3. Save the form.

PRO

1. Create a new Event in Input WP

1. Go to the Input WP → Add New.
2. Input field Title. Then, select the Type.
3. Adjust any specific settings for the Date and/or Time Picker.
4. Once selected, click Publish.

2. Create a new Manual integration in Input WP

1. Go to the Input WP → Integration → Form Integration → Add New.
2. Input Label text (this will be just an identifier for you).
3. Select the Method → Manual
4. Click to Generate the CSS Selector. (Keep the CSS Selector as it is for Contact Form 7 and Gravity Forms. Read more about Divi integration)
5. Click Save.

3. Paste the CSS Selector

1. Locate the Input field you would like to integrate with.
2. Paste the CSS Selector into the field’s ID / Class field.
3. Save the form.

That’s it! You’ve successfully turned an input field into a date picker.