Calendar form option


#1

It would be great if we could have a calendar form field, similar to when on a booking website you can click a field and a calendar pops up to allow you to choose a date.

Example:


#2

Hey Oliver,
While this is something we really want to provide in the core Unbounce form builder, it is possible to accomplish it today with a little extra scripting (in this case, using the jQuery UI library). I just wrote a step-by-step article in our Knowledge Base about how to do it called “How to add a calendar “Date Picker” to your form.” Please give it a shot and let me know if you run into any trouble.

Hope that helps!


#3

Hi
Another feature would be to allow a person that has registered for an event to add the event to their calendar and have this option appear on the confirmation page.
Cynthia


#4

Somebody removed your article, Carter! Can you re-post? It will be greatly appreciated!


#5

Oops sorry about that, here’s the updated article:


#6

Is there a way to add a time picker in addition to date. I need to be able to set appointments


#7

Hi Manuel, 

Can you provide a bit more background on your time picker questions:

  • Do you just need to show time slots or do you need to check your calendar and show only available time slots dynamically?

  • If you are just showing the same time slots everyday would they be the same for each date?

  • Will you be excluding weekends?

Best,
Hristian


#8

I have used this implementation on several forms and it works perfectly. 


#9

Cynthia, That is possible! But it is not native to unbounce :frowning:  I asked the same question in this thread a while back. https://community.unbounce.com/unbounce/topics/how-did-you-do-it-unbounce-add-to-calendar-on-confirm…

The answer is to use a platform called addtocalendar.com It is pretty simple, and works great.

Joe


#10

Can’s seem to get this to work. Does this still work? Should the scripts be on the form page (it’s on a separate lightbox here) or on the main page?

See attached a screenshots (sorry can only post 1):


#11


#12

Hey @nivvle,

Does your dev console give out any errors?

Also, it would be good to post a link to the page so the community here can actually take a look at the code.

Best,
Hristian

EDIT: Try also moving the script placement to “Before Body End Tag”. In general, very few things need or should be placed in the “Head”.