Recaptcha doesn't show off

I am currently experiencing the same issue, after the latest update, the reCaptcha no longer shows up on the form. There was another issue submitted a week ago https://www.ads-software.com/support/topic/recaptcha-doesnt-work-3?replies=6 that was marked as resolved even though the only solution listed is to not use the internal reCaptcha with CF7 and use another 3rd party plugin instead. I would like to avoid this if possible. Here is what I have found out so far:

• I have a valid reCaptcha site key and secret key that have been verified, reset, and re-saved without changing the outcome.
• I have tested this in Opera 33.0, Chrome 47.0.2526.73 m, Firefox 42.0, and Microsoft Edge 20.10240.16384.0; All of the browsers responded in exactly the same manner.
• The field IS being generated in the page markup:

  <div class="wpcf7-form-control-wrap">
  <div class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" data-sitekey="6LdklBATAAAAAF-BCQQ2DFHt9g0Q9wCsfnIdeu9b"></div>
  <noscript> <div style="width: 302px; height: 422px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LdklBATAAAAAF-BCQQ2DFHt9g0Q9wCsfnIdeu9b" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"> </iframe> </div> <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"> </textarea> </div> </div> </div> </noscript>
  </div>

  However, the image itself is never displayed, so the box can never be checked which means the form always fails validation and can’t be submitted.

The following is my markup for my form:

<p>Your Name (required)<br />
    [text* your-name] </p>
<p>Your Email (required)<br />
    [email* your-email] </p>
<p>Subject<br />
    [text your-subject] </p>
<p>Your Message<br />
    [textarea your-message] </p>
<p>[recaptcha]</p>
<p>[submit "Send"]</p>

To view the form on my development site visit: https://ckcscmi.eagleeyeweb.net/contact-us/

As I stated before, I would rather not have to resort to disabling the built-in reCaptcha in favor of using another 3rd party system if at all possible.

Any help would be greatly appreciated.

Hello chriscadcw,

Nice to see that I’m not the only one.
I’ve noticed that my recaptcha works perfectly when I’m connected as Admin and if I delete the cache of my site (rename cache folder as cache-20151209 and create a new one).

But I can’t do that every hour…

chriscadcw, is your contact form in a table ?
Is this table made with Tablepress ?

I’ve solved my issue.

I haad on my contact page a table made with TablePress with some text, a map from Google maps and the Contact form.
I removed the Contact form from the table/TablePress and organized my page with :
<table>
<tr>
<td>
[table id=4 /] <= table with some text and Google Maps
</td>
<td>
[contact-form-7 id=”747″ title=”Contact Prestarest”] <= my contact form
</td>
</tr>
</table>

And it works perfectly !
Try and tell us ??

@valarion, I checked my cache folder and there is nothing in it. Which is not unexpected, this site is still under development so I have not turned on any page caching yet.

I also double checked and it is not in any table. Here is the html code being produced for the page:

<div role="form" class="wpcf7" id="wpcf7-f30-p31-o1" lang="en-US" dir="ltr">
  <div class="screen-reader-response"></div>
  <form action="/contact-us/#wpcf7-f30-p31-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <div style="display: none;">
	  <input type="hidden" name="_wpcf7" value="30">
	  <input type="hidden" name="_wpcf7_version" value="4.3.1">
	  <input type="hidden" name="_wpcf7_locale" value="en_US">
	  <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f30-p31-o1">
	  <input type="hidden" name="_wpnonce" value="98e92babc1">
	</div>
	<p>Your Name (required)<br>
	  <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </p>
	<p>Your Email (required)<br>
	  <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </p>
	<p>Subject<br>
	  <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </p>
	<p>Your Message<br>
	  <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p>
	<div class="wpcf7-form-control-wrap"><div data-sitekey="6LdklBATAAAAAF-BCQQ2DFHt9g0Q9wCsfnIdeu9b" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"></div>
	  <noscript>
	    <div style="width: 302px; height: 422px;">
		  <div style="width: 302px; height: 422px; position: relative;">
		    <div style="width: 302px; height: 422px; position: absolute;">
			  <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LdklBATAAAAAF-BCQQ2DFHt9g0Q9wCsfnIdeu9b" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
			  </iframe>
		    </div>
		    <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
			  <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
			  </textarea>
			</div>
		  </div>
	    </div>
	  </noscript>
	</div>
	<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"></p>
	<div class="wpcf7-response-output wpcf7-display-none"></div>
  </form>
</div>

I haven’t been able to find out why the <div data-sitekey="6LdklBATAAAAAF-BCQQ2DFHt9g0Q9wCsfnIdeu9b" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"></div> container is not triggering any sort of Javascript call to get the correct markup from Google. And since the <noscript> tag is not being triggered I know that the Javascript is working.

i’m having the same problem the container is not being populated. I am not using tables.

However on some pages that contain 2 forms, one of the captcha’s is being populated but not the other.

They both have the same markup and being called by the same shortcode format (with different ID’s etc).

There are no errors either..