16

I am making a website for a client of me but im running into a problem. I've made a contact form in wordpress using Contact Form 7. This plugin is really easy to use but when i wanted to use the placeholder property of the plugin it did not show the placeholder when i loaded the page.

This is how i set the placeholder in Contactform 7

[text* your-name placeholder "Name"]

The placeholder tag works just fine for my textarea but it doesnt work with the textbox above. Can someone explain to me what i am doeing wrong here?

EDIT

When i inspect the element with Google Chrome and inspect the textbox it says that it has a placeholder. But it doesnt show the placeholder.

The_Monster
  • 494
  • 2
  • 7
  • 28
  • 2
    `[text* first-name placeholder "Name"]` works fine in one of my forms. What browser are you using? If you view your page source, does the HTML input have a `placeholder` attribute? Mine generates ``, for example. – Hobo Jun 19 '14 at 15:18
  • 1
    [text* text-291 placeholder "Your Hobbies"] worked perfect for me in my localhost – Gunaseelan Jun 19 '14 at 15:23
  • 1
    @Hobo i am using Google Chrome, but i also tested it in firefox – The_Monster Jun 19 '14 at 15:44
  • Ok, so it's not a compatibility thing. So does the `placeholder` attribute appear in the page source (`Ctrl-U` in Chrome) as it does for me (see above)? – Hobo Jun 19 '14 at 16:08
  • What color is the placeholder text? – Bob Weber Jul 11 '14 at 18:32
  • Same problem but none of the answers work. First time seeing something like this, I'll post an answer if I find a solution – John M. Mar 29 '20 at 23:28

7 Answers7

17

If anyone is having trouble with this, it could be that you're using class: or id: attributes.

It worked for me when I added placeholder after all those:

[email* your-email id:your-email class:form-control placeholder "ex. Jon.Smith@email.com"]
JorgePinon
  • 345
  • 2
  • 9
4

Its very simple.You can add placeholder like this:

[text* first_name placeholder"First Name"]

Documentation : https://contactform7.com/setting-placeholder-text/

Maha Dev
  • 3,915
  • 2
  • 31
  • 50
2

Same problem, then I change the input background color and the placeholder text is white on background white ...

So I sudgest to try to change the backrgound input color to test: 

input[type="text"], textarea {
  background-color : #d1d1d1; 
}
Pierre Jean
  • 366
  • 2
  • 9
1

[text* your-name placeholder "Name"] The syntax was what you gave correct once check the contact form settings. Because I am also using same as like your syntax it was working properly in my contact form.

Ram
  • 11
  • 1
0

If you are using class or id attributes.Simply do the following: 

[text* your-name class:form-control id:name placeholder "Enter Name"]
Mwiza
  • 7,780
  • 3
  • 46
  • 42
Fefar Ravi
  • 794
  • 7
  • 18
0

In case someone is still having this problem despite having everything correctly written as the other answers above, here is the solution to my problem.

Code in a theme was hiding placeholders and it's not related to Contact Form 7.

CSS Code that fixed my problem:

input::placeholder {
    color: #9c9c9c;
    opacity: 1;
}
John M.
  • 76
  • 1
  • 4
  • 11
0

you can add a placeholder like this.

[text* full-name placeholder "Full Name"]

if the placeholder doesn't show again please give style for placeholder like below:

form input::placeholder{color: #9C9898; font-size: 14px;}
SF007
  • 1