[Plugin: Contact Form 7] No watermark for captcha input box

Hi,
I have the same problem.
Did you get the solution ?
Thanks,

Pierre

I just set the value to be the watermark, and then added a line in my jquery script to remove/add the watermark text on click.

So this was the shortcode on the contact 7 page

[captchar captcha-990 “Please enter the characters you see above”]

Then I added a listener to this particular element in the jQuery script that I load with my page.

Ok, thanks. And what’s the correct line you added in your jquery script ?

I found this annoying too. I started messing around with the CF7 Javascript but there’s an easier way.

1. Generate your CAPTCHA fields and format them like so:

<p>[captchac captcha-XXX]<br />
[captchar captcha-XXX "Place your default text here"]</p>

2. Save your form and view your contact page’s source.
3. Locate the line we need by searching for the default text value you entered. In the example I used “Place your default text here.”
4. Copy this entire line of code from the source, which should read:
<input type="text" name="captcha-XXX" value="Place your default text here" size="40" /></span></p>
5. Now go back to editing your form and replace the CAPTCHA input field shortcode with this line. Be sure to replace ONLY the input field [captchar captcha-XXX] and NOT the image field!
6. When you replace the shortcode with tags the original paragraph tag will close, so we’ll need to insert opening paragraph and span tags “<p><span>” before the input tag to maintain our formatting.
7. In the form editor, change value= to title= and add the following attribute to the input tag:
class="wpcf7-use-title-as-watermark"
8. So our form code now reads:

<p>[captchac captcha-XXX]<br />
<p><span><input type="text" name="captcha-XXX" title="Place your default text here" size="40" class="wpcf7-use-title-as-watermark" /></span></p>

9. Save your form, reload your contact page, and enjoy your watermarked CAPTACH input box.

I spoke too soon! This only works COSMETICALLY. I can’t figure how to get the CAPTCHA to actually verify…

OK, here is an update and verified working solution:
1. Generate CAPTCHA fields in your Contact Form 7 panel:

<p>[captchac captcha-XXX]<br />
[captchar captcha-XXX]</p>

2. Add 3 items:
i. The tag to make this a watermark: watermark
ii. The class to make this a watermark: class:wpcf7-use-title-as-watermark
iii. Default text of your choice: "Enter the characters above"
3. Our new CAPTCHA field should look like:

<p>[captchac captcha-XXX]<br />
[captchar captcha-XXX watermark class:wpcf7-use-title-as-watermark "Enter the characters above"]</p>

4. Now open the file at:

/wp-content/plugins/contact-form-7/modules/captcha.php

5. Find line 103 or the line that reads:

$html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' />';

6. Change this line to read:

$html = '<input type="text" name="' . $name . '" title="' . esc_attr( $value ) . '" value="' . esc_attr( $value ) . '"' . $atts . ' />';

7. Save your form, save captcha.php, reload your site and enjoy your watermarked CAPTCHA input box that VERIFIES!

Contact Form 7 3.0 breaks this fix but if you follow the instructions above on the new file it will work.

You also need to comment out a line in:
/wp-content/plugins/contact-form-7/scripts.js

Comment out the line:
form.find(':input[name="' + i + '"]').clearFields();

Just a quick clarification: the line you need to comment out actually appears twice. However, you only need to comment out the one that follows this line:
$.each(captcha, function(i, n) {