• On my Contact Form 7 form, I have Turnstile positioned between the form input fields and the submit button — the traditional location for a CAPTCHA.

    When Turnstile is always visible and automatically displays the green tick, I would like to be able to tab from my last input field straight to the submit button … but at the moment this takes several clicks as the Cloudflare logo and privacy/terms links are all part of the tab sequence. This is only a minor issue, but it’s not a perfect user experience.

    However, the issue is more signigficant when Turnstile is set to be displayed only when interaction is required, and in the case when interaction is not required. In this scenario, it still takes several clicks of the Tab key to get from my last input field to the submit button. Turnstile is not visible but it still accepts the focus. This is a poor user experience.

    Here is a video which demonstrates the problem.

    It is possible to work around this by modifying line 12 of contact-form-7.php as follows, making the Turnstile element inert to all user interaction:

    // echo '<div class="cf7-cf-turnstile" style="margin-top: 0px; margin-bottom: -15px;">';
    echo '<div class="cf7-cf-turnstile" inert>';

    However, while this solves the problem for the above two scenarios, it introduces a new problem whenever Turnstile asks the user to tick the box to confirm that they are human. Being inert prevents the user from ticking the box. What is needed perhaps is for this attribute to be controlled by Javascript, so that it is only added when Turnstile does not require interaction?

    I’m sure there are other ways the problem could be addressed, this is just one suggestion.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Brett Donald

    (@brettdonald)

    Until there is a fix for this issue, I have decided to move Turnstile to the top of my form, above my input fields. This reduces the severity of the focus problem because at least users can tab directly from the last input field to the submit button. However, it’s not the traditional location for a CAPTCHA, and will surprise some users, so I’m keen to return it to its original location once this issue is resolved.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.