noscript version not displaying the textarea to post verification code into

Message has been deleted

George Young

unread,

Jun 17, 2015, 5:58:56 AM6/17/15

to reca...@googlegroups.com

I have added the noscript html from the Google instructions to my login page:

<div class="g-recaptcha" data-sitekey="your_site_key"></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=your_site_key"
                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>

This produces a 2 word captcha as expected but on successful verification I get an iframe saying ''Copy this code and paste it in the empty box below" and a field with the code in it (see screenshot). However, the textarea to paste the code in is hidden by the iframe. Surely this should be a part of the frame so it sits just below the text? Has anyone got this working and can tell me how it should look on screen? Thanks.

Paul Martin

unread,

Jun 18, 2015, 11:17:26 AM6/18/15

to reca...@googlegroups.com

It seems that the iframe content has recently been resized. To get the 'empty box below' to show I increased the outer div height and used absolute positioning on the text area div:

<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<noscript>


    <div style="width: 302px; height: 575px;">
        <div style="width: 302px; height: 573px; position: relative;">
            <div style="width: 302px; height: 425px; position: absolute;">


                <iframe src="https://www.google.com/recaptcha/api/fallback?k=your_site_key"
                        frameborder="0" scrolling="no"


                        style="width: 302px; height:425px; border-style: none;"></iframe>
            </div>
            <div style="width: 302px; height: 150px; position: absolute; border-style: none;
                                        bottom: 0; left: 0; 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: 100px; border: 1px solid #c1c1c1; 
                                 position: relative; left:25px; top:25px;

Jacob Alvarez

unread,

Mar 16, 2016, 10:44:03 AM3/16/16

to reCAPTCHA

Thanks for the solution Paul.

reCAPTCHA Support

unread,

Mar 17, 2016, 5:23:34 PM3/17/16

to reCAPTCHA

Hello Paul,

Thank you for your report. Please visit our updated documentation and refer to the code there if you have further issues.

Regards,

--
You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
To unsubscribe from this group and stop receiving emails from it, send an email to recaptcha+...@googlegroups.com.
To post to this group, send email to reca...@googlegroups.com.
Visit this group at https://groups.google.com/group/recaptcha.

For more options, visit https://groups.google.com/d/optout.