[Plugin: Contact Form 7] Add ghost text inside box

Did you try using the watermark feature in the field creation area?

nope didn’t know that’s what that was. As image guy i thought that was a text that stayed there like in an image.

Thanks fcvolunteer

Hey,

I have little problem with ghost txt. Actually i have placeholder:

<p>[text* text-name id:text-name placeholder "Your Name"]</p>

And when i click on it’s still in area ?? What should change to have ghost message that disappears when clicked on??

———————
I have one more annoying problem. The form already looks nice, except for the “ghost message” but when I test & fill the form, in the mail that comes to me I do not have any info? Why? I tried to identify the fields in several ways but I can’t fix it ?? for the example i use:

id:text-name or [your-name]
but any working good ?? How can i fix this?

you can visit my site and see this form… but it’s in polish language. https://www.platinumexpert.pl/zamow-dokument/zaswiadczenie-z-krk/

@juni0rus I’m pretty sure that the correct shortcode is this:

[text* text-name id:text-name watermark "Your Name"]

Maybe a silly question but have you pasted the put this code into the Mail fields below into the “message Body” area?

@fcvolunteer

Super! thank you very much for your help, also pretend placeholder for watermark works fantastically …
I have a question, is it normal that after submitting the form, all the fields are clean and do not have a description of the “watermark”?

Regarding the e-mail obtained here is still a problem: (
So I threw in the news section of code you mentioned. Previously, it was [your-name] or id: text-name but it did not work, now copied [text* text-name id:text-name watermark "Your Name"] but unfortunately it does not work: (

When not edited form, the tags [your-name] to work properly: ((I do not know why.

Can I do something wrong? In fact, the poor know much about encoding / editing html / css …

Is it possible swapping of the “send” on an icon, a pretty picture to make it look nicer? This element now looks like this:
<p>[submit "send"] </p>

@juni0rus I think it’s normal not to have the watermark but I’m not sure.

For the email, if your shortcode is this

[text* text-name id:text-name watermark "Your Name"]

then in your email area you should put this

[text-name]

Look for the green bar under the text “And, put this code into the Mail fields below.” It will have the correct code for each of your fields.

Yes you can change the send button to an image or icon, using css

input.wpcf7-submit[type="submit"] {
    background: url("image_url_here") no-repeat scroll 0 0 transparent !important;
}

@fcvolunteer

Thank you again! it really works. I did not know how to give code, because the code I got from a friend, created by the plugin options, unfortunately, did not provide the capability of watermarku etc.

Thanks to you, it will work at all ?? it’s great … a moment change the send button

and whether it is possible to set individual width of the field? I set the CSS for the entire value of the same form:

. wpcf7-text {
color: # a5a6a6;
width: 260px;
height: 28px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 2px groove # dcdcdc;
}

. wpcf7-text: focus {
color: # 3e4043;
width: 260px;
height: 28px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 3px groove # 6a6a6a;
background-color: # f5f4f4;
}

There is a possibility for a single resize field? For now, everything is just like in the formula in css, but one thing I would like to extend the field. When I make a textarea that is the problem, I have more space but unfortunately the table frame is different, does not take the value of CSS, (even though I tried to add:. .Wpcf7-text, wpcf7-textarea {

Sorry to ask so many questions … I’m a little embarrassed about it.

@juni0rus

I’m not sure I completely understand your reply, but what I understood was that you were able to change the submit button and now you’d like to know how to set individual field widths and not have all fields the same width.

in the css you can add something like what I have here (I used the id of your first text field)

input#text-pesel {
    width: 100px; /*change it to whatever you want*/
}

To set the width of a textarea the css above should work, as long as you change the #text-pesel to #put_textarea_id

No worries about the questions, we all have questions and that’s the only way to learn ??

Hey ??
I want to make one field in contact form little more width than others.

in css i write

.input#text-adres{
    width: 420px;
}

But anything changes… i try .input#[text-adres]{ but don’t working.

I saw Your site, Your forms… Wow… that’s great… amazing job ?? It’s easy to set form with option? Really. respect for You.

@fcvolunteer
I was able to do it in the CSS ?? I used the substitution function

. wtcf7-submit { and .wtcf7-submit: hover {

It works great. I am very happy ?? Now I have one more question. Can you advise me how to create a form that initially requires a choice?

For example:

“Bla Bla bla..:” you must decide to choice option A or option B.

Depending on the answers will emerge to fill the selected fields. The fact that they are different for A and the other for B option.

Can you help me?

@juni0rus I can tell you how to add the show hide fields but if you want to make any of them required I can’t help you with that because I’m having that issue myself and haven’t gotten any response here on the forum so I’m no help there.

To set up the show/hide fields follow this post here
the only thing you should know is that the jquery file they include in that post is not the most recent one. the latest is 1.8.2 and you can do a quick google search to download the latest version.

hope that helps