Style a reCaptcha box within Contact Form 7

Question

I'm looking to style a Google reCaptcha (v2 - the one with the checkbox) that is generated by shortcode in the Contact Form 7 WordPress plugin.

The form with the reCaptcha shortcode looks like this:

<label> Your First Name (required)
    [text* first-name] </label>

<label> Your Last Name (required)
    [text* last-name] </label>

<label> Phone Number
    [text* phone-number] </label>

<label> Your Email (required)
    [email* your-email] </label>

[mc4wp_checkbox id:subscribe-checkbox]

<label> Your Message
    [textarea your-message] </label>

[honeypot honeypot-939]

[recaptcha id:google-recaptcha]

[submit "Submit"]

And when parsed on the website the source code for that #google-recaptcha is:

<div data-sitekey="hidden_" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha" id="google-recaptcha">
    <div style="width: 304px; height: 78px;">
        <div>
            <iframe src="https://www.google.com/recaptcha/api2/anchor?k=hidden" title="recaptcha widget" scrolling="no" name="undefined" width="304" height="78" frameborder="0">
                <html dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <head>
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <style type="text/css"> /* fonts and stuff removed */ </style>
                        <link rel="stylesheet" type="text/css" href="https://www.gstatic.com/recaptcha/api2/r20170206171236/styles__ltr.css">
                        <script type="text/javascript" src="scripts-removed"></script>
                    </head>
                    <body>
                            <div class="rc-anchor-alert"></div>
                            <input id="recaptcha-token" value="hidden-from-view" type="hidden">
                            <script>scripts removed</script>
                            <div class="rc-anchor rc-anchor-normal rc-anchor-light">
                                <div class="rc-anchor-aria-status">
                                    <section>
                                        <span id="recaptcha-accessible-status" aria-live="assertive" aria-atomic="true">Recaptcha requires verification</span>
                                    </section>
                                </div>
                            <div class="rc-anchor-error-msg-container" style="display:none">
                                <span class="rc-anchor-error-msg"></span>
                            </div>
                            <div class="rc-anchor-content">
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <div class="rc-anchor-center-item rc-anchor-checkbox-holder">
                                            <span class="recaptcha-checkbox goog-inline-block recaptcha-checkbox-unchecked rc-anchor-checkbox" role="checkbox" aria-checked="false" id="recaptcha-anchor" tabindex="0" dir="ltr" aria-labelledby="recaptcha-anchor-label">
                                                <div class="recaptcha-checkbox-border" role="presentation"></div>
                                                <div class="recaptcha-checkbox-borderAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinner" role="presentation"></div>
                                                <div class="recaptcha-checkbox-spinnerAnimation" role="presentation"></div>
                                                <div class="recaptcha-checkbox-checkmark" role="presentation"></div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="rc-inline-block">
                                    <div class="rc-anchor-center-container">
                                        <label class="rc-anchor-center-item rc-anchor-checkbox-label" aria-hidden="true" role="presentation" id="recaptcha-anchor-label">I'm not a robot</label>
                                    </div>
                                </div>
                            </div>
                            <div class="rc-anchor-normal-footer">
                                <div class="rc-anchor-logo-portrait" aria-hidden="true" role="presentation">
                                    <div class="rc-anchor-logo-img rc-anchor-logo-img-portrait"></div>
                                    <div class="rc-anchor-logo-text">reCAPTCHA</div>
                                </div>
                                <div class="rc-anchor-pt">
                                    <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a><span aria-hidden="true" role="presentation"> - </span><a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
                                </div>
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
        <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;  display: none; ">
        </textarea>
    </div>
</div>

Essentialy, I'm just trying to make the reCaptcha box full-width. So far I have got it to:

By using this css:

#google-recaptcha div {
    width: 100% !important;
}

#google-recaptcha div > iframe {
    width: 100% !important;
}

/*#google-recaptcha > div > div > iframe > html > body > div.rc-anchor, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-normal, #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
    width: 99% !important;
}*/

#google-recaptcha > div > div > iframe > html > body .rc-anchor.rc-anchor-normal.rc-anchor-light {
    width: 99% !important;
}

 #google-recaptcha > div > div > iframe > html > body > div.rc-anchor-light {
     background: #f6f6f6 !important;
     border: 0px solid #d3d3d3 !important;
     color: #003a79 !important;
 }

But as you can see, it's not processing my .rc-anchor styles. I've tried playing around with different child selectors and things like that but I just can't figure out where I'm going wrong.

When I adjust the width in FireFox inspector, it works and looks the way I want it to, but that is obviously adjusting the Google styles__ltr.css, which must be overriding my CSS regardless of what I try.

Can someone please help me?

Thanks in advance

[This](https://stackoverflow.com/a/30601698/3977935) worked for me in case anyone is still looking — Adeel Ahmad, Dec 24 '17 at 06:35

score 3 · Answer 1 · answered Sep 01 '17 at 21:09

simply place this code in contact7 form adjust your transform scale

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>
[recaptcha]
</div>

score 2 · Accepted Answer · edited May 23 '17 at 11:45

2

You can't use CSS selectors for elements inside an iframe, though you can style the iframe itself.

See Css–selector for when a html-document is inside an iframe?

edited May 23 '17 at 11:45

Community

1
1

answered Feb 10 '17 at 00:42

kalanchloe

503
4
12

Duh! Why did I not realise the iframe was the issue myself. That's where my CSS overrides stop functioning. Given that the iframe is from https://www.google.com/recaptcha/api2/ I take it that I cannot style it even with JS? Maybe I should be happy with how it is or use a different anti-spam method. – Reece Feb 10 '17 at 01:02

score 1 · Answer 3 · answered Oct 01 '17 at 21:31

1

Please check this article , as an option:

[recaptcha size:compact]

answered Oct 01 '17 at 21:31

wudza36

33
6

1

How does making the size smaller than normal address the OP's desire to make it full width? – Stephen Rauch Oct 01 '17 at 21:55

score 1 · Answer 4 · edited Apr 15 '18 at 17:42

Nothing worked for me but this code

 [recaptcha class:col-md-6]

Here is my full form code

<div id="content_container">
<p class="col-md-4"><label> Your Name (required)</label>
[text* your-name]</p>
<p class="col-md-4"><label> Your Email (required)</label>
[email* your-email]</p>
<p class="col-md-4"><label> Subject</label>
[text your-subject]</p>
<p class="col-md-12"><label> Your Message</label>
[textarea your-message]</p>
 [recaptcha class:col-md-6]
 <p class="col-md-6">[submit "Send"]</p>
</div>

score 0 · Answer 5 · answered Feb 05 '18 at 08:47

0

This code work perfect

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>[recaptcha]</div>

answered Feb 05 '18 at 08:47

Entorno Web

1

score 0 · Answer 6 · answered Jan 18 '23 at 17:59

This code is the only thing that worked for me as well, the same as what @Entorno Web commented. My comment is from January 18, 2023. This was the only code that worked.

I will say I am working on CF7 Version: 5.5.6.1

My version is a rolled-back version of Contact Form 7 because where I am integrating CF7 submissions does not work with the newest updates.

Code I Used:

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>[recaptcha]</div>

It WILL NOT WORK if you use it in this manner:

<div class=”g-recaptcha” data-sitekey=”XXXXXXXXXXXXX5oXXXXXX” style=”transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;”>
[recaptcha]
</div>

For some reason when you add <div class= on the first line and use [recaptcha] on the next line and use on the final line, it does not work... That is how I usually enter the code into Contact Form 7, but for some reason, you have to place the code as one string without making new lines.

Style a reCaptcha box within Contact Form 7

6 Answers6