html
[hidden human class:human]
Согласен с условиями Политики конфиденциальности
-------------------------
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 "\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