How to Create a WordPress Form with a Date Picker

Do you want to add a date picker to your contact form? A date picker is required when you want your users to select a date and time in the form.

In this article, we’ll share how to create a WordPress form with a date picker.

When and Why You Should Add a Date Picker in WordPress Forms?

Many contact forms have simple fields like name, email, phone, and message. This information is enough to get connected with your users. However, if you want to schedule an appointment with your users, then you’ll need to add a date picker on your form.

If you’re running an eCommerce store and you want clients to add their availability date for delivery, then you can add a date and time field on the contact or order form.

There are many other reasons why you’d need to ask your users to submit date and time with their basic information. Let’s take a look on how to easily create a WordPress form with a date picker.

Creating a WordPress Form with a Date Picker

The first thing you’ll need to do is to install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll need to go to the WPForms » Add New page to create a form in WordPress. It’ll launch the WPForms setup screen where you’ll find multiple pre-built templates to easily create a new form of your choice. You can also select a blank form to start from scratch.

To get started, we’re picking the Simple Contact Form template.

A simple contact form will load with the basic fields name, email, comment, etc. You can see more fields on the left-hand side and a preview of your new form on the right side of screen. Simply drag and drop any field from left side to your new form on the right side.

Since you want to add a date picker, you’ll need to drag and drop the Date / Time field from left column onto your form. You can place the date picker above or below any field on the WordPress form.

The form is fully flexible which means you can easily rearrange order of the fields or customize any field from the preview section of your form on right side.

Once you click on any field in the form preview, it’ll display the settings on the left side for that specific field. For example, if you click on the Date / Time field that you just added to your form, then you’ll see these settings to customize:

• Label: It is the title of the Date / Time field in your form.
• Format: In this dropdown, you can select a format for date, time, or both.
• Description: It allows you to add instructions for users below the field.
• Required: If you check this option, then a user can’t submit the form without selecting a date / time in this field.

Other than these basic settings, there’re advanced options to customize the design and style of the date / time field.

Few of the advanced options include:

• Field Size: There’re different display sizes available for the date / time field.
• Date: It’s a placeholder. The text that you’ll add here will be displayed by default to the users. Next to it, you can also select the format for the date.
• Type: You can select a type for the date picker. There are 2 types: Date Picker and Date Dropdown
• Time: This is another placeholder for time. You can also need to choose a format from 12 hour or 24 hour.

There are many other custom settings like interval, hide labels, and more.

You should also check out this guide on how to add custom CSS to your form for more detailed instructions.

Make sure to click on the Save button to store your changes.

Confirmation and Notifications Settings

Once you are satisfied with the fields, you’ll need to manage the confirmation settings and email notifications for your form. Simply visit the Settings » Confirmation page in the WPForms builder. From there, you can add a custom message for your users that they’ll receive after submitting the form. You can also change the confirmation type to redirect users to a thank you page.

After that, you can go to the Settings » Notifications page to manage email notifications for form submissions. You can also send multiple notifications on different email addresses. Check out this guide on how to create multiple notifications in WPForms.

For advanced settings, you can add conditional logic in your form to send specific notifications to users. Learn how to create conditional form notifications in WordPress forms.

Last, you’ll need to click on the Save button to see your contact form in action.

Display the Form on Your WordPress Site

You can easily add the contact form in your WordPress pages, posts, sidebars, and other widget areas.

To add the form on a page, you’ll need to go to Pages » Add New in WordPress. Simply click on the Add Form button above the text editor.

A popup will appear where you can select the form you made. After choosing the correct form, click on the Add Form button. This process is same for the WordPress posts. Publish the page / post to see the contact form with date picker on your WordPress site.

However, if you want to add the form to your sidebar or any other widgetized area, then go to Appearance » Widgets to drag and drop the WPForms widget into the sidebar. In the widget’s settings, you can select the form that you created above and click on the Save button.

That’s all. We hope this article helped you learn how to create a WordPress form with a date picker. You may also want to see our guide on how to create a file upload form in WordPress.