I wanted to add validation in my comments form in wordpress article comments, but I couldn't find a way to change the submit form (so that I could validate it on comment post submit). I've found a plugin that adds a captcha for user log in, so I took that, and added it to my comment form.
I've basically only added the shortcode to my comment form
function mytheme_image_captcha( $args ){
// Adds an argument to the shortcode to record the type of form (Contact us, Request a Visit, Refer a Friend...) - [fuel-spam-guard form="Contact Us"]
extract( shortcode_atts( array( 'form' => '' ), $args ) );
// Create an array to hold the image library
$captchas = array(
esc_html__( 'Heart', 'mytheme') => "fa-heart",
esc_html__( 'House', 'mytheme') => "fa-home",
esc_html__( 'Star', 'mytheme') => "fa-star",
esc_html__( 'Car', 'mytheme') => "fa-car",
esc_html__( 'Cup', 'mytheme') => "fa-coffee",
esc_html__( 'Flag', 'mytheme') => "fa-flag",
esc_html__( 'Key', 'mytheme') => "fa-key",
esc_html__( 'Truck', 'mytheme') => "fa-truck",
esc_html__( 'Tree', 'mytheme') => "fa-tree",
esc_html__( 'Plane', 'mytheme') => "fa-plane"
);
$choice = array_rand( $captchas, 3);
foreach($choice as $key) {
$choices[$key] = $captchas[$key];
}
// Pick a number between 0-2 and use it to determine which array item will be used as the answer
$human = rand(0,2);
ob_start(); ?>
<div class="captcha-image">
<p><?php _e('Please prove you are human by selecting the', 'mytheme'); ?> <span><?php echo $choice[$human]; ?></span> <?php esc_html_e('.', 'mytheme'); ?></p>
<?php
$i = -1;
foreach($choices as $title => $image) {
$i++;
if($i == $human) { $value = "tn_human"; } else { $value = "bot"; };
echo '<label><input type="radio" name="tn_captcha" value="'. $value .'"/><i class="fa '. $image .'"></i></label>';
}
?>
</div>
<div style="display:none">
<input type="text" name="tn_honeypot">
<input type="hidden" name="FormType" value="<?php echo $form ?>"/>
<input type="hidden" name="wplicic_exists" value="true"/>
</div>
<?php // more code
$result = ob_get_contents(); // get everything in to $result variable
ob_end_clean();
return $result;
}
add_shortcode('contact_captcha', 'mytheme_image_captcha');
which cycles images and words in input field that you need to select. The comment form is like this:
<?php
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields = array(
'author' =>
'<div class="comment_fields"><p class="comment-form-author"><input id="author" name="author" type="text" placeholder="' . esc_html__( 'Name', 'mytheme' ) . '" value="' . esc_attr( $commenter['comment_author'] ) .
'" size="30"' . $aria_req . ' /></p></div>',
'captcha' => (!is_user_logged_in()) ? do_shortcode('[contact_captcha]') : '',
);
$comment_field = '<p class="comment-form-comment"><textarea id="comment" name="comment" placeholder="' . esc_html__( 'Your Comment', 'mytheme' ) . '" cols="45" rows="6" aria-required="true"></textarea></p>';
comment_form(array(
'fields' => $fields,
'comment_field' => $comment_field,
'comment_notes_after' => '',
'id_submit' => 'comment-submit',
'title_reply' => esc_html__( 'Leave a comment', 'mytheme' ),
'title_reply_to' => esc_html__( 'Leave a reply to %s.', 'mytheme' ),
'cancel_reply_link' => esc_html__( 'Cancel reply', 'mytheme' ),
'label_submit' => esc_html__( 'Submit', 'mytheme' ),
'comment_notes_before' => ''
)); ?>
The captcha is shown only if the user is not logged in (I'm presuming that the logged in users are not robots).
So since I couldn't find a way to override the $_POST for the form submit, I added a small and simple js code that will disable the post button unless you click on the correct one. And it works
/*Comment Validation*/
if ($('#comments').length) {
$('#comments').find('input[type="submit"]').attr('disabled', 'disabled');
$('.captcha-image input[type="radio"]').on('click', function(){
if ( $(this).is(':checked') && $(this).val() == 'tn_human' ){
$('#comments').find('input[type="submit"]').removeAttr('disabled');
} else{
$('#comments').find('input[type="submit"]').attr('disabled', 'disabled');
}
});
}
Now my question is: how safe is this?
Can this prevent bots from commenting?
I have a feeling this isn't foolproof method of validating wordpress comments.
I found a captcha plugin that works, but it has a type based captcha (3 + __ = 7 type capthca), and the client asked for an image click based captcha, and I couldn't find a free one that will work on comments.
Any advice on safety is helpful.
The best practice for such scenario would be using a PHP library for captcha insertion into your form. It's the best practice because you don't have to grab a whole plugin just to use its shortcode for captcha.
I've recently used Secureimage and it worked exactly the way I wanted it to be.
You'll have to insert the HTML elements for entry like this:
<input class="membership-form" type="text" name="captcha_code" size="10" maxlength="6" required>
<img style="margin-left: 34%;margin-top: 1%;" id="captcha" src="http://darpe.me/wp/wp-content/plugins/custom-register/securimage/securimage_show.php" alt="CAPTCHA Image" />
<a href="#" onclick="document.getElementById('captcha').src = 'http://darpe.me/wp/wp-content/plugins/custom-register/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
Next, in your submit checking page, you'll add the following:
include_once $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-content/plugins/YOUR-PLUGIN-PATH/securimage/securimage.php';
if (!is_wp_error($errors)) $errors = new WP_Error;
$securimage = new Securimage();
if ($securimage->check($_POST['captcha_code']) == false) {
// the code was incorrect
// you should handle the error so that the form processor doesn't continue
// or you can use the following code if there is no validation or you do not know how
$errors->add('chaptcha_error', 'The security code entered was incorrect. Please try again!');
}