Positioning reCAPTCHA widget with CSS
13,191
Solution 1
Just modify your existing CSS with this:
.contact-form label, #recaptcha {
display: block;
margin: 0px 0px 15px 0px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-top: 8px;
padding-right: 20px;
content:""; //Make sure you add this as well
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
height: 250px;
font-size: 18px;
display: inline-block;
}
Pseudo elements are used here so that you don't have to change your markup. :before
works as a span inside the label thus providing uniformity in your html structure and hence solving the alignment issue
Solution 2
To align reCAPTCHA
with rest of the other form-fields
you have to change your DOM
structure something like this:
HTML
:
<label for="captcha">
<span> </span>
<div id="recaptcha">
...
then also change/write the CSS
:
#recaptcha {
margin: 0px;
width: 304px;
position: relative;
float: left;
}
#recaptcha iframe {
position: absolute;
left: 0px;
top: 0px;
}
This will do the trick for you.
![Mario Parra](https://i.stack.imgur.com/ntMI9.png?s=256&g=1)
Author by
Mario Parra
Updated on June 09, 2022Comments
-
Mario Parra about 2 years
I'm trying to align the reCAPTCHA widget with my input fields, but styling .g-recaptcha doesn't seem to achieve much. Does anyone know of any selectors I can use?
Form HTML:
<div class="contact-form"> <form role="form" method="post" action="contact-form.php"> <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label> <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label> <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label> <span> </span> <div id="recaptcha"> <div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"></div> </div> <label><span> </span><input type="submit" value="" class="submit-button" /></label> </form> </div>
CSS:
.contact-form { margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); max-width: 600px; font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif; font-size: 20px; } .contact-form label { display: block; margin: 0px 0px 15px 0px; } .contact-form label > span { width: 100px; text-align: right; float: left; padding-top: 8px; padding-right: 20px; } .contact-form input, .contact-form textarea { margin-bottom: 15px; padding: 10px; border: none; } .contact-form input.input-field { width: 70%; height: 20px; font-size: 18px; } .contact-form .textarea-field { width: 70%; height: 250px; font-size: 18px; } textarea { resize: none; } textarea:focus, input:focus { outline: 0; } #recaptcha { width: 304px; margin: 0; } .g-recaptcha { text-align: left; } input.submit-button { background-image: url("../img/submit-button.jpg"); width: 225px; height: 60px; border: none; }
Any help would be really appreciated!
-
Mario Parra almost 9 yearsHad to add
<label>
around.g-recaptcha
's<span>
, which I somehow left out, and adjust the CSS slightly, but this did it. Thanks!