UPDATE 2: If you are a fan of HCAPTCHA, and why wouldn’t you be, I have a much easier solution. Rather than Gravity Forms, try the also excellent Forminator from WPMU (https://wordpress.org/plugins/forminator/). I have the Pro version on a couple of sites and that has an HCAPTCHA setting along side reCAPTCHA.

Nice one WPMU – We salute you for offering a non-tracking alternative! It’s also a pretty nice alternative to Gravity Forms!

---

UPDATE: The G-Forms hCaptcha seemed to stop working on my site. There were no settings showing and the Gravity Forms system wasn’t showing hCAPTCHA. To make things worse it also disappeared from my site. For the moment I’ve had to suck it up and go back to the big bad CAPTCHA.

If you are having trouble with reCAPTCHA you are not the only one. I have multiple sites using reCAPTCHA in Gravity Forms where the reCAPTCHA code loads multiple times for reasons best known to Google.

I have asked Gravity Forms to look at this and their answer is always that they have no control over what Google is doing, but as you can see from the below, a single form with reCAPTCHA can add significantly to a sites downloads: –

Note that this is a single form and recaptcha_en.js is loading 4 times.

If this was one site having this problem I’d think it was the site, but I see it on multiple different systems and different sites.

Alternatives to reCAPTCHA

In Gravity Forms the main alternative would be Really Simple CAPTCHA. I like this system because it’s light weight and easy for users. However, I have found 2 issues. These are: –

1. It can have issues with cache that prevent the code images from showing and therefore your forms can’t get completed. I don’t see this a lot, but occasionally this can be a problem.
2. It seems that it’s increasingly not stopping spam. I’ve now started to see a lot of spam arriving from these forms. Not so much as it’s likely to be bots, but enough that I’m thinking they are becoming too easy to guess.

The latest alternative is hCAPTCHA. This came to my attention after I heard that Cloudflare had started to use it. So what is hCAPTCHA? Essentially it’s like reCAPTCHAv2, but with better privacy and customisable CAPTCHA subjects.

In your form it looks like: –

When you select that you are human, you get a similar grid of images to reCAPTCHAv2: –

You can see this working on my site contact form.

I have tested for downloads and this is what I found: –

reCAPTCHA – 0.172MB, but may load multiple times for no obvious reason.
hCAPTCHA – 0.25MB and loads that size for as many forms as you have on the page.

Note that although neither of these has a huge effect on the DOM load time, the weird thing is that Google might well punish you for a large page size due to their poor product!

Obviously what this means is that if you have multiple forms on a page, I would perhaps think seriously about using either of these systems over Really Simple CAPTCHA, but for a single form, the fact that hCAPTCHA’s size to download is consistent, puts it way ahead of reCAPTCHA.

How to Install hCAPTCHA in Gravity Forms

Actually this is the easy part. Just install G-Forms hCaptcha and follow the instructions to create an hCAPTCHA account. Then in Gravity Forms, set your secret key in Gravity Forms settings. You can then just drag the hCAPTCHA field into the form and delete the old CAPTCHA.

The one gotcha I did find is that you have to set a site key in the Advanced Tab of the hCAPTCHA gravity form field: –

You get that Site Key by adding the site into your account at https://www.hcaptcha.com/.

Conclusion

I would definitely recommend switching over from reCAPTCHA to hCAPTCHA if you have a single or maybe even 2 forms on your page. The signup process is quicker and easier, and you don’t need a credit card on your account (unlike Google) and there is good integration with Gravity Forms via a plugin.

The user experience of the hCAPTCHA system is similar to that of reCAPTCHAv2, but has the advantages that there is more focus on privacy, and you can set broad subjects for the CAPTCHA’s that match your sites subject matter.

I have been looking at an site with a custom post type to advertise jobs and custom fields to represent all the fields that need to be filled in by the site admin.

One of the fields is an expiry date that is set using the ACF (Advanced Custom Fields) date picker. What I wanted to do was disable the application form on the job at the expiry date, without having to have a custom form for every job.

There are various plugins to do things like this, but in my case they didn’t seem to work that well and a few hadn’t been updated in a long time. However, it turns out that as this is to go in the template, rather than on the WordPress page, it’s actually pretty easy to write in PHP and just include that in the template.

The code snippet follows: –

<?php 
// For US format dates use $date1 = date("m/d/y")
$date1 = date("d-m-Y"); 
$closing1 = get_field('closing_date');
$date2 = strtotime($date1);
$expires1 = strtotime($closing1);
if ($date2 < $expires1) {
	echo "<p>Todays Date - " . $date1 ."</p>";
	echo "<p>This will expire on " . $closing1 . "</p>";
} else {
	echo "<p>Todays Date - " . $date1 ."</p>";
	echo "<p>This expired on " . $closing1 . "</p>";
}
?>

To explain this, the first line sets the variable $date1 as the current date from the server. Note the date format is d-m-Y. This is the standard for European format dates as per https://www.php.net/manual/en/datetime.formats.php but for US format you will want m/d/y. Note the different order and slashes not dashes.

The second line sets a variable of $closing1 which retrieves my ACF field closing_date. Note that the ACF field has to be set up to the same date format or you will need to do some extra php work get it into this format. My ACF field settings look like the below: –

Once you have these variables set, that is most of the hard work done.

Lines 3 and 4 take the above 2 variables and convert them into a standard form the server will understand and be able to work with (the number of seconds since January 1 1970 00:00:00 UTC).

After that we have a simple if statement comparing the 2 times and customising content to suit. In this case if todays date is less than the expiry date show the first content, if it’s after show the second content. Just substitute in what you need.

In my case I am going to put the Gravity Forms shortcode in the top section, so the application for will show if the expiry hasn’t past. In the bottom section I will put a message saying the the expiry date has passed, but if they want to contact HR, the details are shown.

Next step will be to move the job to draft a couple of days after the expiry date!

Tablepress CSS Column Selector Plugin adds the number of columns in a Tablepress table as a class on the table. This then allows the table to be styled with standard CSS based on the number of columns.

The origin of this plugin was when I had a page with many tables, and the columns just didn’t line up how I wanted. My options were to manually add the column widths in tablepress or to style them with CSS.

Result

Initial Code
<table id=”tablepress-2-no-107″ class=”tablepress tablepress-id-2″>

After Plugin (for a 3 column table)
<table id=”tablepress-2-no-107″ class=”tablepress tablepress-id-2 column-3“>

Typical CSS

You will need to manually add the CSS as per your requirement, but can now target the number of table columns. In the example below I have the last column always set to 20% (in this particular case it was so a button in the table displayed in a single column).

table.tablepress-id-2.column-2 td.column-1{width:80%;}
table.tablepress-id-2.column-2 td.column-2{width:20%;}
table.tablepress-id-2.column-3 td.column-1{width:54%;}
table.tablepress-id-2.column-3 td.column-2{width:26%;}
table.tablepress-id-2.column-3 td.column-3{width:20%;}
table.tablepress-id-2.column-4 td.column-1{width:54%;}
table.tablepress-id-2.column-4 td.column-2{width:13%;}
table.tablepress-id-2.column-4 td.column-3{width:13%;}
table.tablepress-id-2.column-4 td.column-4{width:20%;}

To download this plugin (it got stuck in WordPress review and I haven’t been able to get in touch with the person that keeps emailing me). You can download directly from https://www.dropbox.com/s/kpzfgggqjscf2k6/tablepress-css-col-selector.zip?dl=1

Please note that this is not the greatest thing to do securitywise! The code though is below if you want to copy and paste it into your functions.php file instead.

// JavaScript Document
jQuery(document).ready(function(){
		var numbertablesonpage = jQuery("table.tablepress").length;

var tableid = [];
jQuery("table.tablepress").each(function () {
   tableid.push(jQuery(this).attr("id"));
});
		
	jQuery.each( tableid, function( index, value ){
    	var tableidnow = tableid[index];
		var colclass1 = jQuery("table#" + tableidnow + " tr.row-2 td:last-child").attr('class');
		jQuery("table#" + tableidnow ).addClass(colclass1);
	});
	
});

This is a javascript document containing some jquery that should be saved separately in the active theme file /js/ tablecolresizer.js

You can see that all it does is looks at a table that is loading, then it takes the last cell of the second row, and copies the class, which is the column number. It them applies that same class to the top level table, giving you an way to style the table based on the number of columns it contains.

To add this file into your theme, add the following into your themes functions.php file.

// The following adds the script that allows a tablepress table to check the number of columns int he table
function tp-col-indicator() {
    wp_enqueue_script( 'tp-col-indicator', 'https://YOUR-SITE/wp-content/themes/YOUR-THEME/js/tablecolresizer.js', array( 'jquery' ), 1.0, true );
}
add_action( 'wp_enqueue_scripts', 'tp-col-indicator' );

Obvious replace YOUR-SITE and YOUR-THEME in the code above.