If you’re using Contact Form 7 (CF7) on your WordPress site with reCaptcha, you might want to load the reCaptcha script only on specific pages—like your contact page—rather than globally across your entire site. This improves performance by ensuring that the reCaptcha script is not unnecessarily loaded on every page. In this tutorial, we’ll walk you through how to modify your theme’s functions.php file to load the Contact Form 7 reCaptcha script only on your contact page or any specific page you choose.
Step 1: Remove reCaptcha from All Pages
First, you need to remove the reCaptcha script from loading on all pages by default. You can do this by adding the following code snippet to your theme’s functions.php file:
/**
* Remove CF7 reCaptcha from all pages.
*/
function contact_only_recaptcha() {
remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );
}
add_action( 'init', 'contact_only_recaptcha' );
This function uses the remove_action hook to stop Contact Form 7 from loading the reCaptcha script across all pages of your site.
Step 2: Load reCaptcha on Specific Pages Only
Now that we’ve disabled the reCaptcha script site-wide, we need to load it specifically on the contact page or any page where you want the Contact Form 7 form to appear with reCaptcha. Add the following code to your functions.php file:
/**
* Enqueue CF7 reCaptcha scripts on contact page or specific pages.
*/
function contact_only_recaptcha_checks() {
if ( is_page( array( 'contact-us', 'contact' ) ) ) { // Change slug to match the pages where CF7 is used.
wpcf7_recaptcha_enqueue_scripts();
}
}
add_action( 'wp_enqueue_scripts', 'contact_only_recaptcha_checks' );
In this function, we check if the current page is either “contact-us” or “contact” by using the is_page() conditional function. If the user is on one of these pages, the reCaptcha script will be loaded. You can replace the slugs with the actual slugs of the pages where you’re using Contact Form 7 with reCaptcha.
Step 3: Customizing for Other Pages
If you need to load the reCaptcha script on other specific pages, you can easily customize the array inside the is_page() function. Simply add or remove page slugs based on your requirements.
/**
* Example: Load reCaptcha on multiple specific pages.
*/
function contact_only_recaptcha_checks() {
if ( is_page( array( 'contact-us', 'services', 'support' ) ) ) { // Add any slugs as needed.
wpcf7_recaptcha_enqueue_scripts();
}
}
add_action( 'wp_enqueue_scripts', 'contact_only_recaptcha_checks' );
Why Load reCaptcha on Specific Pages Only?
Loading reCaptcha only on the necessary pages has several benefits:
- Improved Site Performance: By reducing the number of scripts loaded globally, you’ll see improved site performance and faster page load times.
- Reduced Resource Usage: Limiting unnecessary script execution saves server resources and improves the browsing experience for your visitors.
- Better User Experience: Users won’t encounter reCaptcha prompts unnecessarily, which can streamline their interactions with your site.
Conclusion
By following this simple tutorial, you can optimize the way Contact Form 7’s reCaptcha script is loaded on your WordPress site. Loading reCaptcha only on specific pages helps improve site performance, reduces resource usage, and enhances the user experience. Simply edit your functions.php file with the provided code snippets, and you’re good to go!
Remember to test your changes to ensure that reCaptcha is working correctly on the selected pages and that it is not being loaded unnecessarily on other parts of your site.