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
Once you’ve installed the 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.
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.
Click the fields on the right hand side of the screen to customize them or to rearrange their order.
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.
- 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:
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.
Want to add an icon with extra info to a form field? Head over to our tutorial on how to add Tooltips in WordPress forms.
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.
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.
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.
Publish your post or page so your form will appear on your website.
Be sure to read about how to include an add to calendar option to your WordPress forms, too
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.