Best place for your projects-Date Picker

May 30, 2020

post-thumnail

Do you need people to pick a date when they fill in a form on your website?

Perhaps you want to know a good time to call them, or maybe you want to gather information such as date of birth, etc. That’s where a date picker field can help.

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

Adding a date picker to a WordPress form

Creating a WordPress Form With a Date Picker

For this tutorial, we’ll be using the WPForms. It’s one of the best contact form plugins out there, and you can use it for all sorts of different forms.

You’ll need to install and active the WPForms plugin on your site. If you’re not sure how to do that, take a look at our step by step guide on how to install a WordPress plugin.

Once you’ve activated the plugin, go to WPForms » Add New in your WordPress dashboard.

Creating a new form using WPForms

The WPForms builder will appear. First, type in a name for your form. Then, hover your mouse cursor over a template and click the button to select it. We’re going to use the Simple Contact Form template.

Selecting the Simple Contact Form template to start building your form

WPForms will automatically create a form for you using that template. Here’s the default simple contact form.

The default contact form created by WPForms

You can now edit the form in any way you like.

Let’s add the date picker field.

In the form builder, you’ll see all the fields that you can add to your form in the right column. Scroll down to the Fancy Fields section, and you will see the Date / Time field.

The Date / Time field under the Fancy Fields section

Drag and drop the field to where you want it on your form. We’ve placed it just below the Email field on our form.

The Date/Time field added to the form

Next, click on the field to edit it. This will bring up the ‘Field Options’ tab on the left hand side of your screen.

You can change the label of the field, which defaults to ‘Date / Time’. We’re going to use ‘Preferred Time for Phone Call’ for our field.

You can also change the format of the field using the Format dropdown. For instance, you might want to use just a date and no time, such as for a date of birth field.

You can also check the Required box if you want to make this a mandatory field. This means the user will have to select a date and time before they can submit the form.

Editing the date/time field to change the options

You can add any other new fields that you want to use, too. Just click the ‘Add Fields’ tab then drag and drop the field onto your field. To edit a field, simply click on it.

Setting Advanced Options for your Date Picker

By default, the date picker on your form will be a calendar with a time dropdown next to it. The user simply clicks on a day to select that date.

The default date picker (calendar style)

The time dropdown defaults to a 12 hour clock with 30 minute intervals, like this:

The default time picker (dropdown list at 30 minute intervals)

You might want to change how the date picker works. That’s easy to do in WPForms. In the Field Options tab, scroll down to Advanced Options.

Next, click the arrow to open up that section.

Viewing and changing the Advanced Options for the Date/Time field

Here, you can make lots of changes. For instance, you might want to change the date format. The default is mm/dd/yyyy.

Selecting the date format from the Date Options dropdown

You can also switch from the date picker to a date dropdown, if you prefer. In this case, the user selects the month, day, and year from dropdown boxes, like this:

The Date Dropdown field in action in a form

You can also change the time picker. It defaults to a 12 hour clock, but you can switch this to a 24 hour clock if you prefer. You can also change the intervals to 15 minutes or 1 hour instead of 30 minutes.

Changing the time intervals for your date picker

Once you’re happy with your form, you can save it by clicking the Save button on the top right.

You may also want to set up your form so that the person completing the form gets a copy of the details they submitted.

This could be helpful, for example, if they’re scheduling a call with you. They’ll have an email record of the call time they booked.

You can do that by following the instructions in our tutorial on creating a contact form with multiple recipients.

Adding Your Form to Your Website

You can either add your form to an existing page (or post) on your site, or you can create a new one. To create a new page, go to Pages » Add New in your WordPress dashboard.

You’ll then need to add a new block to your page. Click on the (+) to add the block then select the WPForms block. You can find it in the Widgets section or you can search for it using the search bar.

Adding the WPForms block to your page or post

Next, you’ll need to select your form from the WPForms dropdown, like this:

Selecting the correct form from the WPForms dropdown

That’s all you need to do. You can now publish your page and your form will be live on your website. It should look something like this:

The finished date picker form live on the website

Note: The styling of the form will depend on the WordPress theme you’re using.

All forms created with WPForms are mobile-friendly out of the box and will work on any mobile devices. WPForms date-picker tool is also mobile-friendly and works on all screen sizes.

Mobile preview of date picker in a WordPress form

It’s always a good idea to test out your form to make sure it’s working as you expected. If you aren’t getting emails but you’re sure your notification settings are correct, our article on how to fix the WordPress not sending email issue should help.

You can make changes to your form by going to WPForms » All Forms. Then, just click on the title of your form or the Edit link beneath the title to edit it.

Editing a form you've already created in WPForms

Once you save your form, it’ll be updated on your website automatically.

We hope this article helped you learn how to create a WordPress form with a date picker. You might also want to take a look at our articles on how to block contact form spam in WordPress and how to track and reduce form abandonment in WordPress.

0 0 votes
Rate to this article
Sepehr Vaez Afshar
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

MyHBD is a registered Company in The Netherland

Fazantstraat 155A, 7523 DP, Enschede , The netherland

VAT (btw-id)#NL004552293B05

Chamber of Commerce#88189090

Cloud VPS

© 2018-2024 Copyright, All Right Reserved.

0
Would love your thoughts, please comment.x
()
x