Positioning a reCAPTCHA widget using CSS

Question

I am trying to align a reCAPTCHA widget with input fields, but the .g-recaptcha style doesn't seem to be very much. Does anyone know of any selectors I can use?

HTML form:

<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>&nbsp;</span><div id="recaptcha"><div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"></div></div> <label><span>&nbsp;</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; } 

Page URL: http: //api.marioparra.me#contact .

Any help would be really appreciated!

Answer 1

Just modify the existing CSS as follows:

 .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 you do not need to change the markup. :before works as a layer inside the label, thereby ensuring uniformity in your html structure and, therefore, solving the alignment problem

Answer 2

To align reCAPTCHA with the rest of the other form-fields , you need to modify the DOM structure like this:

HTML :

 <label for="captcha"> <span>&nbsp;</span> <div id="recaptcha"> ... 

then also change / write CSS :

 #recaptcha { margin: 0px; width: 304px; position: relative; float: left; } #recaptcha iframe { position: absolute; left: 0px; top: 0px; } 

This will help you.