Focus and the Tab key
-
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 elementinert
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]
- You must be logged in to reply to this topic.