Skip to content

Recaptcha

Jump to bottom
chyvak1831 edited this page Feb 13, 2021 · 12 revisions

Overall

Starter uses recaptcha v2.
Google recaptcha keys are required and available to setup in Customizer->WooCommerce->Recaptcha.

Show screenshot Recaptcha

Please notice: recaptcha loads lazyload when user starts to interact with form (for avoid influence on pagespeed).


How to add recaptcha

Frontend of recaptcha is universal for all forms, just add these 3 lines of markup to each of your form where you need recaptcha:

<input type="hidden" class="js_recaptcha_input">
<div class="g-recaptcha" data-callback="recaptchaCallback" data-recaptchapublickey="<?php echo esc_attr( get_theme_mod( 'public_recaptcha_key' ) ); ?>"></div>
<div class="invalid-feedback"><?php esc_html_e( 'This field is required.', 'starter' ); ?></div>

Also you can to add markup via wordpress actions (like it done for login/register/lostpassword in Starter).
Backend validation of recaptcha is different for each form, below listed files of backend validation (logic files) for comment, login/register/lostpassword pages in Starter.


Code

  • logic: inc\recaptcha.php - recaptcha function, customizer, login/register/lostpassword markup and backend validation
  • js: assets\js\modules\recaptcha.js - load recaptcha on click, render, front validation

Comment

  • logic: inc\woocommerce\comment\comment-backend.php - backend validation of recaptcha
  • tpl: woocommerce-custom\comment\comment-form.php - recaptcha markup
  • js: assets\js\modules\comment.js - add class is-invalid when recaptcha invalid (when came from backend) and reset recaptcha
Clone this wiki locally