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.
<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>
<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.
Wait, before you go - if you're a freelance Designer or running your own little agency, you might be looking for a great tool to send proposals, invoices and more. I use Hello Bonsai for this and you can take a look at their website and give it a spin yourself (affiliate link). If you want to read more about it first, I have written a helpful article about it here: "How I use invoicing and proposal tool Hello Bonsai as a Webflow Designer".
Fill out the form below and I'll be in touch with you usually within 48 hours. You can also say hi via email.
