# Elementor et Cloudflare Turnstile : remplacer reCAPTCHA sur un formulaire Pro

> Fatigue du visiteur face aux cases « je ne suis pas un robot », dépendance à Google : retour sur l'intégration de Cloudflare Turnstile dans un widget Elementor Pro Forms, avec validation côté serveur.

- Auteur : WordPress Développement
- Publié le : 2022-10-06
- Mis à jour le : 2022-10-06
- Catégorie : Elementor
- URL : https://www.wpmoderne.fr/elementor/elementor-cloudflare-turnstile-remplacer-recaptcha-formulaire-pro/

## L’essentiel

- Turnstile ne demande généralement aucune interaction visible au visiteur
- L'intégration native reCAPTCHA d'Elementor Pro ne couvre pas Turnstile
- La validation du jeton doit impérativement se faire côté serveur

`curl -s -X POST https://challenges.cloudflare.com/turnstile/v0/siteverify` : cette commande, une fois intégrée dans le traitement serveur d'un formulaire Elementor Pro Forms, referme la boucle de vérification anti-bot sans jamais afficher la case « je ne suis pas un robot » que la majorité des visiteurs redoutait sur ce formulaire de demande de devis.

Ce projet visait à remplacer reCAPTCHA, intégré nativement dans Elementor Pro Forms mais dépendant des services Google, par Cloudflare Turnstile, une alternative plus discrète pour l'expérience du visiteur. Cette intégration ne couvre pas la configuration réseau Cloudflare dans son ensemble ni le pare-feu applicatif (WAF), deux sujets distincts du périmètre de ce formulaire.

## Pourquoi Turnstile plutôt que l'intégration native reCAPTCHA

Elementor Pro Forms propose nativement reCAPTCHA v2 et v3 comme options anti-spam dans les réglages du widget. Cloudflare Turnstile, en revanche, n'est pas proposé comme option native à cette date : son intégration demande un widget HTML personnalisé et un traitement de validation côté serveur, écrit spécifiquement pour ce formulaire.

## Étape 1 : ajouter le widget Turnstile dans le formulaire

Un widget **HTML** Elementor est placé juste avant le bouton de soumission du widget Forms, contenant le script d'intégration fourni par Cloudflare et la balise cible :

```
<div class="cf-turnstile" data-sitekey="0x XXXXXXXXXXXXXXXXX"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
```

> L'essentiel à retenir : Turnstile ne demande généralement aucune interaction visible au visiteur ; L'intégration native reCAPTCHA d'Elementor Pro ne couvre pas Turnstile ; La validation du jeton doit impérativement se faire côté serveur

Le champ caché généré automatiquement par Turnstile (`cf-turnstile-response`) est transmis avec le reste des données du formulaire au moment de la soumission, mais Elementor Pro Forms ne le reconnaît pas nativement : c'est là qu'intervient un traitement supplémentaire côté serveur.

## Étape 2 : valider le jeton côté serveur, jamais côté client

La validation du jeton Turnstile ne doit jamais se limiter à vérifier sa présence côté JavaScript : un bot peut très bien simuler cette présence. La validation réelle se fait via un appel serveur à serveur vers l'API Cloudflare, accroché au hook de validation d'Elementor Pro Forms :

```
add_action( 'elementor_pro/forms/validation', function( $record, $ajax_handler ) {
    $jeton = $_POST['cf-turnstile-response'] ?? '';
    $reponse = wp_remote_post(
        'https://challenges.cloudflare.com/turnstile/v0/siteverify',
        [ 'body' => [
            'secret'   => CLOUDFLARE_TURNSTILE_SECRET,
            'response' => $jeton,
        ] ]
    );
    $resultat = json_decode( wp_remote_retrieve_body( $reponse ), true );
    if ( empty( $resultat['success'] ) ) {
        $ajax_handler->add_error( 'turnstile', 'Vérification anti-spam échouée.' );
    }
}, 10, 2 );
```

### Points de vigilance sur ce montage

- La clé secrète Cloudflare Turnstile doit être stockée hors de la base de données, dans une constante `wp-config.php`
- Le hook `elementor_pro/forms/validation` s'applique à tous les formulaires du site : un filtre sur l'identifiant du formulaire (`$record->get_form_settings( 'id' )`) limite la vérification au seul formulaire concerné
- Une réponse Cloudflare indisponible (panne de service) doit être gérée explicitement, pour éviter de bloquer totalement le formulaire en cas d'incident côté Cloudflare

> Conseil maison : ne jamais faire confiance à la seule présence du champ caché côté navigateur. Sans validation serveur du jeton, l'anti-spam n'est qu'une façade facilement contournée par un script un peu déterminé.

## Ce que cette intégration a changé côté conversion

Sur ce formulaire de demande de devis, l'équipe commerciale a observé une légère hausse du taux de complétion après le passage à Turnstile, la case reCAPTCHA v2 étant régulièrement citée comme un point de friction lors des tests utilisateurs informels menés avant le changement, sans qu'il s'agisse ici d'une mesure chiffrée rigoureuse.

## En résumé

Remplacer reCAPTCHA par Cloudflare Turnstile sur un formulaire Elementor Pro Forms demande un peu plus de code qu'une simple case à cocher dans les réglages du widget, mais la validation côté serveur, une fois en place, reste tout aussi fiable et plus discrète pour le visiteur.