Looking for a way to add a date time picker calendar to your WordPress forms? With the Ninja Forms core plugin, this is an easy task. Just include a simple Date/Time field, and users will be able to choose the date, time, or both within your WordPress form. It will look like this:
In this article, we will show you how to create a WordPress form with a date picker using our free core plugin and the Date/Time field. We will also showcase examples of using this often underestimated field in your form.
Additionally, we’ll show you how to upgrade your Date/Time field with a scheduling add-on from Ninja Forms so you can turn your WordPress forms into an appointment booking system! So many exciting things are packed in this post, so without further ado, let’s dive in!
Table of contents
- How to add a Date Time Picker field to your WordPress form
- How to use a Date/Time Field in your WordPress form (Free)
- Create bookings in WordPress with Date/Time field
- Limit user submissions per date/time in WordPress
1. How to add a Date Time picker field to your WordPress form
Ninja Forms core plugin comes with a Date/Time field that includes a Datepicker. If you add this form field to your form, users will be able to select a date, from the calendar view and/or a time from a drop-down.
You can find the Date/Time field located under the Common fields. All you need is to click or drag-and-drop the Date/Time picker field into your form builder.
Once you open the settings for this Ninja Forms field, you can choose to select a different Date/Time mode or format for your datepicker field.
If you want to learn more about Date/Fields settings, you can visit our documentation page for Field Types. You can also unlock the advanced Ninja Forms features by enabling the Developer Mode. (Don’t worry, it’s free!)
2. How to use a Date/Time Field in your WordPress form (Free)
While Date Time field might not be a feature used often on your WordPress form, you would be surprised what you can do with it, even without a scheduling WordPress plugin. We’ve got a few examples tucked up our sleeve that you might not have considered!
First one, and probably the most obvious one, is using the Date Time picker field for a birthday entry. It’s the go-to move on sign-up forms, where businesses collect this data to send you automated birthday or anniversary emails, including special offers. You are probably familiar with famous 10 free boneless wings for birthday from Hooters or Denny’s complimentary birthday breakfast! Pretty cool and practical use of the old school Date Time picker, don’t you think?
Nowadays, the astrology business is booming. If you’re contemplating starting an astrology business, the Date/Time Field is a must-have tool. While your date of birth reveals your sun sign or zodiac sign, creating comprehensive astrology reports for clients requires additional details such as their moon sign and rising sign (ascendant), derived from the date and time of birth.
The Datepicker comes in handy for effortlessly gathering this information. Opt for the Date & Time under the Date/Time Mode to allow users not only to pick a date but also to select the time from the Datepicker calendar. This ensures you have all the essential elements to provide insightful astrology services to your clients.
Another example you can use Datepicker for is when your students or employees want to ask for the PTO on specific dates and you don’t need a fancy scheduling tool or HR software like BambooHR.
What you can do is add Date/Time field to your form and duplicate the field. In the first one, your employees or students can enter the start day of their leave and in the second Date/Time field they enter the end date.
If you’d like to customize the look of your form fields, you can use the Layout & Styles add-on to build row & column layout and apply additional style to your Date/Time field
✨ Quick tip: Create a job application with WordPress using our step-by-step tutorial or learn how to easily accept resumes with our contact form plugin!
You can also use Date/Time picker field if you want to allow users to request a call back from your business or if your are an MRI Scan & Imaging Center and want to ask patients when was the last time they had MRI scan if any.
The Date/Time field is anything but ordinary, as you’ve observed. To boost the potential of your Date Time Picker field, consider pairing it with our WordPress scheduling plugin: the Advanced Datepicker add-on!
3. How to create bookings in WordPress with Date/Time field
Date/Time field reaches new heights when paired with our powerful scheduling plugin. Combining them both you can easily create an appointment booking form without a a need for a complex booking system.
When you install the Advanced Datepicker add-on, the settings for your Date/Time field expand, empowering your field with advanced capabilities.
You can manually enable or disable dates, and make selections by choosing a single date, weekends only, or specific dates. You’ll also appreciate the option to specify the dates and times you are available for bookings. Enjoy the convenience of setting specific time increments to block off slots when users schedule appointments.
The “Limit Submissions by Date/Time” feature in our booking plugin is a valuable tool that efficiently prevents double-bookings. It enables you to restrict submissions based on date, time, or a combination of both. Say goodbye to scheduling conflicts and hello to hassle-free bookings with the Advanced Datepicker add-on!
To learn how to make a booking form with the Advanced Datepicker check our blog post How to Make a Booking Form for WordPress or take a look at how to restrict options for the Date/Time Field in WordPress.
4. Limit user submissions per date/time in WordPress
Looking for a way to control the availability and booking limits on your WordPress forms? The Advanced Datepicker add-on lets you restrict the number of submissions per date/time. This is very useful if you are running courses, workshops, or webinars and you have only a limited number of spots available for the event.
As the Christmas season is slowly approaching, we’ve decided to choose an example for a Christmas wreath-making workshop. Let’s say the organizer wants to run the workshop from December 2nd to December 17th, starting at 10 am and finishing at 4 pm. He has only 7 spots available in the class per each day.
With the Advanced Datepicker and submission limits feature, you can easily achieve this desired outcome. Here is how you would set this up in your Date/Time Picker field:
Let’s say you are running a consulation firm. Your consulting hours are from 9 am to 2 pm and you want users to book 30 minutes time slots througout the day. However, you want to each slot to be booked by only one person without worrying about double-bookings.
No worries! By toggling on the Limit Submissions by Date/Time and configuring the Minute Increment settings, you can ensure that each 30-minute slot is reserved by a single user.
The Advanced Datepicker proves to be an excellent tool for facilitating bookings or scheduling appointments. But you can elevate its capabilities by integrating it with other Ninja Forms add-ons.
With our payment integrations, you can accept payments for your bookings or customize prices based on different days with the Conditional Logic add-on.
✨ While the Advanced Datepicker does not integrate with Google Calendar, you can connect Ninja Forms to Google Calendar with Zapier add-on and Zapier service.
5. Charge a different price for a specific date
Pairing our scheduling plugin with the Conditional Logic add-on, you can charge your clients different price, depending on a specific day in the calendar. The following conditions are available for your Date/Time field: Before, On Or Before, Is, On Or After and After.
Let’s say you are offering workshops 6 days a week from December 11th to Decemeber 16th, but you want to charge more for the workshop held on Saturday, December 16 due to the weekend.
To set this up, you need to add an HTML field to your form that will dynamically show the total workshop cost based on the user’s selected participation day.
Remember, all the Ninja Forms add-ons work together seamlessly so if you want to accept payments for your bookings, you can easily integrate our scheduling plugin with the following payment add-ons: PayPal Checkout add-on, Stripe add-on, Elavon add-on, Recurly add-on, or Authorize.net add-on.
Congratulations on your mastery of the Date Time Picker Field!
You’ve just mastered the Date/Time field from Ninja Forms. You deserve a virtual high-five for coming all the way here! We hope you feel confident about this form field and determined to experiment.
Whether you choose to add a simple Date/Time field to your WordPress form or pair it with the Advanced Datepicker add-on, Ninja Forms has you covered with multiple resources to build powerful forms that convert.
We encourage you to explore our in-depth guides on the top WordPress form fields. They are an essential for your form-building endeavors, so make sure to check these out. You might discover something you new that is still unknown to you!
- How to Add a Radio Button in WordPress
- Add Image Choices in WordPress Forms
- How to Use a Single Checkbox Field in WordPress
- 5 Ways to Use an HTML Field in Your WordPress Form
- Dropdown Select Field in WordPress Forms (Quick Guide)
- 5 Ways to Use a Single Line Text Field in WordPress
- How to Add a Multi-Select Dropdown Field in WordPress
New to form-building business? Download Ninja Forms free core plugin and access a variety of free features. Give Ninja Forms a spin and see for yourself why it is amongs the best free WordPress form plugins on the market!
