The contact form 7 placeholder attribute is giving a hint for the input field. We can add a placeholder in the input field shortcode
[text* your-name placeholder "Enter Name"]
We can add a placeholder option for text, email, url, tel, textarea, number, range, date, and captcha.
As a result, the placeholder tag option generates an HTML placeholder attribute.
Generated Input field HTML
|
1 |
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" placeholder="Enter Name" value="" type="text" name="your-name"> |
Now, We can see the placeholder attribute is “Enter Name”.
YouTube – Watch Now
Contact Form 7 Addons
- Save CF7 entries to separate MySQL columns
- Prevent CF7 duplicate submissions
- Drag and drop file input field
How to Add a Placeholder for contact form 7 for Dropdown or Select?
We can set the first option as a placeholder. The option is first_as_label. It will consider the first value as a null-valued label.
Example :
Shortcode:
|
1 |
[select* country first_as_label "Select Country" "USA" "UK" "India" "UAE"] |
Here, the select country is placeholder text.
How to Change CF 7 Placeholder Text Color?
We can change the placeholder color by adding CSS. Add the following code in our selected theme style.css file. Then remove the browser cache and navigate the form URL.
CSS Code:
|
1 2 3 |
.wpcf7 input::placeholder { color: red; } |
Example:
How to Hide Placeholder Text Upon CF7 Input Focus?
We want add css for input focus. Add following css in selected theme style.css last part. Theme style.css located in wp-content > themes > select theme > style.css file. Then remove browser cache or test from differrent browser.
|
1 2 3 |
.wpcf7 input:focus::placeholder { color: rgba(0,0,0,0) } |