CODEWITHSUNDEEP
htmlwordpresscontact-form-7
The_Monster
The_Monster

Reputation: 510

Placeholder in Contactform 7 - Wordpress

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.

Upvotes: 17

Views: 84887

Answers (8)

sneha
sneha

Reputation: 1

you can add placeholder like this: [text* your-name placeholder="Enter Name"]

Upvotes: 0

SF007
SF007

Reputation: 1

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;}

Upvotes: 0

John M.
John M.

Reputation: 76

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;
}

Upvotes: 0

Fefar Ravi
Fefar Ravi

Reputation: 939

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

[text* your-name class:form-control id:name placeholder "Enter Name"]

Upvotes: 0

Ram
Ram

Reputation: 11

[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.

Upvotes: 1

JorgePinon
JorgePinon

Reputation: 355

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. [email protected]"]

Upvotes: 17

Maha Dev
Maha Dev

Reputation: 3965

Its very simple.You can add placeholder like this:

[text* first_name placeholder"First Name"]

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

Upvotes: 4

Pierre Jean
Pierre Jean

Reputation: 386

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; 
}

Upvotes: 2

Related Questions