reCaptcha ist gerendert, in die der rechten unteren cornver aus irgendeinem Grund
Meine ajax-Formular mit recaptcha, vereinfachte code:
<form>
<input type="email" placeholder="Email" required="true" />
<input type="submit" value="Create account" />
<div class="g-recaptcha" data-sitekey="12345" data-size="invisible"></div>
</form>
Aus irgendeinem Grund macht es das reCaptcha irgendwo in der rechten unteren Ecke, unter der Fußzeile. Warum ist das so und wie es zu lösen ist?
- captcha-block kann in
position:absolute
. versuchen Sie die Aktualisierung Ihrerform
zuposition:relative
mit css. -form{position:relative;}
- funktioniert nicht
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da Sie eine "unsichtbare" recaptcha, können Sie pass
data-badge
- Attribut im HTML-element recaptcha-api.data-badge
kann drei Werte - bottomright, bottomleft und inline. bottomright ist das Standardverhalten, wenn dieses Attribut ausgelassen wird, und das ist, warum es die Darstellung in der rechten unteren Ecke. Verwenden Sie die "inline" - Wert wenn Sie wollen zu zeigen das Symbol in inline-form. Ein weiterer Vorteil derdata-badge="inline"
ist, dass Sie können verwenden Sie CSS, um sein Aussehen ändern etc.So ändern Sie Ihre HTML-von recaptcha target-element zu diesem:
Alternativ, wenn Sie
grecaptcha.render()
- api zum Rendern von recaptcha, dann können Sie auch passierenbadge
Wert in Parameter zu dieser api.Können Sie dies bereits wissen, aber erwähne es für Verweis, dass eine andere option, die Sie haben, zu verwenden "sichtbar" recaptcha statt der "unsichtbaren", weil sichtbar recaptcha ist immer gerendert inline. Entfernen Sie einfach
data-size="invisible"
Attribut, das zu tun.Ausblenden Google unsichtbar reCaptcha Abzeichen Folgendes tun:
In Ihre HTML-Verwendung:
In der css-Verwendung:
Fertig 🙂