How can I add a date and time picker to a simple Webflow form without using a CMS collection item?

To add a date and time picker to a simple Webflow form without using a CMS collection item, you can utilize custom code and JavaScript libraries. Here's a step-by-step guide to achieving this:

1. Design your form in Webflow as you normally would, including any additional fields you need.

2. Open the custom code section of your project settings. To do this, click on the gear icon in the top-right corner of the Webflow Designer, then select the "Custom Code" tab.

3. In the Head Code section, include the necessary CSS and JavaScript files for the date and time picker library you want to use. There are several popular options available, such as Flatpickr, Pikaday, or Datepicker. You can either host these files yourself or include them from a content delivery network (CDN). For example, if you choose Flatpickr, you can include the following links in the Head Code:

```html

4. Once you have included the necessary files, you can add JavaScript code to initialize the date and time picker on your form field. This code should be placed in the Footer Code section of your project settings. Here's an example using Flatpickr:

```html

```

In this example, the `.datepicker` class is applied to the input field where you want the date and time picker to appear. Feel free to adjust the options provided by the library to fit your specific needs.

5. Now, go back to your form in the Webflow Designer and select the input field(s) where you want the date and time picker to appear. Add the `.datepicker` class to the chosen field by selecting the "Settings" tab on the right-hand-side panel and adding the class in the "Class" field.

That's it! You have successfully added a date and time picker to your Webflow form without using a CMS collection item. Preview your form to test the functionality and make any necessary adjustments to the custom code based on your specific requirements.