WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

wordpress form with a datepicker

How to Add a WordPress Form With Datepicker

by Lindsay Liedke on Dec 18, 2018

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 any WordPress form.

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 WPForms plugin, go to WPForms » Add New to create a new form.

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.

advanced options for date

  • Field Size: Here you can choose how big you want this 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, and you can choose if you want it to be 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 datepicker and 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 step, 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 (widget-ready areas).

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

Start by creating a new post or page in WordPress and then click on the Add Form button.

Add Form

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

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 drop-down 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.

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 1 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 🙂

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.