Is it possible to enable reCaptcha for the contact form?

Hello @xvorost

At the moment our form doesn’t have option for captcha yet.
We have plan to add it in the future, but we can’t promise or give an ETA for when it will be available.

If you still have any question, please let me know.

Hi @yogajegstudio

Tell me please, if there is no built-in recaptcha in your plugin, can you somehow embed it yourself?

Hi @xvorost

Which recaptcha do you use?

You can try to embed your recaptcha using script. For example if you use Google reCAPTCHA v2, use spacer element as a recaptcha element.
https://prnt.sc/QlobrW4pXKoL

Then you can add the script to render the recaptcha to the spacer. Here is the script:

<script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render(document.querySelector('.guten-element.guten-RL5ujO'), {
		'sitekey' : 'your_site_key'
	});
  };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

Change RL5ujO to your spacer id.

Also you need to create script for the submit action.

@pradnyajegstudio

I managed to add a reCaptcha v2 button
Can you suggest a script for the submit action?
I’m new, I searched Google for this information, all requests are custom there, and you have a template, I don’t understand how to process a request with your form.

• This reply was modified 2 years ago by xvorost.

Hi @xvorost

You need to add a script after button is clicked and user have solve the captcha to submit the form. Here is the code.

<script type="text/javascript">
  var widgetId1;
  var onloadCallback = function() {
    widgetId1 = grecaptcha.render(document.querySelector('.guten-element.guten-your_spacer_id'), {
		'sitekey' : 'your_site_key'
	});
  };
	
	window.addEventListener('DOMContentLoaded', function(event) {
		document.querySelector('.guten-your_button_id button.gutenverse-input-submit').addEventListener("click", function(e) {
			e.preventDefault();
			
			var captchaResponse = grecaptcha.getResponse(widgetId1);
			var form = document.querySelector('.guten-form-builder.guten-your_form_id');
			
			if (captchaResponse) {
				form.dispatchEvent(new CustomEvent("submit", { cancelable: true }));
			}
		});
	});
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

Change your_site_key, your_spacer_id, your_button_id, and your_form_id with your own.

• This reply was modified 2 years ago by Pradnya.

@pradnyajegstudio
Oh thk u bro!

Hello @xvorost

Glad it all works out! ??
If you have a moment, could you leave us a review and feedback of your experience using Gutenverse?
It will help us a lot to grow and motivate us to release more exciting feature in the future.

Thank you.

+1 for you adding it as a feature by default. But thanks for the helpful replies to the OP. I was able to get it functioning pretty easily with the help of WP Code Snippets