Contact Form 7 is one of my favorite free WordPress form plugins. It’s easy to install the plugin on your WP site, create a simple form, and get it working right away. CF7 also makes it easy to extend forms, as well as structure the markup and style forms any which way you’d like. Even though basic form manipulation is straight forward it’s not always as intuitive to add features like placeholder text to your CF7 form fields.
This article explains how to add placeholder text to Contact Form 7 fields in WordPress.
Adding CF7 Placeholder Text to Form Inputs
The guidelines laid out by WP’s Contact Form 7 plugin are as follows:
To add placeholder text add the placeholder parameter to an input element followed by the placeholder’s value. Example: placeholder "Your text here"
Easy peasy, right? Not so fast, young padawan. There’s a catch, but keep reading and there’s also a solution.
CF7 Placeholder Text Gotcha
As I found out for myself, there’s a gotcha moment when adding placeholder text to a CF7 input field.
You can’t add the placeholder attribute just anywhere all willy nilly like. Contact Form 7’s rendering mechanism gets all confused and fails if you put a placeholder in the wrong place. Jamming it in the middle of an input simply will not work.
For example, adding placeholder text to a CF7 form input like this will result in failure.
Adding Placeholder Text the Wrong Way
This example demonstrates attempting to create a CF7 text input named name with the placeholder text “Name”.
[text placeholder "Name" name class:input-field]
I’m just speculating now, but inserting placeholder "Name" in the middle likely makes CF7 interpret things as 2 separate arguments and it chokes. In my case, doing it this way resulted in the absence of a field on the front-end.
Adding Placeholder Text the Right Way
The right way to add placeholder text to Contact Form 7 input fields is at the end of the input. The placeholder parameter+text pair needs to come last. It’s an order of operations thing – like so many other features of WordPress. The order you do things matters.
Here’s the same example from before except the placeholder text is moved to the end.
[text client-name class:input-field placeholder "Name"]
This time CF7 creates the text input with the placeholder text as expected.
I hope that helps. Happy coding, fellow WordPress’er!
