wordpress form with a datepicker

How to Add a WordPress Form With Datepicker

Do you need a way to add a WordPress form with a datepicker? We’ve made it easy for you to allow users to select a date and time in your forms.

In this article, we’ll show you how to add a datepicker form field to a form in WordPress.

Step 1: Create A WordPress Form

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

Once you’ve installed the WPForms plugin, go to WPForms » Add New to create a new form.

WPForms is the best WordPress Form Builder plugin. Get it for free!

On the setup screen, name your form and select the form template you want to use. The great thing is, WPForms comes with over 100 pre-designed templates.

In our example, we’ll use the Simple Contact Form template.

Simple Contact Form Template

WPForms will create a simple contact form for you.

Step 2: Customize Your Form

You can add additional fields by dragging them from the left hand panel to the right hand panel. Then, click on the field to make any changes.

You can also click on a form field and drag it to rearrange the order on your form.

adding a date and time field to your form

Click the fields on the right hand side of the screen to customize them or to rearrange their order.

click to edit field

Since we’re showing you how to add a datepicker to your WordPress form, we’ll drag a Date / Time form field from the left hand side to the right and then click on it to make changes.

When you click on the Date / Time form field, you’ll see the following options:

  • Label: This is the title of the field that site visitors will see on your form.
  • Format: You can ask your customer to choose the date, time, or both.
  • Description: Add a description for the field. This is a good spot for adding instructions or details for your users.
  • Required: When this box is checked, users can’t submit the form unless they fill out this field.

If you scroll down and click on Advanced Options, you can customize the Date / Time field even more.

customizing-advanced-date-field-wpforms

  • Field Size: Here you can choose how big you want the field to be.
  • Date: In the placeholder box, you can add default text to be displayed in the field. You can also choose what format you’d like the users to type the date in.
  • Type: Here you can choose whether you want the field to be a datepicker with a calendar, or have dropdown fields for the month, day, and year.
  • Time: You can add default placeholder text for the time field. You can choose 12 hour or 24 hour timing and how long you want the intervals to be.
  • Hide Label & Hide Sub-Labels: This option shows or hides the label and sub-labels for the field.
  • CSS Classes: This field allows you to style specific fields without affecting other fields. You can change the colors, spacing, and more with CSS.

Here’s what the Date Picker and Date Dropdown types look like:

Datepicker vs dropdown date and time fields

If you want to style the look and layout of your form to match your theme, check out how to add custom CSS to your WPForms.

Once you’re done customizing your settings and picking Date Dropdown, click Save.

Step 3: Configure Your Form’s Settings

Before you add your form to your WordPress website, you should configure its settings.

There are many settings to configure on a WordPress form:

  • General Settings: Here you can change things like your form’s name, description, and submit button copy. You can also enable additional spam prevention features to keep your website secure from unwanted form submissions.
  • Form Confirmations: Form confirmations are messages that display to site visitors once they submit a form on your website. WPForms has three confirmation types to choose from: Message, Show Page, and Redirect. You can choose one or a combination.
  • Form Notifications: Notifications are a great way to send an email whenever a form is submitted on your website. A notification will automatically send to your once a form is submitted on your site. You can also send one to the site visitor that submitted the form and anyone else that needs to be notified of a form submission.

Click Save.

In addition, you can use the Zapier Addon to integrate your WordPress form with your Google Calendar. This way, anytime someone submits a form on your website that has a date and time, this information automatically adds to your Google Calendar.

For help with this, be sure to check out our step by step tutorial on how to send form entries to your Google Calendar.

Not sure Zapier is worth it? Check out this exciting article about how WPForms is one of Zapier’s fastest growing apps.

Step 4: Add Your Form to Your Site

WPForms allows you to add your forms in various locations from your blog posts, pages, and your sidebar.

First, let’s take a look at the most common option: embedding your form in a post or page.

To begin, create a new page or post in WordPress. Then, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.

wordpress form with a datepicker add to page

The handy WPForms widget will appear inside of your block. Click on the WPForms dropdown that appears and pick which one of the forms you’ve already created that you want to insert into your page. Select the Simple Contact Form.

insert datepicker to wordpress

Publish your post or page so your form will appear on your website.

publish wpforms datepicker worpdress

The other place you can add a form to your site is in the sidebar widget area.

Go to Appearance » Widgets and add a WPForms widget to your sidebar. After that, select the Simple Contact Form from the dropdown menu and save your changes to the widgets area.

And there you have it! You now know how to add a WordPress form with a datepicker to your website.

Do you want to know how to boost form conversions on your website? Check out this roundup of simple ways to design your forms so people will submit them.

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 2 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. I love WPFORMS but I have a problem with the date part of it.
    How can I get the date year to be older than just a a few year prior of the current year?
    For example I added a field so a user can enter his or her birthday but the date field won’t let you enter a year older than just something like 5 years prior to the current year.
    Is this a bug or am I missing something?

    1. Hi Joe,

      What you describe is definitely not expected behavior (as an example, here’s a screenshot showing July 1977 in the datepicker). I’m sorry you’ve encountered this issue!

      We’ll need to collect some extra details to get a better idea of what might be causing this on your site. When you get a chance, could you please contact us in support?

      Thanks 🙂

  3. Is there an option to auto delete the old weeks after the date has passed?! So it’s the current week and future date at all times.

  4. Hi,
    I have to use date picker to obtain form my clients their date of birth. How to block possibility to use future time (condition 0)?
    Thank you in advance

    1. Hi Igor,

      We don’t have any built in ability to block off dates, but you can do this with custom code. We have a couple great examples in our developer docs. If you check out that code, you’ll see that it currently says minDate, which blocks off all past dates. To block future dates instead, you’d just need to change this to maxDate.

      In case it helps, we also have a tutorial on how to add custom code to your site.

      If you have other questions about this, could you please get in touch with our support? Thanks! 🙂

  5. Hi, How do I get the Date to go beyond the current year? Currently users are unable to select a year beyond 2017, for example 2018. I’m an admin for a client’s site.

    1. Hi Ray,

      It sounds like your client may be using the Dropdown format for the Date field, which will provide only current and past years to keep the options more compact. The easiest way to open this up is by switching to the Datepicker (calendar) format. In case it helps, I recorded a short screencast here where you can see the difference between the two date formats.

      I hope this helps! If you have any questions, please get in touch and our support team will be happy to assist 🙂

  6. Hi, is there a custom code that allows you to disable Saturday and Sunday from the calendar? I used the custom code you linked to in your response to Mario, but I can’t seem to figure out how to get the PHP to disable more than one weekday.

    Thanks,

    David

    1. Hi Lee,

      We don’t currently have any integration available for WhatsApp, but I’ve added that to our feature request list for consideration. Thanks! 🙂

    1. Hi Hamadi,

      There isn’t currently a way to change this text, but this is on our list to tackle soon — specifically to allow for translations like you’ve described.

      Thanks for the suggestion! 🙂

  7. Is it possible to only show certain fields if a user is of a certain age? i.e. they select their date of birth from the datepicker and from that, determine if they are over/under 18 and show corresponding fields

    1. Hi Sam,

      We don’t currently have a way to use a Date field for conditional logic, however depending on your goals you might consider one of these alternatives:

      1) Instead of (or in addition to) using a Date field, consider adding a yes/no Dropdown field to ask if the user if over 18. That way, you could set up conditional logic based on the answer in this field.

      2) Adding an age verification plugin to accomplish something similar (here’s a specific recommendation from WPBeginner). This would let you check that the user is above a specific age before allowing them to view the form page.

      Hopefully one of these options helps! And if you have any additional questions, please get in touch 🙂

  8. Hi there
    i have this working great but i was wanting to know if it works the other way, so once date has been picked and sent to my google calendar, can we have the date picker block out that future time and date?

    i have the form set up for a small business that takes bookings and if i could have this work without me having to ring or email to say sorry that time is taken ??

    you would save me so much time if this is doable cheers

    1. Hi David,

      We currently don’t have the ability to automatically block the dates out in the date picker if they’ve been selected by another user but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

  9. Hello,

    Is there a way for me to set a conditional logic based on the date a user selects? I want to achieve this because I am setting up a seminar registration and only certain tickets are available till a certain date.

    Can this be accomplished?

    1. Hi Steve,

      We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

  10. The Date Picker feature is not working for some reason. Sometimes, it will only work when the page is refreshed. And sometimes, it just does not work.

  11. Hi
    i need to add some phrase before the time picker.
    for example :
    free salad at 1 pm
    free juice at 1.30 pm
    free wine at 2 pm
    how can i do it ?

    1. Hi Yazeed,

      We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

  12. Hi gentlemen
    you have great form plugin.
    i hope you make it better and fit for reservation by add these features to date and time sitting:
    1) Early Booking: How early customers can make their booking.
    2) Late Booking: How late customers can make their booking.

    1. Hi Yazeed,

      We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

  13. I just created a job application form. Is it possible to add present for the end date of the employment section?

    1. Hi Merve,

      We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.