How to Show Placeholder Text in Contact Form 7 Date Field

By default, HTML input[type="date"] fields do not display placeholder text in most browsers. This can make it unclear to users what format or value is expected.

In this guide, I’ll show you a simple workaround to display placeholder text in a Contact Form 7 date field using CSS.

Step 1: Add Placeholder in CF7 Field

In your Contact Form 7 form, add a date field with a placeholder:

[date your-date placeholder "Select a date"]

Step 2: Add Custom CSS

Go to Appearance → Customize → Additional CSS and add the following code:

.wpcf7 input[type="date"]:before {
    content: attr(placeholder);
}

How It Works

  • Uses the :before pseudo-element
  • Displays the placeholder text visually
  • Works as a workaround for unsupported native behavior

Important Notes

  • This is a visual workaround, not native placeholder support
  • Browser behavior may vary (especially on mobile)
  • The placeholder disappears when a date is selected

Optional Enhancement

You can style the placeholder text:

.wpcf7 input[type="date"]:before {
    content: attr(placeholder);
    color: #999;
    position: absolute;
    padding-left: 10px;
}

Conclusion

This simple trick improves form usability by giving users a clear hint about the date field. While it’s not a native solution, it’s lightweight and effective for most use cases.

Related Posts