Bloc Form de Jetpack

Créez et partagez des formulaires pour recueillir des prospects, des avis, des paiements et bien plus encore grâce à la puissance de Jetpack Forms.

Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:

  • Deactivate the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
  • Enable both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.

Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.

For more details, see Using Blocks and the Classic Editor.

La fonctionnalité Form de Jetpack est activée par défaut. Si nécessaire, vous pouvez désactiver Jetpack Forms en suivant les étapes indiquées ici.

Si vous utilisez l’éditeur classique, consultez Formulaire de contact (éditeur classique).

Ajouter un formulaire Jetpack

Le bloc Form est disponible sur tous les sites connectés à Jetpack et son utilisation est gratuite. Pour ajouter un formulaire à n’importe quelle publication ou page, suivez ces étapes :

  1. Saisissez /form dans l’éditeur ou sélectionnez le Formulaire dans l’outil d’insertion de blocs.
  2. Choisissez un modèle de formulaire prédéfini pour démarrer rapidement (voir ci-dessous) ou commencez avec un formulaire vierge.
  3. Personnalisez les champs du formulaire selon vos besoins : supprimez, ajoutez ou réorganisez les champs à l’aide de la barre d’outils de chaque champ.
  4. Rendez les champs obligatoires ou facultatifs en activant ou désactivant le * paramètre.
  5. Pour personnaliser le bouton Envoyer, cliquez dessus et remplacez directement le texte.

Utiliser l’éditeur de formulaires de Jetpack

Vous pouvez également créer et gérer des formulaires à l’aide de l’éditeur de formulaires Jetpack, une interface autonome en dehors de l’éditeur de blocs. Elle vous permet de créer, d’organiser et de publier des formulaires directement depuis votre interface d’administration WordPress, à l’emplacement Jetpack → Forms.

Le guide de bienvenue de l’éditeur de formulaires

La première fois que vous ouvrez l’éditeur de formulaires, un guide en cinq étapes vous présente le processus de création d’un formulaire : ajouter des champs, modifier le libellé et les réglages d’un champ, choisir ce qui se passe après l’envoi du formulaire, puis publier et partager le formulaire terminé.

Pour afficher à nouveau le guide à tout moment, cliquez sur l’icône Options (⋮) dans l’angle supérieur droit de l’éditeur de formulaires, puis sélectionnez Guide de bienvenue.

Le guide s’ouvre lors de la première visite dans l’éditeur de formulaires. Il ne s’ouvre pas si vous avez déjà utilisé l’éditeur de blocs et créé votre propre formulaire. Il ne s’ouvre pas non plus lorsque vous accédez à un formulaire en cliquant sur Modifier le formulaire depuis un formulaire inséré dans une publication ou une page — il s’ouvre uniquement lorsque vous ouvrez directement l’éditeur de formulaires depuis Jetpack → Formulaires.

Utiliser les modèles de formulaires pour démarrer rapidement

Jetpack Forms propose plusieurs modèles de formulaires prédéfinis : il s’agit de mises en page prêtes à l’emploi que vous pouvez insérer et personnaliser. Utiliser un modèle est le moyen le plus rapide de créer un formulaire fonctionnel sans partir de zéro.

Modèles de formulaires disponibles

Les modèles de formulaires suivants sont inclus avec Jetpack :

  • Formulaire de contact : un formulaire de contact général permettant aux visiteurs de vous contacter.
  • Formulaire RSVP : recueille les réponses et les informations de présence à un événement.
  • Formulaire d’inscription : recueille les informations d’inscription des nouveaux utilisateurs ou participants.
  • Formulaire de rendez-vous : permet aux visiteurs de demander ou de planifier des rendez-vous.
  • Formulaire d’avis : recueille des opinions, des évaluations ou des suggestions.
  • Formulaire à plusieurs étapes : divise un formulaire long en plusieurs étapes que les visiteurs remplissent un écran à la fois, avec une barre de progression et des boutons Suivant et Précédent. Le modèle commence avec trois étapes que vous pouvez modifier, auxquelles vous pouvez en ajouter ou que vous pouvez supprimer.
  • Formulaire de collecte de prospects : recueille les informations de clients potentiels afin d’assurer leur suivi.

Comment insérer un modèle de formulaire

Vous pouvez accéder aux modèles de formulaires de deux façons :

  1. Depuis l’outil d’insertion de blocs : saisissez /form dans l’éditeur. Une liste des modèles de formulaires disponibles s’affiche ; sélectionnez ensuite celui qui correspond le mieux à vos besoins.
  2. Depuis l’écran de configuration du formulaire : lorsque vous ajoutez un nouveau bloc Form, Jetpack affiche un sélecteur de modèles présentant toutes les mises en page disponibles. Cliquez sur un modèle pour l’insérer instantanément.

Une fois inséré, chaque élément du modèle est entièrement modifiable : vous pouvez ajouter, supprimer ou réorganiser les champs, modifier les libellés et ajuster les réglages selon votre cas d’utilisation.

Champs de formulaire disponibles dans le bloc Form de Jetpack

Le bloc Form propose plusieurs blocs qui ajoutent des champs à votre formulaire. Les champs de formulaire disponibles sont les suivants :

  • Champ HTML personnalisé : Permet aux propriétaires de sites d’insérer du HTML personnalisé dans le formulaire. Cette option peut servir à ajouter une mise en forme personnalisée, du contenu intégré ou des éléments de formulaire supplémentaires qui ne sont pas disponibles nativement.
  • Sélecteur de date : permet aux utilisateurs de choisir une date dans un calendrier, ce qui est utile pour planifier des rendez-vous. Le format de date attendu est indiqué sous le champ de saisie.
  • Champ de liste déroulante : présente une liste d’options dans un menu déroulant, utile pour recueillir des réponses structurées comportant plusieurs choix.
  • Champ d’adresse e-mail : recueille l’adresse e-mail d’un utilisateur. Les utilisateurs doivent saisir une adresse e-mail valide, ce qui est utile pour répondre aux demandes.
  • Bloc de téléversement de fichiers : permet aux utilisateurs de téléverser des fichiers avec leurs réponses au formulaire.
  • Champ masqué : stocke des informations supplémentaires envoyées avec la réponse, mais invisibles pour l’utilisateur. Il peut aider à suivre l’origine des réponses ou à transmettre des données pour les intégrations et l’automatisation.
  • Champ de texte multiligne : fournit une zone de texte multiligne pour les messages ou descriptions plus longs.
  • Choix multiple (cases à cocher) : permet aux utilisateurs de sélectionner une ou plusieurs options.
  • Champ Nom : recueille le nom du visiteur et s’affiche sous la forme d’un champ de saisie sur une seule ligne.
  • Champ de saisie numérique : fournit un champ de saisie sur une seule ligne pour les valeurs numériques.
  • Champ Numéro de téléphone : recueille les numéros de téléphone pour permettre une communication directe. Les numéros de téléphone des réponses aux formulaires sont cliquables et incluent un sélecteur de code pays. Sur les appareils compatibles, cela permet de lancer un appel ou d’ouvrir directement l’application téléphonique par défaut.
  • Champ d’évaluation (étoiles et/ou cœurs) : permet aux clients de laisser une évaluation dans le cadre de leurs réponses au formulaire, par exemple lors de l’évaluation de produits ou de services. 
  • Choix unique (boutons radio) : permet aux utilisateurs de sélectionner une option dans une liste prédéfinie. Vous pouvez également inclure un choix facultatif « Autre » avec un champ de saisie, afin que les utilisateurs puissent fournir une réponse personnalisée si aucune des options prédéfinies ne s’applique. Pour activer cette option, sélectionnez le champ Choix unique (boutons radio) dans l’éditeur, ouvrez les réglages du bloc dans la barre latérale droite, puis activez le paramètre Inclure l’option « Autre ».
  • Champ curseur : prend en charge un large éventail de cas d’utilisation, comme la définition d’un budget dans les demandes de devis, le réglage de plages de distances ou de pourcentages, ou la proposition d’autres façons d’évaluer des éléments au-delà du champ d’évaluation standard.
  • Consentement aux conditions : contribue à assurer la conformité en demandant aux utilisateurs d’accepter les conditions avant l’envoi.
  • Champ de saisie de texte : fournit un champ de saisie sur une seule ligne pour les réponses textuelles courtes.
  • Champ de saisie de l’heure : fournit un champ de saisie sur une seule ligne pour une heure de la journée, utile pour les formulaires de réservation et de planification.
  • Champ de site web : Fournit un champ de saisie sur une seule ligne pour l’URL du site web URL, utile pour recueillir des liens vers un site professionnel ou un blog.

Dans cette vidéo, vous verrez comment ajouter un champ déroulant à votre formulaire :

Limites des balises HTML

Pour des raisons de sécurité, toutes les balises HTML ne sont pas autorisées dans le bloc de formulaire. Voici quelques-unes des balises qui ne sont pas autorisées : 

  • header
  • embed
  • frame
  • iframe
  • form
  • input
  • object
  • textarea
  • script
  • style
  • link

Tirez parti de Jetpack AI pour créer votre propre formulaire

Les fonctionnalités des blocs de formulaire optimisées par Jetpack AI font partie de la suite Jetpack AI Assistant.

Jetpack AI offers you 20 free requests to get started. For more information about upgrading, please refer to our detailed Usage limitations and upgrades guide.

Comment utiliser Jetpack AI pour créer un formulaire

  1. Dans votre bloc de formulaire, trouvez le champ indiquant Demandez à Jetpack AI de créer votre formulaire. (Cliquez sur l’icône Étincelles ✨ dans la barre d’outils du bloc si vous ne la voyez pas).
  2. Rédigez une brève description des informations que vous souhaitez recueillir.
  3. Cliquez sur Générer.

Le bloc de formulaire sera maintenant prérempli avec les champs de formulaire appropriés.

Voici des exemples d’instructions que vous pouvez utiliser pour créer votre formulaire :

  • Ajoutez un formulaire d’inscription qui recueille le nom, l’adresse e-mail et le numéro de téléphone.
  • Créez un formulaire avec le nom et l’adresse e-mail et demandez également la taille de T-shirt, de S à XXL.

Vous pouvez également utiliser Jetpack AI pour modifier un formulaire existant, qu’il ait été créé initialement avec l’IA ou à partir d’un modèle. Par exemple :

  • Ajoutez un bloc pour recueillir des commentaires avec des options allant de mauvais à excellent.
  • Déplacez le champ du numéro de téléphone avant celui de l’adresse e-mail.
  • Rendez tous les champs obligatoires.

Dans cette vidéo, vous verrez l’intégration de formulaire de Jetpack AI en action :

Prévisualiser et tester un formulaire

Vous pouvez prévisualiser n’importe quel formulaire et envoyer des réponses de test afin de vérifier que tout fonctionne de bout en bout avant que les visiteurs ne l’utilisent. Les réponses de test sont suivies séparément des envois réels afin qu’elles ne se mélangent pas à vos données.

Pour obtenir des instructions détaillées, consultez Prévisualiser et tester un formulaire dans le guide de l’éditeur de formulaires.

Ajuster les réglages du bloc

Après avoir ajouté un bloc de formulaire, vous pouvez gérer ce qui se passe lorsqu’une personne remplit le formulaire :

Choisir où recevoir les notifications

Notifications par e-mail

L’adresse e-mail utilisée par défaut par un formulaire Jetpack est celle de l’administrateur du site (les réponses au formulaire sont envoyées par e-mail au destinataire de votre choix. Si vous n’en choisissez aucun, le destinataire est déterminé automatiquement en fonction de l’emplacement du formulaire sur votre site.

Pour définir un destinataire :

  1. Sélectionnez le bloc Formulaire et ouvrez Notifications du formulaire dans la barre latérale des réglages du bloc.
  2. Saisissez une adresse dans Envoyer les notifications par e-mail à.
  3. Pour notifier plusieurs personnes, séparez chaque adresse par une virgule.

Le champ est vide au départ et affiche une adresse grisée comme espace réservé. Cette adresse est celle à laquelle les réponses seront envoyées si vous laissez le champ vide. Il s’agit d’un aperçu du destinataire automatique, et non d’une valeur enregistrée.

Le texte d’aide situé sous le champ indique la règle appliquée :

  • Sur un article ou une page, les réponses sont envoyées à l’auteur de l’article.
  • Dans un widget, un modèle de bloc ou une partie de modèle, les réponses sont envoyées à l’adresse de l’administrateur de votre site, définie dans Réglages → Général → Adresse e-mail d’administration.
  • Dans l’éditeur de formulaires autonome, les réponses sont envoyées à l’auteur de la page sur laquelle le formulaire apparaît.

Sur un article ou une page, les réponses sont envoyées à l’auteur de l’article uniquement tant que celui-ci possède une adresse e-mail, est toujours membre de votre site et peut encore modifier l’article. Si l’une de ces conditions cesse d’être remplie, les réponses sont envoyées à l’adresse de l’administrateur de votre site.

La saisie d’une adresse l’enregistre dans le formulaire. Effacer le champ rétablit le destinataire automatique du formulaire.

Vous pouvez saisir l’adresse affichée comme espace réservé. En l’enregistrant, vous fixez l’envoi des réponses à cette adresse : elles continueront d’y être envoyées même si l’auteur de l’article change par la suite. Un champ vide suit l’identité de l’auteur de l’article à ce moment-là.

Si ce champ affichait auparavant une adresse et semble maintenant vide, votre formulaire n’a pas changé. Cette adresse n’a jamais été enregistrée dans votre formulaire : elle a toujours été déterminée automatiquement, et c’est encore le cas. Les réponses sont envoyées exactement au même endroit qu’auparavant.

Notifications push

Vous pouvez recevoir des notifications push pour les réponses au formulaire en sélectionnant l’Activer les notifications pour les réponses. Vous pouvez préciser quels utilisateurs connectés à Jetpack recevront les notifications.

Vous trouverez plus d’informations sur la configuration des notifications push dans Jetpack, notamment pour savoir si vous souhaitez les recevoir dans l’application Jetpack ou dans le navigateur.

Stockage des réponses

Vous pouvez choisir de ne pas enregistrer les envois de formulaires dans l’administration WordPress. Pour cela, accédez aux réglages du stockage des réponses dans le panneau du bloc Formulaire et désactivez le réglage, qui est activé par défaut.

Réglages de l’envoi

Le réglage Action après l’envoi contrôle ce que voit l’utilisateur après avoir envoyé le formulaire. Les options sont les suivantes :

  • Afficher un récapitulatif des champs envoyés, avec un titre de message personnalisable.
  • Afficher un message texte personnalisé.
  • Rediriger vers une autre page web.

Le récapitulatif affiche le titre que vous avez défini, chaque champ envoyé avec sa réponse et un bouton Retour qui ramène le visiteur à la page où se trouve le formulaire. Les réponses s’affichent selon le type de champ : les évaluations affichent des étoiles, les adresses de sites web deviennent des liens cliquables, les numéros de téléphone deviennent des liens permettant de lancer un appel, les fichiers envoyés affichent leur nom et leur taille, et les champs de sélection d’images affichent des miniatures.

Réglages de chaque champ du formulaire

Vous pouvez également personnaliser les réglages de chaque champ individuel du formulaire. Pour ce faire, cliquez sur le champ. Vous verrez les options suivantes :

  • Marquer le champ comme obligatoire
  • Modifier la largeur du champ du formulaire (les valeurs disponibles sont 25 %, 50 %, 75 % et 100 %)
  • Modifier la couleur d’arrière-plan (unie ou en dégradé) et la couleur du texte

Ajouter un texte d’aide à un champ

Le texte d’aide est une brève indication qui apparaît sous la saisie d’un champ dans votre formulaire publié. Utilisez-le pour expliquer ce qu’il faut saisir — par exemple, pourquoi vous demandez un numéro de téléphone ou ce que représentent les extrémités d’un curseur.

Les lecteurs d’écran annoncent le texte d’aide après le libellé du champ ; son ajout ne modifie donc pas le nom du champ.

Pour ajouter un texte d’aide à un champ :

  1. Sélectionnez le champ dans l’éditeur.
  2. Saisissez le texte dans l’espace réservé « Ajouter un texte d’aide… » qui apparaît sous le champ, ou ouvrez la barre latérale des réglages du bloc et saisissez votre texte dans la zone Texte d’aide, sous Réglages du champ.
  3. Cliquez Enregistrer ou Publier pour conserver vos modifications.

Les deux emplacements enregistrent le même texte, choisissez donc celui que vous préférez. Pour supprimer le texte d’aide, videz la zone.

Le texte d’aide est en texte brut. Il ne peut pas contenir de liens, de mise en forme en gras ou en italique, ni de sauts de ligne.

Ces champs prennent en charge le texte d’aide :

  • Saisie de texte
  • Nom
  • E-mail
  • Site web
  • Numéro de téléphone
  • Texte multiligne
  • Nombre
  • Sélecteur de date
  • Saisie de l’heure
  • Liste déroulante
  • Curseur

Ces champs ne prennent pas en charge le texte d’aide :

  • Évaluation
  • Choix multiple (cases à cocher)
  • Choix unique (boutons radio)
  • Consentement aux conditions
  • Téléversement de fichier
  • Masqué
  • Personnalisé HTML

Emplacement d’affichage du format de date

Le champ Sélecteur de date affiche le format attendu, par exemple AAAA-MM-JJ, sous le champ plutôt qu’à l’intérieur de son libellé. Dans les versions précédentes de Jetpack, le format était ajouté à la fin du libellé : un champ nommé « Anniversaire » affichait donc « Anniversaire (AAAA-MM-JJ) ». Le libellé correspond désormais uniquement au nom que vous avez donné au champ.

L’indication suit le réglage Format de date du champ : modifier le format modifie donc le texte situé sous le champ.

Si vous ajoutez un texte d’aide à un champ Sélecteur de date, le texte d’aide s’affiche en premier et le format le suit sur la même ligne.

Personnaliser le bouton d’envoi

Vous pouvez modifier les réglages suivants pour le bouton d’envoi :

  • Texte du bouton
  • Couleur du bouton (unie ou en dégradé)
  • Couleur du texte
  • Rayon de bordure
  • Largeur du bouton (25 %, 50 %, 75 %, 100 % ou une valeur personnalisée en pixels)
  • Alignement du bouton (aligné à gauche, à droite ou centré)

Personnaliser le champ Objet des e-mails de notification

Jetpack propose une option permettant de modifier l’objet de l’e-mail qui vous est envoyé après chaque envoi de formulaire. Vous pouvez ajouter des jetons dans le champ Objet, par exemple {city} et Jetpack remplacera le jeton par la valeur du champ de formulaire « Ville » (sans distinction entre majuscules et minuscules ; veillez simplement à ce que les mots correspondent).

Gestion des formulaires et des intégrations

Après avoir publié votre formulaire Jetpack, vous pourrez consulter et gérer les envois directement dans votre administration WP. Accédez simplement à Jetpack → Forms → Responses dans le menu de gauche.

Lorsque vous avez ouvert une réponse, les raccourcis clavier vous permettent de passer d’une réponse à l’autre et de les marquer comme indésirables ou de les mettre à la corbeille sans utiliser de souris.

Consultez Gestion des réponses et des intégrations des formulaires de contact pour obtenir la liste complète et découvrir d’autres fonctionnalités permettant de afficher, gérer et exporter les réponses de vos formulaires.

Bloc Formulaires en plusieurs étapes

Vous pouvez utiliser les formulaires en plusieurs étapes pour diviser un long formulaire en sections plus courtes et faciles à gérer, en guidant les visiteurs à chaque étape au lieu d’afficher tous les champs à la fois. Pour commencer un nouveau formulaire en plusieurs étapes, insérez le modèle Formulaire en plusieurs étapes. Vous pouvez également convertir un formulaire existant en formulaire en plusieurs étapes.

Vous pouvez accéder à sa page d’assistance dédiée pour en savoir plus sur sa configuration et sa personnalisation.

Still need help?

Please contact support. We’re happy to advise.

Informations sur la confidentialité

Le bloc Formulaire est activé par défaut. Vous pouvez le désactiver ou le réactiver à tout moment en suivant le guide permettant de contrôler les fonctionnalités de Jetpack sur une seule page.

Données utilisées
Propriétaires du site / Utilisateurs

Pour le suivi de l’activité (détaillé ci-dessous) : adresse IP, identifiant utilisateur WordPress.com, nom d’utilisateur WordPress.com, identifiant du site connecté à WordPress.com et URL, version de Jetpack, agent utilisateur, URL consultée, URL référente, horodatage de l’événement, langue du navigateur, code pays.
Visiteurs du site

Si Akismet est activé sur le site, les données envoyées par le formulaire de contact (adresse IP, agent utilisateur, adresse e-mail, URL du site et commentaire) sont transmises au service Akismet (également détenu par Automattic) pour vérification du spam. Les données effectivement envoyées sont stockées dans la base de données du site sur lequel elles ont été soumises et sont directement envoyées par e-mail au propriétaire du formulaire (c’est-à-dire l’auteur du site qui a publié la page sur laquelle se trouve le formulaire de contact). Cet e-mail contient l’adresse IP, l’horodatage, le nom, l’adresse e-mail, le site web et le message de l’expéditeur.

L’adresse IP est incluse à des fins de prévention des abus. Pour les sites utilisant Akismet, une protection adéquate contre le spam est obligatoire.
Activité suivie
Propriétaires du site / Utilisateurs

Nous suivons la date et l’utilisateur ayant activé ou désactivé la fonctionnalité, ainsi que les exportations de fichiers CSV ou de feuilles Google Sheets depuis la page des formulaires de commentaires.
Visiteurs du site

Aucune.
Données synchronisées (En savoir plus)
Propriétaires du site / Utilisateurs

Nous synchronisons une seule option qui indique si la fonctionnalité est activée.
Visiteurs du site

Nous synchronisons les données des articles et les métadonnées associées à l’envoi d’un formulaire de contact par un utilisateur. Si Akismet est activé sur le site, l’adresse IP et l’agent utilisateur initialement envoyés avec le commentaire sont également synchronisés, car ils sont stockés dans les métadonnées de la publication.

In this section