Intégrer un formulaire sur votre propre site web avec le composant généré

Un formulaire n’a pas besoin d’une page FormFlow. Si vous avez déjà un site web, vous pouvez y coller le composant généré du formulaire et garder vos visiteurs sur vos propres pages. Ce tutoriel couvre la copie, le collage, et les deux points qui surprennent le plus souvent ensuite : là où un visiteur atterrit après avoir appuyé sur Envoyer, et ce qui se passe quand vous modifiez plus tard les champs du formulaire. L’intégration fait partie de FormFlow depuis la v1.0.0.

Ce dont vous avez besoin

Un formulaire avec au moins un champ, et une page à vous où vous pouvez coller du HTML, ou un fichier Blade, Vue ou React. Vous n’avez pas besoin d’une page hébergée, qui n’est disponible que sur un forfait payant. Rien dans Obtenir le code ne vérifie votre forfait : une équipe sur le forfait Free peut donc aussi intégrer un formulaire. Le quota de soumissions du forfait s’applique toujours à ce que le formulaire reçoit.

Copier le composant généré

1. Ouvrez le formulaire dans le panneau. Dans l’en-tête de l’éditeur, appuyez sur Obtenir le code. Sur un formulaire qui n’a jamais reçu de soumission, c’est le bouton mis en avant. Sur tous les autres, il se trouve sous Outils. La liste des formulaires propose aussi une action Obtenir le code sur chaque ligne.

2. La fenêtre s’intitule Composant prêt à coller. Sa première ligne indique « Pointez votre formulaire sur » suivi du point de terminaison du formulaire, qui se termine par le jeton du formulaire. Ce point de terminaison est la seule adresse dont votre page a besoin.

3. Choisissez un Style. Un seul Style pilote tous les onglets et l’Aperçu, et Minimal est le choix par défaut. Le Style est écrit dans la copie : changer de Style plus tard impose donc de copier à nouveau.

4. Choisissez l’onglet de votre pile technique : HTML, Blade, Vue ou React. L’onglet Aperçu affiche la version HTML dans le panneau pour que vous puissiez la vérifier avant de coller quoi que ce soit.

5. Appuyez sur le badge Copier dans le presse-papier en haut de l’onglet et collez le résultat dans votre page, à l’endroit où le formulaire doit apparaître.

Ce que contient la copie HTML

L’onglet HTML est un formulaire ordinaire qui envoie ses données au point de terminaison de votre formulaire. Voici un extrait abrégé pour un formulaire avec un champ E-mail. YOUR_FORM_TOKEN remplace le jeton, et dans la vraie copie un élément style contenant le CSS du Style vient en premier.

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

Deux éléments méritent un commentaire. Les noms de champs, comme name="email", sont ce qui apparaît comme réponses dans vos soumissions : modifiez-les donc dans le formulaire plutôt que dans votre page. Le champ hors écran est un piège à spam que personne ne voit et que les robots ont tendance à remplir. Son nom est généré pour chaque formulaire, ici ff_xxxxxxxx. Laissez-le en place.

Décider où atterrissent les visiteurs

Les copies HTML et Blade sont des formulaires natifs. Quand quelqu’un appuie sur Envoyer, le navigateur envoie les données à FormFlow et affiche la réponse de FormFlow. Sans redirection, cette réponse est un court message JSON. Il est exact, mais ce n’est pas ce que vous voulez faire lire à un visiteur. Le panneau le dit à côté du réglage : « Les expéditeurs du formulaire HTML brut atterriront sur une réponse JSON brute. »

1. Dans l’éditeur du formulaire, ouvrez l’onglet Livraison.

2. Sous Où atterrit la personne qui envoie, renseignez Rediriger les expéditeurs vers avec une page de remerciement sur votre propre site. Ce doit être une adresse http ou https.

3. Enregistrez le formulaire.

Les copies React et Vue fonctionnent autrement. Elles envoient les données en arrière-plan et affichent leur propre message de confirmation sur place : la redirection ne concerne donc que HTML et Blade.

Limiter l’origine des envois

Par défaut, un formulaire accepte un envoi de n’importe quelle origine. Dans l’onglet Sécurité, sous D’où les soumissions peuvent venir, Origines autorisées n’accepte que des noms d’hôte, sans schéma ni chemin. Son texte d’aide indique qu’une liste vide autorise n’importe quelle origine. Ajoutez le nom d’hôte de votre site, par exemple example.com, et les envois provenant d’autres origines sont refusés. L’interrupteur situé en dessous, Rejeter les soumissions sans en-tête Origin, refuse aussi les envois qui ne portent aucune origine.

Si un envoi de test depuis votre page est refusé, un nom d’hôte mal saisi en est la cause habituelle. FormFlow conserve les soumissions refusées sur lesquelles vous pouvez agir : corrigez donc la liste, puis allez sous Refusé dans le panneau pour les récupérer.

Turnstile et votre politique de sécurité du contenu

Deux autres points ne s’appliquent que si vous les utilisez. D’abord, l’interrupteur Exiger un défi Turnstile de l’onglet Sécurité. La clé Turnstile intégrée de FormFlow ne couvre que les pages servies par FormFlow : sur votre propre site, il vous faut donc votre propre clé Cloudflare Turnstile, saisie dans les Paramètres de l’équipe. Sans elle, la copie contient l’espace réservé YOUR_TURNSTILE_SITE_KEY et chaque soumission venant de votre page est notée comme spam.

Ensuite, si votre site envoie une politique de sécurité du contenu (Content Security Policy), Obtenir le code affiche les directives à ajouter, sur la ligne qui commence par « Si votre site utilise une politique de sécurité du contenu (CSP) ». Pour la copie simple, il s’agit d’un script-src qui autorise 'self' et challenges.cloudflare.com, d’un frame-src pour challenges.cloudflare.com et d’un connect-src pour l’origine du point de terminaison de votre formulaire. Copiez la ligne depuis la fenêtre plutôt que d’ici, car elle est construite pour votre formulaire.

Vérifier que ça fonctionne

1. Ouvrez votre page et envoyez une entrée de test via le formulaire collé.

2. Confirmez que vous atterrissez là où vous l’attendez : votre page de remerciement, ou le message de confirmation dans une copie React ou Vue.

3. Ouvrez Soumissions dans le panneau et retrouvez l’entrée. Si elle manque, consultez Refusé avant de modifier quoi que ce soit.

Limites à connaître

• Une copie collée ne suit pas les changements ultérieurs des champs du formulaire, sauf si vous utilisez le Rendu en direct ou copiez à nouveau.

• Le Style est figé au moment de la copie. Il ne peut pas être modifié ensuite depuis le formulaire.

• La redirection ne s’applique qu’aux formulaires natifs.

• Origines autorisées restreint le trafic des navigateurs. Cela n’authentifie personne.