Personnalisez votre formulaire Jetpack

Personnalisez votre Jetpack Forms à l’aide des contrôles de bloc afin de refléter le design unique de votre site.

Une fois que vous avez ajouté un bloc de formulaire Jetpack à une page ou à une publication, vous pouvez affiner son apparence pour l’harmoniser avec le design de votre site. Ce guide explique comment contrôler la largeur des champs, modifier les couleurs, appliquer des styles personnalisés à certains champs et définir une apparence cohérente pour chaque formulaire de votre site.

Tutoriel vidéoMD

Cette vidéo explique comment gérer et styliser un formulaire créé avec Jetpack. Elle présente les étapes pour modifier l’apparence visuelle du formulaire, contrôler la largeur de chaque champ et configurer ce que les visiteurs voient après l’envoi.

Personnaliser votre formulaireMD

Ajuster les couleurs du formulaireMD

Vous pouvez modifier les couleurs de l’ensemble du formulaire depuis un seul endroit — inutile de modifier chaque champ séparément.

Pour modifier les couleurs générales du formulaire :

1. Cliquez sur le bord extérieur du bloc Formulaire dans l’éditeur pour sélectionner l’ensemble du formulaire plutôt qu’un champ à l’intérieur.
2. Dans la colonne latérale de droite, ouvrez le Réglages du bloc et cliquez sur l’onglet Styles — il s’agit de l’icône représentant un cercle partagé entre le noir et le blanc.
3. Ajustez la couleur du texte, la couleur d’arrière-plan et toutes les autres propriétés de couleur affichées.
4. Cliquez sur Enregistrer ou sur Mettre à jour en haut de l’éditeur pour appliquer vos modifications.

Ajouter une image d’arrière-plan à votre formulaireMD

Vous pouvez définir une image d’arrière-plan pour votre formulaire ou pour des blocs Étape:

1. Cliquez sur le bord extérieur du bloc Formulaire dans l’éditeur pour sélectionner l’ensemble du formulaire plutôt qu’un champ à l’intérieur.
2. Dans la colonne latérale de droite, ouvrez le Réglages du bloc et cliquez sur l’onglet Styles — il s’agit de l’icône représentant un cercle partagé entre le noir et le blanc.
3. Ajouter une image d’arrière-plan
4. Cliquez sur Enregistrer ou sur Mettre à jour en haut de l’éditeur pour appliquer vos modifications.

Définir un style uniforme pour tous les formulaires de votre siteMD

Si votre site WordPress utilise un thème basé sur des blocs, vous pouvez définir un style visuel unique qui s’appliquera à chaque formulaire que vous publierez — vous n’aurez ainsi pas à styliser chaque formulaire individuellement. Cette gestion s’effectue depuis le panneau Styles de l’Éditeur de site.

1. Dans votre tableau de bord WordPress, accédez à Apparence → Éditeur.
2. Dans la section Design du panneau de gauche, cliquez sur Styles.
3. En bas du panneau Styles, cliquez sur Blocs.
4. Recherchez Formulaire dans la liste des types de blocs, puis cliquez dessus.
5. Ajustez les paramètres de couleur, de typographie et d’espacement selon vos préférences.
6. Cliquez sur Enregistrer pour appliquer ces paramètres à l’ensemble du site. Tous les formulaires de votre site utiliseront désormais ce style.

📝 Remarque : l’Éditeur de site est disponible uniquement sur les sites WordPress utilisant un thème basé sur des blocs, également appelé thème d’édition complète du site. Si l’Éditeur n’apparaît pas sous Apparence dans votre tableau de bord, votre thème actif ne prend pas en charge cette fonctionnalité. En passant à un thème basé sur des blocs, vous pourrez l’utiliser.

Ajuster la largeur des champsMD

Chaque champ d’un bloc de formulaire Jetpack peut être affiché avec une largeur personnalisée. Vous pouvez ainsi organiser les champs côte à côte dans une disposition compacte ou les étendre pour remplir tout le conteneur.

Pour modifier la largeur d’un champ de formulaire :

1. Ouvrez la publication ou la page dans l’éditeur de blocs WordPress.
2. Cliquez sur le champ dont vous souhaitez ajuster la largeur.
3. Ouvrez le Réglages du bloc dans la colonne latérale de droite.
4. Faites défiler jusqu’au Largeur et sélectionnez 25%, 50%, 75%, ou 100%.

💡 Conseil : pour placer deux champs sur la même ligne, définissez chacun sur 50 %.

Appliquer des styles différents à des champs individuelsMD

Par défaut, tous les champs d’un formulaire partagent les mêmes paramètres de style. Si vous souhaitez qu’un champ spécifique ait une apparence différente des autres, vous pouvez le dissocier du groupe et le styliser séparément.

1. Utilisez le panneau Vue en liste (accessible depuis la barre d’outils de l’éditeur) pour localiser et sélectionner le champ spécifique que vous souhaitez personnaliser. Vous pouvez également cliquer directement sur le champ dans l’éditeur.
2. Dans la colonne latérale Réglages du bloc, recherchez l’option Synchroniser le style des champs et placez-la sur désactivé. Cela dissocie le style de ce champ de celui du reste du formulaire.
3. Cliquez sur le libellé ou sa zone de saisie, puis utilisez les commandes de la barre latérale pour définir une couleur, une police ou d’autres propriétés typographiques personnalisées pour cet élément.
4. Cliquez sur Enregistrer ou Mettre à jour pour appliquer vos modifications.

Guides associésMD

• Bloc de formulaire Jetpack — Vue d’ensemble de toutes les fonctionnalités, de tous les champs et de tous les réglages du bloc de formulaire Jetpack
• Éditeur de formulaires Jetpack — Créez et gérez des formulaires à l’aide de l’interface dédiée de création de formulaires
• Réponses aux formulaires et intégrations — Consultez, exportez et gérez les envois de vos formulaires

Besoin d’aide supplémentaire ?MD

Veuillez contacter l’assistance. Nous sommes heureux de vous conseiller.

Informations sur la confidentialitéMD

Le bloc de formulaire est activé par défaut. Il peut être désactivé/réactivé à tout moment en suivant le guide pour contrôler les fonctionnalités Jetpack sur une seule page.

Données utilisées
Propriétaires/utilisateurs du site Pour suivre l’activité (voir les détails 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 visité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, adresse du site URL et commentaire) sont transmises au service Akismet (également détenu par Automattic) pour vérifier la présence de spam. Les données effectivement envoyées sont stockées dans la base de données du site sur lequel elles ont été envoyées et sont directement transmises 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 la personne ayant envoyé le formulaire. L’adresse IP est incluse à des fins de prévention des abus. Pour les sites utilisant Akismet, il est nécessaire de fournir une protection efficace contre le spam.
Activité suivie
Propriétaires/utilisateurs du site 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 depuis la page des formulaires de commentaires.	Visiteurs du site Aucune.
Données synchronisées (En savoir plus)
Propriétaires/utilisateurs du site Nous synchronisons une seule option indiquant si la fonctionnalité est activée.	Visiteurs du site Nous synchronisons les données de publication et les métadonnées de publication 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 publication.