Plugin Planet

As of SES Pro version 1.6, you can add a powerful anti-spam feature to any sign-up form. Google reCAPTCHA is a powerful captcha-based anti-spam measure that’s super easy on users and super effective at stopping spam.

How to add reCAPTCHA

Here are the steps to add Google reCAPTCHA to any SES form:

1. Sign up at Google to get your reCAPTCHA Public Key and Private Key
2. Visit the SES settings, enter your keys, and save the changes
3. Add the display_captcha="true" attribute to your SES form shortcode

For example: [ses_pro style="1" display_captcha="true"]

That’s all there is to it. After completing those steps, the Google reCAPTCHA box will be displayed on your form.

reCAPTCHA Shortcode Attributes

Here are some related [ses_pro] shortcode attributes:

• display_captcha — whether or not to display the reCAPTCHA (default: false)
• label_captcha — the label text for the reCAPTCHA (default: none)
• error_captcha — the error message when user fails the reCAPTCHA (default: “Incorrect response for the captcha.”)

reCAPTCHA Hooks

Additionally, the reCAPTCHA feature introduces a few new action and filter hooks for advanced customization:

• ses_captcha_params — filters the reCAPTCHA script src URL, so you can customize the parameters
• ses_captcha_atts — filters the .g-recaptcha <div> so you can add customize data attributes
• ses_captcha_output — filters the entire reCAPTCHA markup

Notes

Here are a few things to keep in mind when using Google reCAPTCHA with SES Pro:

• When the SES JavaScript is enabled in the plugin settings, the reCAPTCHA works for all form configurations except display_form="full".
• When the SES JavaScript is disabled in the plugin settings, the reCAPTCHA works for all form configurations.

Also note that Google makes it very difficult to customize the appearance of the reCAPTCHA. For example, it has a set minimum width that is difficult to decrease (it’s included via iframe). So to give you an idea of how the reCAPTCHA can be styled to fit inside of smaller sign-up forms, try adding the following CSS to your form styles (available under SES Pro ▸ Form Styles):

.ses-captcha {
	margin: 10px 0;
}
.ses-pro .g-recaptcha {
	width: 90%; margin: 0 auto;
	border-radius: 4px;
	border-right: 1px solid #d8d8d8;
	overflow: hidden;
}
.ses-pro .g-recaptcha > div[style], 
.ses-pro .g-recaptcha > div[style] > div {
	width: 100% !important; height: auto !important;
}
.ses-pro .ses-captcha label {
	display: block; width: 90%; margin: 0 auto; padding: 0 0 3px 0; text-align: left;
}

When included in your form styles, this CSS ensures that the reCAPTCHA does not overflow and display outside of the sign-up form box. Of course, you’ll want to customize the code to match the specifics of your design. This is just one possible solution to making the reCAPTCHA “fit” inside of small boxes. Here are some other ideas..

Use CSS Transform

As explained here, you can use CSS transform to decrease the size of the entire reCAPTCHA box:

@media screen and (max-height: 575px) {
	#rc-imageselect, .g-recaptcha {
		-webkit-transform: scale(0.77);
		        transform: scale(0.77);
		-webkit-transform-origin: 0 0;
		        transform-origin: 0 0;
	}
}

You’ll want to customize the various values to suit your needs.

Specify “compact” data-size

Another technique is to use the SES Pro filter hook to add the data-size attribute, like so:

<div class="g-recaptcha" data-size="compact" data-sitekey="1234567890"></div>

Here is more info on this and related techniques.

Also note that Google makes it possible to change various properties of the reCAPTCHA form, for example you can add a parameter that changes its color.

More form security

Despite its unresponsiveness, Google reCAPTCHA provides a powerful way to keep spammers away from your sign-up forms. And for even more form antispam security, check out the SES Pro Email Blacklist feature »

Troubleshooting

After implementing reCAPTCHA, if you are getting an error message like this:

reCAPTCHA placeholder element must be empty.

..this can happen if more than one reCAPTCHA JavaScript is included on the page. For help, check out these related search results. Basically, make sure that the Google JavaScript is only included once on the page.