Combining Date and Time Fields for Complete Scheduling Forms

Why Combine Separate Date and Time Fields?

Scheduling forms need control over both the calendar day and the clock time. Using two focused fields instead of one generic text input gives you:

• Structured data — date and time are stored as separate, validated values instead of free-text like “next Tuesday around 2ish”
• Independent restrictions — block weekends on the date field while limiting times to 9:00 AM–5:00 PM on the time field
• Better user experience — native date picker plus a custom time dropdown are faster and clearer than typing manually
• Flexible layout — place date and time side by side on desktop using half-width fields
• Conditional follow-ups — show extra fields based on the date or time the visitor selects

Auto Form Builder does not use a single combined “datetime” field. You add one Date field and one Time field, configure each independently, and both values appear together in your submissions inbox and email notifications.

Date Field Features for Scheduling

The Date field uses an HTML5 date input with a formatted overlay and optional preview chip. Configure it under Date Field Options:

Date Display Format

Choose how dates appear to visitors:

• Year first: 2024-03-25
• US style: 03/25/2024 (Month/Day/Year)
• UK style: 25/03/2024 (Day/Month/Year)
• European with dashes: 25-03-2024

The configured format is respected in the dashboard, admin emails, and user confirmation emails.

Date Range Restrictions

• First Allowed Date — set a minimum selectable date
• Last Allowed Date — set a maximum selectable date
• Block Past Dates — prevent selecting any date before today
• Block Future Dates — prevent selecting any date after today (useful for birth dates or historical entries)
• No Weekend Selection — block Saturdays and Sundays; if a default date falls on a weekend, it automatically shifts to the next Monday

Default Date Selection

Pre-select a starting date when the form loads: None (blank), Today’s date, Tomorrow’s date, or a Specific date you choose.

Date Preview Chip

Optionally show a human-readable preview (e.g., Apr 16, 2026) next to the date input. Disable the preview chip if you prefer a minimal layout.

Time Field Features for Scheduling

The Time field uses a custom dropdown time picker — not the native browser time input — for consistent styling and precise control. Configure it under Time Field Options:

Time Format

• 24-hour clock — e.g., 14:30
• 12-hour clock with AM/PM — e.g., 2:30 PM

Time Intervals

Control appointment slot spacing:

• Every minute
• Every 5 minutes
• Every 10 minutes
• Every 15 minutes
• Every 30 minutes
• Every hour

Only times matching your interval appear in the dropdown — ideal for booking slots at fixed increments.

Business Hours Restrictions

• Earliest Time Allowed — e.g., 09:00 for a 9 AM opening
• Latest Time Allowed — e.g., 17:00 for a 5 PM closing

The time picker generates options only within this range.

Default Time Selection

Pre-select a starting time: None (blank), Current time (when the form loads), or a Specific time you choose.

Clear Button

Visitors can clear a selected time and start over using the built-in clear control on the time picker.

How to Build a Scheduling Form Step by Step

Step 1: Open the Form Builder

Go to Auto Form Builder → All Forms and create a new form or open an existing one. You can start from the Event Registration template and add date/time fields to it.

Step 2: Add Contact Fields

Include the basics: Name, Email, and Phone fields so you can follow up on the booking.

Step 3: Add a Date Field

Drag a Date field onto the canvas. Label it clearly — Preferred Date, Appointment Date, or Event Date. Under Date Field Options:

• Enable Block Past Dates so visitors cannot book in the past
• Enable No Weekend Selection if you only accept weekday appointments
• Set First Allowed Date and Last Allowed Date if bookings are limited to a specific window
• Choose the date format your audience expects

Step 4: Add a Time Field

Drag a Time field below or beside the date field. Label it Preferred Time or Appointment Time. Under Time Field Options:

• Set Earliest Time Allowed and Latest Time Allowed to your business hours
• Choose a Time Interval — 15 or 30 minutes works well for most appointment forms
• Pick 12-hour or 24-hour format based on your audience

Step 5: Place Date and Time Side by Side

Select each field and set Field Width to Half Width so date and time appear on the same row on wider screens. On mobile, they stack automatically.

Step 6: Mark Both Fields as Required

Enable Required Field on both the date and time fields so submissions always include a complete scheduling selection.

Step 7: Add Context Fields and Save

Add a textarea for special requests or notes. Save the form, preview on desktop and mobile, submit a test booking, and verify both date and time appear correctly in your submissions inbox.

Validation: Keeping Scheduling Data Clean

Auto Form Builder validates date and time fields on both the frontend and the server.

Date Validation

Server-side checks enforce:

• Valid date format
• Block Past Dates and Block Future Dates rules
• First Allowed Date and Last Allowed Date range limits
• No Weekend Selection — rejects Saturday and Sunday submissions

On the frontend, the date picker also adjusts weekend selections to the next Monday when No Weekend Selection is enabled.

Time Validation

The custom time picker only lists times within your configured interval and min/max range, so visitors cannot pick invalid slots from the dropdown. The server validates that submitted time values are in a valid time format.

Required Field Enforcement

Both fields support standard required validation. Empty date or time fields block submission with an inline error message.

Scheduling Form Examples

Consultation Booking

• Date: Block Past Dates, No Weekend Selection, US date format
• Time: 09:00–17:00, 30-minute intervals, 12-hour format
• Extra: Textarea for “What would you like to discuss?”

Event Registration

• Date: First Allowed Date = event start, Last Allowed Date = event end
• Time: 08:00–20:00, 15-minute intervals
• Start from: Event Registration template (add date/time fields to it)

Service Appointment

• Date: Block Past Dates, default = Tomorrow
• Time: 10:00–16:00, hourly intervals
• Layout: Both fields at Half Width

Delivery Scheduling

• Date: Block Past Dates, max 14 days ahead via Last Allowed Date
• Time: 08:00–18:00, 2-hour intervals
• Conditional logic: Show address fields when a date is selected

Combine with Conditional Logic and Notifications

Use free conditional logic to adapt the form based on scheduling choices:

• Show a Video Call Link field when the appointment time falls before noon
• Display an On-Site Address field when a specific service type is selected alongside a date
• Reveal a Rush Fee Notice HTML block when the selected date is within 48 hours

Both date and time fields dispatch change events, so conditional rules re-evaluate as soon as the visitor makes a selection.

In email notifications, date values appear in your configured format. Use field placeholders in custom email templates (e.g., {preferred_date}, {preferred_time}) to include scheduling details in admin and confirmation emails.

How Date and Time Appear in Submissions

Date and time are stored as separate submission values with their own field labels. In the submissions inbox:

• Date fields display in a readable format (e.g., March 25, 2026)
• Time fields display in the format configured for the field (12-hour or 24-hour)

You can search and filter submissions by date using the submissions page date filter. Export entries via Settings → Import/Export to back up scheduling data in CSV or JSON format.

Scheduling Forms on Embedded Sites

Forms embedded on non-WordPress sites — including Elementor, WP Bakery, Brizy pages, or any external website — use the same date picker, custom time dropdown, validation rules, and layout options. Your date restrictions, business hours, and time intervals apply wherever the form is placed.

Download Auto Form Builder — Free Date and Time Fields

Date and time fields with scheduling restrictions, custom intervals, validation, and conditional logic are included in the free plugin — the same plugin that gives you submission management, form styling, spam protection, and import/export at no cost.

Install it from the official WordPress.org directory: https://wordpress.org/plugins/auto-form-builder/

Last updated: Last update 11 August

Frequently Asked Questions