Валидация contact form7

cf7_valid

html
[hidden human class:human]
<div class="robot"><div class="robot__check"><svg viewBox="0 0 60 60"><line class="st0 line1" x1="4.5" y1="30.5" x2="29.5" y2="52.5"></line><line class="st0 line2" x1="56.5" y1="4.5" x2="29.5" y2="52.5"></line></svg></div><span>Согласен с условиями Политики конфиденциальности</span></div>

-------------------------

function.php
function filter_wpcf7_form_action_url( $url ) { 
    return '/thankyou.php'; 
};   
add_filter( 'wpcf7_form_action_url', 'filter_wpcf7_form_action_url', 10, 1 ); 

function cf7_robot () { 
    echo "<script>
	const form = document.querySelectorAll('.wpcf7-form');
    form.forEach(item => {
        const formBtn = item.querySelector('.wpcf7-submit');
        const checkBtn = item.querySelector('.robot__check');

        checkBtn.addEventListener('click', () => {
            checkBtn.classList.add('active');
       
            const input = item.querySelector('.human');
            input.value = 'human';
        })
    });

	</script>\n";  
};
add_action( 'wp_footer', 'cf7_robot' ); 

add_filter( 'wpcf7_validate_text*', 'custom_text_validation_filter', 20, 2 );
  function custom_text_validation_filter( $result, $tag ) {
    $spam_text = isset( $_POST['human'] ) ? trim( $_POST['human'] ) : '';
    if ( $spam_text != 'human' ) {
      $result->invalidate( $tag, "Требуется согласие с политикой конфиденциальности" );
    }
 
    return $result;
  }
-----------------------

css
.robot{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0;margin:0 auto;margin-bottom:1em}.robot p{margin:0!important}.robot__check svg{width:30px;height:30px;border:1px solid #00123f;padding:5px;cursor:pointer;margin-right:.5em}.robot__check .st0{display:none;fill:none;stroke:#00123f;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;opacity:0}.robot__check.active .st0{display:block}.robot__check.active .st0.line1{-webkit-animation:fadeIn .1s ease-in-out forwards;animation:fadeIn .1s ease-in-out forwards}.robot__check.active .st0.line2{opacity:0;-webkit-animation:fadeIn .1s ease-in-out .05s forwards;animation:fadeIn .1s ease-in-out .05s forwards}.robot p{margin-bottom:.5em!important}.robot span{font-size:.8em}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}

-----------------------

sass
.robot
   display: flex
   align-items: center
   justify-content: center
   padding: 0
   margin: 0 auto
   margin-bottom: 1em
   p
      margin: 0 !important
   &__check
      svg
         width: $gutter
         height: $gutter
         border: 1px solid $accent
         padding: 5px
         cursor: pointer
         margin-right: .5em
      .st0
         display: none
         fill: none
         stroke: $accent
         stroke-width: 10
         stroke-linecap: round
         stroke-linejoin: round
         stroke-miterlimit: 10
         opacity: 0
      &.active
         .st0
            display: block
            &.line1
               animation: fadeIn .1s ease-in-out forwards
            &.line2
               opacity: 0
               animation: fadeIn .1s ease-in-out .05s forwards
   p
      margin-bottom: 0.5em !important
   span
      font-size: 0.8em
   
@keyframes fadeIn
   from
      opacity: 0
   to
      opacity: 1