How can I replace the built-in captcha with Google Recaptcha

Helpdesk Integrations and Third Party Tools
1

Hello there,

We are building a client site where there are a number of different forms for different uses. Our client would like to use Google’s ReCaptcha, but all SiteJet forms have the default captcha.

What would be the best / SiteJet native method to replace the captcha with a Google reCAPTCHA v2 on forms?

Thanks in advance for your suggestions!

2 Likes
2

I am also interested in this thread, and a possible workaround or solution.

1 Like
3

Hey there, @Floris_van_Lint - it is not possible to use another Captcha with our contact form. The moment you “disable” our captcha, the formula will not work anymore.

A workaround would be: Choose another tool to create a contact formula, insert (when possible of course) the reCAPTCHA and implement the formula in your Sitejet website.

Hope this helps!

4

Thanks @Andre ! So, supposing we would use something like https://formcake.com, which seems to be made exactly for this type of situation, how would I apply that, as Sitejet does not show me the actual form code? Or should I create a bare html element and work from that?

5

Hey there,

I am not familiar with this tool. But I suppose you can add it via an HTML-element :slight_smile:

6

Thanks, I am going to try it next week

2 Likes
7

curious to see how it works for you.

1 Like
8

Hello @maxz2040 though the formcake service does work well with the sitejet CMS, it took a bit of figuring out. In order to use it, you need to copy the html of the form using the preview of the site. Then you need to change all ed- type class names, as they are reserved for the CMS. We inlined all css instead.

After figuring that out, the form started working. However, I missed that formcake does not accept all attachments, and this client needs a very specific filetype. As such, we needed a different solution.

So we switched to a php based form-receiver on our own servers to which a slightly changed html-element from the above sends the post-data.

1 Like
9

As an addition, we noticed that doing it this way, SiteJet because the way it works ( showing the live preview and edit ) seems to also save the by reCaptcha added html elements:

<div>
	<div class="grecaptcha-badge" data-style="none" style=" inline css ">
		<div class="grecaptcha-logo">
			<iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=XXXXXX&amp;co=XXXXX&amp;hl=nl&amp;v=XXXXX&amp;size=invisible&amp;sa=submit&amp;cb=XXXX" width="256" height="60" role="presentation" name="a-8mwyoo9o7cdi" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe>
		</div>
		<div class="grecaptcha-error"></div>
		<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style=" inline css "></textarea>
	</div>
	<iframe style="display: none;"></iframe>
</div>

Which in our case, but probably in all other cases too, causes issues in the validation of the POST request.

After getting in contact with the SiteJet Helpdesk, which in turn contacted the developers, they couldn’t support the third-party method and suggested that we looked for something on for example StackOverflow, which is understandable.

The solution that we came up with is by adding jQuery to the site and using that to find and remove the additional elements, except the last one otherwise that would break the reCaptcha mechanism.

We’ve the following to “More > SEO > Meta tags”:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
	(function ($, log) {
		$(document).ready(function(){
			log('jQueryReady: ' + $.fn.jquery);
			$("html").find('.grecaptcha-badge').not(":last").parent().remove();
		});
	})(jQuery, console.log);
</script>

This will solve the problem for every page that a custom html form has been created on and reCaptcha is included.

4 Likes