If your lead gen form requires a date or set of dates, you might be interested in hooking up a "date picker" widget to make the interaction as easy as possible. While this is a feature we will one day incorporate into the core form builder in Unbounce, you can use the following set of steps to get it working today.
Step 1: Add jQuery UI
Step 2b (optional): Customize the look of your date picker
There are many different themes available to the jQuery UI, and the above step is making use of the "smoothness" theme. If you wish to use a different theme, hop over here and cycle through the various options. When you find the one you like, take note of the URL they provide:
...and replace the <link> tag from step 2(a) with a new tag like this:
Note: There should only be ONE jQuery UI stylesheet being included on your page now.
Step 3: Add the date field to your form
You may already have this in your form, but the important part is finding out what the field is called. You'll want to use just a "Single-line Text Field":
In this example I'm calling it "Start Date". You'll notice right under the Field Label input box, there's some text "start_date". This is the ID of your field, remember it for the next step
Open up the Scripts dialogue again. Add a new script, call it "Date Picker" and set the placement to "Head". Paste in the following code, and replace "start_date" with the form field ID that you took note of in the last step:
That's it, you're all done! You can save and preview your page now, and clicking on the "Start Date" input field should show you something like this (depending on which theme you chose):
Selecting a date will populate the form field like so:
Remember to look at all the options of using this component if you want to get your hands dirty customizing it. There really are a ton of options, including changing the format of the date string that populates your form field. Let us know how it worked out for you!