Advanced Date Time Field For Contact Form 7, Gravity Forms, WPForms, Elementor & Fluent Forms
Stop losing bookings because your forms ask people to type dates by hand. Advanced Date Time Field adds a gorgeous, touch-friendly calendar and time picker to the form builder you already use — no rebuilds, no shortcodes to memorize, no bloat. Powered by Flatpickr, one of the fastest and lightest date picker libraries in the world, the field pops open a smooth calendar your visitors can tap through instantly on any device. Whether you need a simple date, a precise time, or both side by side in a single field, it takes about thirty seconds to set up. Works inside the form builder you already use Contact Form 7 Gravity Forms WPForms Elementor Pro Form widget Fluent Forms Only enable the integrations you need — each one is a one-click toggle on the plugin dashboard. Perfect for appointments, bookings, events and deliveries Let customers pick a date and time in one field Block past dates so nobody books yesterday Close your shop on Sundays — disable any weekday you like Start the week on the day your audience expects Show dates in the format your locale reads naturally Features Five form builder integrations — Contact Form 7, Gravity Forms, WPForms, Elementor Pro Forms and Fluent Forms, each individually toggleable Three picker modes — Date only, Time only, or Date & Time combined in one field Date formats — d-m-Y, m-d-Y and Y-m-d 12-hour or 24-hour time — match your audience’s habit Minimum date option — restrict the picker to today onward, ideal for bookings Disable any weekday — keep Sundays (or any day) off the calendar entirely Custom start of week — begin the calendar on Monday, Sunday, or whatever suits you Blazing fast & lightweight — built on Flatpickr, no heavyweight frameworks, no slowdown Mobile friendly — smooth, responsive picker that feels native on touch screens Clean, modern dashboard — manage every integration from one screen Required-field validation — works with each builder’s native required rules Plays well with your stack — submitted values flow into notifications, entries and integrations like any other field Translation ready — every string is wrapped for easy localization Field options at a glance Every Advanced Date Time field gives you: Field Type — Date / Time / Date & Time Date Format — d-m-Y, m-d-Y or Y-m-d Min Date — None or Today Disable Weekday — none, or any day of the week Start Weekday — none, or any day of the week Time Format — 12 or 24 hour
Masks Form Fields
Add a class in the form field. Example of use with Contact Form 7: [tel your-phone class:phone placeholder "Phone"] Listing of classes available for use. ('span.start, input.start').mff_mask('00/0000'); ('span.date, input.date').mff_mask('00/00/0000'); ('span.time, input.time').mff_mask('00:00:00'); ('span.time2, input.time2').mff_mask('00:00'); ('input.date_time').mff_mask('00/00/0000 00:00:00'); ('input.date_time2').mff_mask('00/00/0000 00:00'); ('input.cep').mff_mask('00000-000', { clearIfNotMatch: true }); ('input.zip').mff_mask('00000'); ('input.phone, input[name="phonebr"]').mff_mask(PhoneMaskBehavior, nonoOptions); ('input.phone_us').mff_mask('(000) 000-0000'); ('input.taxid').mff_mask('00-0000000'); ('input.ssn').mff_mask('000-00-0000'); ('input.mixed').mff_mask('AAA 000-S0S'); ('input.cpf').mff_mask('000.000.000-00', { reverse: true, clearIfNotMatch: true }); ('input.cnpj').mff_mask('00.000.000/0000-00', { reverse: true, clearIfNotMatch: true }); ('input.money').mff_mask('000.000.000.000.000,00', { reverse: true }); ('input.money2').mff_mask('#.##0,00', { reverse: true }); ('input.money3').mff_mask('#,##0.00', { reverse: true }); ('input.money4').mff_mask('000,000,000,000,000.00', { reverse: true }); ('input.money5').mff_mask('#.##0', { reverse: true }); ('input.money6').mff_mask('#,##0', { reverse: true }); ('input.ip_address').mff_mask('099.099.099.099'); ('input.percent').mff_mask('##0,00%', { reverse: true }); ('input.percent2').mff_mask('##0.00%', { reverse: true }); ('input.percent3').mff_mask('990,0%', { reverse: true }); ('input.percent4').mff_mask('990.0%', { reverse: true }); ('input.percent5').mff_mask('#,##0%', { reverse: true }); ('input.percent6').mff_mask('#.##0%', { reverse: true }); Click here for more details on how to add custom mask. Optional – Added option for the format of the Brazilian phone number, with attribute name equal to phonebr. Credits jQuery Mask Plugin
