WordPress Tutorials, Tips, and Resources to Help Grow Your Business
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
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.
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.
You can also select the fields on the preview side of the screen to customize them or to rearrange their order.
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.
- 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:
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.
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.
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.
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.