WPForms Blog

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

How to Add a WordPress Form With Datepicker

Last updated on Aug 25, 2017 by Sameen Imtiaz

Do you need a way to add a WordPress form with datepicker? We’ve made it easy for you to allow users to select a date and time in your forms. In this tutorial, we’ll show you how to add a datepicker field to any WordPress form.

Creating Your WordPress Form

The first thing you 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 have installed WPForms plugin, go to WPForms » Add New to create a new form. Then on the setup screen, you either need to start with a blank form or pick one of the pre-made templates.

For this tutorial, we’ll be using the Simple Contact Form.

Creating a simple contact form with WPForms

Now WPForms will create a simple contact form for you.

To add fields to the form, you can simply drag them from the left column to the form. Go ahead and drag the Date/Time field on to your form by dragging it over.

adding a date and time field to your form

You can also select the fields on the preview side of the screen to customize them or to rearrange their order.

Click on the datepicker field to select your options

When you click on the field, here are the available options that appear:

  • Label: This is the title of the field.
  • Format: You can ask your customer for the date, time, or both.
  • Description:  This allows you to add a description for the field. It’s a good spot for adding instructions or details for your users.
  • Required: When this box is checked, users can’t submit the form if they don’t fill out this field.

If you click on Advanced Options, you can customize the field even more.

WPForms date time field has a lot of advanced options, too

  • Field Size: Here you can choose how big you want this particular 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 choosing your options, make sure to save the changes and click submit on the bottom.

Confirmation Message and Email Notifications

In the Settings » Confirmation menu, you can customize the message that users will receive after submitting their contact form. You can also choose to redirect them to a thank you page instead.

changing the form confirmation message

In the Settings » Notifications menu, you can choose to send email notifications. By default, you’ll receive an email with the details of any form submission.

With the notification settings, you can send out multiple email notifications. For more details on how to do that, check out How to Create Multiple Notifications in WordPress Forms.

Also, you can change who receives the notification depending on what the user selected in a specific field. With our smart conditional logic, you can configure this feature easily. Check out How to Create Conditional Form Notifications in WPForms to learn more on how to configure email notification conditional logic for your form.

Once you’re done configuring the contact form settings, click Save on the top right to store your changes.

Adding a Contact 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 there.

adding your form with datepicker to a WordPress post or page

The other way you can add an order form to your site is in the sidebar widget area. Go to Appearance » Widgets and add a WPForms widget to to your sidebar. After that, select the Simple Contact Form from the drop-down menu and save your changes to the widgets area.

After that simply publish your page and view it.

site-form

That’s it! You’ve just added a WordPress form with datepicker.

Want to send your form entries to your calendar automatically? Check out our tutorial on how to create a client booking form in WordPress.

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

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

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

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.