Add support for hCaptcha

Feature Requests
1

Could you please add support for hCaptcha? hCaptcha is better for GDPR compliance than reCaptcha.

Support is easy to integrate for plugin makers according to the hCaptcha plugin authors.

Thank you!

4

Hi,

Thanks for your suggestion, weā€™ll consider adding this feature.

1 Like
5

Any news about this topic? Indeed hCaptcha is better for gdpr compliance and would much prefer using it over reCaptcha.

Would love to get some instructions on how to go about integrating it for the hivepress login form. You can only turn it on for the wordpress forms where it works, but it is mainly needed for users who come through hivepress login form. I guess you need to make some simple php snippets for it with this hook ā€˜hivepress/v1/forms/user_loginā€™ but other than that, any advice would be appreciated? Thank you

6

Hi Ardain,

Because I couldnā€™t wait any longer I implemented it myself :smiling_face_with_halo:
Here are my snippets (UPDATED):

// Add hCaptcha to user register form
add_filter(
	'hivepress/v1/forms/user_register',
	function( $form ) {
		$form['footer'] = '<div id="my-hcaptcha-box">' . do_shortcode('[hcaptcha]') . '</div>' . hivepress()->helper->get_array_value( $form, 'footer' );
		return $form;
	},
	100
);

// Throw error if hCaptcha is missing
add_filter(
	'hivepress/v1/forms/user_register/errors',
	function( $errors, $form ) {
		$result = \HCaptcha\Helpers\API::verify_request();		

		if ( null !== $result ) {
			$errors[] = 'Please solve the hCaptcha.';
		}		
		
		return $errors;
	},
	100,
	2
);

Please note I used the hook ā€˜hivepress/v1/forms/user_registerā€™, but Iā€™m sure you can also use ā€˜hivepress/v1/forms/user_loginā€™ (did not test it though).

Because the above snippet inserts the hCaptcha below the submit button, I added a jQuery snippet as well, which also moves the form messages for better UX.

// Move hCaptcha and form messages above submit button
jQuery(document).ready(function( $ ) {
	// Get elements
	const $submitButton = $('#user_register_modal .hp-form__footer button');	
	const $formMessages = $('#user_register_modal .hp-form__messages');
	const $hCaptcha = $('#my-hcaptcha-box');
	
	// Insert elements	
	$hCaptcha.insertBefore($submitButton);
	$formMessages.insertBefore($submitButton);	
	
});

Hope this helps!

1 Like
7

@GoVegan Thank you for this! It works wonderfully. This will help many people. Here is the same thing, just for login form for anyone interested.

UPDATED:

// Add hCaptcha to user login form
add_filter(
	'hivepress/v1/forms/user_login',
	function( $form ) {
		$form['footer'] = '<div id="login-hcaptcha-box">' . do_shortcode('[hcaptcha]') . '</div>' . hivepress()->helper->get_array_value( $form, 'footer' );
		return $form;
	},
	100
);

// Validate hCaptcha for the login form
add_filter(
	'hivepress/v1/forms/user_login/errors',
	function( $errors, $form ) {
		$result = \HCaptcha\Helpers\API::verify_request();

		if ( null !== $result ) {
			$errors[] = 'Please solve the hCaptcha.';
		}

		return $errors;
	},
	100,
	2
);

And here

// Move hCaptcha and form messages above submit button in the login form
jQuery(document).ready(function( $ ) {
	// Get elements
	const $submitButton = $('#user_login_modal .hp-form__footer button');	
	const $formMessages = $('#user_login_modal .hp-form__messages');
	const $hCaptcha = $('#login-hcaptcha-box');

	// Insert elements	
	$hCaptcha.insertBefore($submitButton);
	$formMessages.insertBefore($submitButton);
});
1 Like
8

@Ardain Glad it worked out! And thanks for sharing your snippets as well, this will be useful to others who are looking for the same thing.

9

@GoVegan @Ardain please kindly edit your post and mention exact steps on how to apply your code. I do not know hooks.

10

Hi @obtrusive170,

Welcome to the community! :honeybee:

To use the code shared above, you can use a plugin like Code Snippets to apply them to your site.

I hope this helps!

Cheers,
Chris :victory_hand:

11

UPDATE
As of hCaptcha 4.15.0 hcaptcha_verify_post()has been deprecated.
Please replace$result = hcaptcha_verify_post();with$result = \HCaptcha\Helpers\API::verify_request(); in the above code snippets.

2 Likes
12

Hi,

Thanks for the update!

Iā€™ve also updated snippets accordingly.

1 Like
13

Since no one above mentioned all the steps on how to add hcaptcha, I will do it myself for future readers (even it is on a bad place - 11th post?).

Steps to activate hcaptcha on Wordpress + HivePress

After activating ā€œCode Snippetsā€ plugin, I go to Snippets > Add New > (PHP is selected by default)

Paste the code from that topic, starting ā€œ// Add hCaptcha to user register formā€.

ā€œSave and Activateā€ button.

Then add/activate plugin named ā€œhCaptcha for WPā€, and in its settings (General tab), select an option to apply configuration automatically (may not be necessary). Add hcaptcha sitekey, secret and ā€œCheckā€ button and then ā€œSaveā€ button on the bottom of the page. Also I have enabled some forms protection on the Integrations tab.

I can now see the registration form of HivePress having hCaptcha.

The registration form has small issues:

  1. fill just email and click register button, you have to solve captcha, then you have to fill the password, but the Register button can not be clicked. You have to click the captcha again (despite it has a green tickmark already) and solve it for the second time, then the registration automatically proceeds.

  2. submit empty reg. form, it asks captcha solving, then fill the form, you can not submit it (button is not clickable), until you click already solved (ticked) captcha again and solve it for the second time.

2 Likes
14

Hi,

Thank you for the detailed guide, itā€™s really helpful, especially for new users. The learning curve can sometimes be a bit challenging, so itā€™s great to see you contributing to the community.

Wishing you a lovely day