Add Recaptcha in Custom Form in WordPress

Add Recaptcha in Custom Form in Wordpress
1293 Views

You have to add recaptcha external js so use following function in your current themes functions.php file

<?php
add_action( 'wp_enqueue_scripts', 'cxc_enqueue_my_styles_scripts' );  

function cxc_enqueue_my_styles_scripts() {
	wp_enqueue_script( 'recaptcha-script', 'https://www.google.com/recaptcha/api.js' );
	wp_enqueue_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
?>

Set Recaptcha element in your form.

Cxc Custom Form :

screenshot staging.codexcoach.com 2023.01.10 12 53 21

Custom Form Html :

<form class="cxc-captcha-form">
   <input name="name" type="text" placeholder="Enter Your Name">
   <input name="email" type="email" placeholder="Enter Your Email">
   <div class="g-recaptcha" data-sitekey="{{** Enter Your Sitekey Here **}}"></div>
   <div class="captcha-error" style="color: red;"></div>
   <input name="submit" type="submit" value="Submit">
</form>

Put below js in your current themes custom.js file.

//Captcha validation script
jQuery(document).ready(function( $ ) { 
	jQuery(document).on('submit','.cxc-captcha-form',function(e){
		if(grecaptcha.getResponse() == "") {
		   	e.preventDefault();
			jQuery('.captcha-error').text("Please verify captcha");
		} else {
			jQuery('.captcha-error').text("");
		}
	});
});

Was this article helpful?
YesNo

Leave a comment

Your email address will not be published. Required fields are marked *