Many contact forms have basic fields like name, email, phone, comments, or message. This information is quite enough to get connected with your users.
But, if you want to schedule an appointment with your users, then you will need an add a date picker on your form.
What is a date picker and why do you require it?
A date picker is a graphical user interface widget that allows the user to select a date from a calendar and/or from a time range. It is required when you want your users to select a date and time in the form.
For instance, if you are running an eCommerce store and want your clients to add their availability date for delivery, then you can add a date and time field on the contact form.
In this tutorial, we will share a step-by-step guide on how to easily create a WordPress form field with a date picker.
Creating WordPress Form with a date picker
Here, we will be using WPForms as it the best contact form plugin. To start with, you have to install and activate the WPForms plugin.
Once activated, go to the WPForms and then click on Add New page in WordPress dashboard to create a form in WordPress.
It will launch the WPForms setup screen where you will multiple pre-built templates to easily create a form of your choice.
To get started, we will be using the Simple Contact Form template.
The simple contact form will load fields like name, email, comment, etc. You will also see the option Fields on the left-hand side and a preview of your new contact form on the right-hand side.
You can just drag and drop any field from the list to your new form. To add a date picker, you have to drag and drop the Date/Time field.
The form is completely flexible that you can edit the form the way you like. You can rearrange the order of the fields or customize any field.
Once you click on any field in the form preview, it will display the standard field settings for that specific field. For the Date/Time field you will see the below field settings:
- Label – the title of Date/Time field in your form
- Format – select the format for date or time or both
- Description – allows you to add instructions for the users
- Required – If this is checked, you can’t submit the form without selecting the date/time as it becomes a mandatory field
Other than these basic settings, there are advanced options to customize the design and style of the Date/Time field. These include:
- Field size – Different display sizes available for the Date/Time field
- Date – A placeholder for the date. The date added here will be displayed as default to the users
- Type – Select a type for the date picker from 2 types: Date Picker and Date Dropdown
- Time Format – A placeholder for time. You need to choose the time picker from 12-hour clock or 24-hour clock.
There are other custom settings like the interval, hide labels, etc. Make sure to click on the Save button to save your changes.
Confirmation and Form Notification Settings
Now, you have to manage the confirmation settings and email notifications for your form.
Go to Settings, then click on Confirmation in WPForms builder. Here, you can add a custom message to your users that they will receive after submitting the form.
Then, you can go to Settings, click on Notifications to manage email notifications for form submissions.
Notifications are the best way to automatically email yourself, employees, and the people who filled out your form.
For advanced settings, you can add conditional logic in your form to send specific notifications to users.
Display the form on your WordPress website
You can either add your form to an existing page of your site or create a new one. To add a new form on a page, go to Pages and then click on Add New. Then click on Add Form button above the text editor.
A popup will appear where you have to select the form. Then click on Add Form button. You need to publish the page to see the contact form with the date picker on your WordPress site.
If you wish to add the form to a sidebar or any widgetized area, then click on Appearance » Widgets to drag and drop the WPForms widget into the sidebar.
Forms created with WPForms and date-picker tools are mobile-friendly and will work on all mobile devices and screen sizes.
You can also make changes to your forms by going to WPForms and clicking on All Forms. Then click on the Edit option beneath the title to edit it.
Once you save the form, it will be updated on your website automatically.
As the world’s best form builder, WPForms comes with many features and basic functionalities that can help you manage and organize your business online effectively.
With so many other plugins at hand, you might feel overwhelmed. But if you know
the need for a date picker, it will be quite easy to find out the best one for your specific project.
In this article, we have described the best way to create a WordPress form with a date picker. It will help to connect with the users and grow your business online in a short time thereby providing website performance optimization.
We would also suggest here choosing the free WP Datepicker plugin as a good starting point for good form creation. The best feature is that the date picker field is inserted right into your form. When users click on it, a calendar pops up and they can select a day/month/year altogether.