fbpx

Documentation

General

Form integration

Theme

Sync calendar (Import)

Sync calendar (Export)

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 WPIntegration
  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 WPAdd 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 WPIntegrationForm IntegrationAdd New.
  2. Input Label text (this will be just an identifier for you).
  3. Select the MethodManual
  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.

As of now, this has been tested only with Contact Form 7, Gravity Forms and Divi.

Regardless, feel free to explore with other tools.

If you have more questions, use the public forum (for the Basic plugin), or submit your support ticket (for PRO users).