# Adding hCaptcha to Signup Form

**URL:** <https://forum.ghost.org/t/adding-hcaptcha-to-signup-form/49662>\
**Category:** Integrations & API\
**Created:** [August 20, 2024, 6:32pm UTC](https://forum.ghost.org/t/adding-hcaptcha-to-signup-form/49662 "2024-08-20T18:32:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonah\_Legg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jonah_legg/32/29079_2.png) [@Jonah\_Legg](https://forum.ghost.org/u/Jonah_Legg)\
**Post date:** [August 20, 2024, 6:32pm UTC](https://forum.ghost.org/t/adding-hcaptcha-to-signup-form/49662/1 "2024-08-20T18:32:28Z")

</div>

I have the following code running in code injections in the site footer:

```auto
<script>
$(function() {
    const captchaContainerHTML = '<div id="h-captcha" class="h-captcha" data-sitekey="sitekey"></div>';
    function addHCaptcha() {
        const $iframeContents = $("#ghost-portal-root").find("iframe").contents();
        $iframeContents.find(".gh-portal-content.signup .gh-portal-section").prepend(captchaContainerHTML);
        $iframeContents.find('#h-captcha').each(function () {
            hcaptcha.render(this);
        });
    }
    window.addEventListener('hashchange', function() {
        if (location.hash.startsWith('#/portal')) {
            setTimeout(addHCaptcha, 200);
        }
    });
    setTimeout(function() {
        $("#ghost-portal-root").find("iframe").contents().find('.gh-portal-triggerbtn-container').click(function() {
            setTimeout(addHCaptcha, 200);
        });
    }, 200);
});
</script>

```

Obviously with sitekey being the actual site key that I have confirmed numerous times.

However, when I open up the signup form it states:

ERROR for site owner: Invalid site key

Further, when I instead place the hCaptcha in the footer of the entire page, it works fine, which makes me think it is due to the fact that the signup form is an IFrame and there is something like a CORS issue preventing the hCaptcha from loading.

Has anyone got this sort of thing working or would be able to help me out?

---

<div class="post-metadata">

**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\
**Post date:** [August 20, 2024, 10:29pm UTC](https://forum.ghost.org/t/adding-hcaptcha-to-signup-form/49662/2 "2024-08-20T22:29:13Z")

</div>

> makes me think it is due to the fact that the signup form is an IFrame and there is something like a CORS issue preventing the hCaptcha from loading.

Yes, CORS prevents Captcha from working.

It’s better to use a custom signup page If you want to use Captcha.

Another option: if you can identify characteristics of spam requests, such as IP, user agent, you can use Cloudflare Web Application Firewall (WAF) to custom rule to block requests to `/api/send-magic-link` (the API that sends email with login link)