Webflow Tips & Tricks: Use a date picker in your form

Ever wanted to integrate a datepicker into one of your Webflow forms? In this post I show you how to do this with two simple custom code snippets.

Webflow's built in forms offer all the basic functionality you'd expect from a contact form. There are phone and email input fields, check boxes, drop down menus and more. However I was recently working on a project that required me to add a form that included a date picker. A date picker makes it easier for visitors to choose a desired date and prevents them from entering a date in the wrong format (which is especially detrimental if your form is connected to other external systems that expect the date to be in a certain format. Since Webflow doesn't offer a date picker element yet, I have outlined how to integrate one in this post.

Datepicker in Webflow

  1. Create a new form on the page and place a field label and input field inside.
  2. Select the input field, navigate to your element settings and give the field an ID of "datepicker". While you're at it also give the field a name under input settings.
  3. Go to page settings of the page you're currently on and copy the following code into "Inside <head> tag" field in the custom code section:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><style type="text/css">div#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{z-index: 2222 !important;}</style><style>#datepicker {cursor: default;}</style>

  1. Next, scroll down to the "Before </body> tag" area and copy the following code in:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$( "#datepicker" ).datepicker({dateFormat: "dd/mm/yy"});$('#datepicker').attr('readonly', true);$("#datepicker").attr('style',  'background-color:white');</script>

In the above code you can still change the date format from dd/mm/yy to something else and amend the background colour of the field to whatever looks best on your page and matches the other input fields in your form. The "readonly" attribute prevents users from being able to still type numbers into the input field.

Remember to publish your site and checking out the result on your staging or live site as custom code won't be displayed in Webflow's own preview.

Hope this has helped you a little and you can use this for one of your next (client) projects.

Got any Questions?

Fill out the form below or get in touch with me via email.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.