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!
At present, there is no way to fully style the new reCAPTCHA elements, only the wrapper elements around the iframe can be stylized.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With