We faced the same problems. However, we solved this by adding two captchas (one managed variant and one invisible) and loading the invisible widget on page load. On submit, we check whether the widget has been solved. If it’s not solved, we are loading the managed captcha and submit the form as soon as the managed variant is solved.
Thanks for posting this! We’re working on our first Turnstile implementation and were confronted with the same issue described in this thread. In your case, since you check the invisible widget to see if it’s solved on submit, I presume that interrupts the submit process entirely, right? I just want to make sure I understand what’s going on.
The way we do it is to use a managed widget, but keep it hidden by default (you can just place it in a div with display:none). When the user submits the form we check if the captcha value is present (usually it is – no interaction was needed) and copy the value into a hidden field in our form. If not present, we display the widget (it’s either still loading if the user submitted really fast, in which case is works like a progress bar, or it requires the user to click it in which case it needs to be shown). The vast majority (90%+) of users never know it’s there.
Yes that is correct – in most cases when displaying the captcha it will already be in the “Verify you’re a human” checkbox state. We use the captcha for sign up. The basic idea is to have the captcha in a hidden dialog box that says something like “Complete the captcha to finish sign up”. When the user submits the sign up form, we display the dialog box / captcha if the captcha hasn’t completed on its own yet.