Concevoir votre formulaire de contact

Après avoir ajouté un formulaire de contact, vous pouvez personnaliser son apparence. Ce guide vous explique comment modifier le style, les couleurs et la mise en page des formulaires de votre site Web.

Le bloc Formulaire comprend différents styles de design parmi lesquels vous pouvez choisir :

1. Sélectionnez Vue en liste dans le coin supérieur gauche de l’éditeur. C’est l’icône qui ressemble à trois lignes horizontales superposées.
2. Localisez le bloc Formulaire ici et cliquez dessus :

3. Dans les réglages du bloc dans la colonne latérale droite, cliquez sur l’onglet Styles (représenté par une icône en forme de cercle noir et blanc) :

4. Choisissez un style :
   • Valeur par défaut affiche les noms des champs en dehors des champs d’entrée sans animation.
   • Animé affiche les noms des champs dans les champs de saisie, une brève animation, et met également en évidence le champ sur lequel le visiteur clique.
   • Contouré affiche les noms des champs dans les champs de saisie, une brève animation et un contour permanent autour du bloc de formulaire.
5. Cliquez sur le bouton « Enregistrer » en haut de l’écran.

Le texte indicatif est un exemple de texte qui peut apparaître dans un champ de formulaire avant que le visiteur ne clique dessus, puis disparaît lorsqu’il clique pour commencer à saisir son propre texte. Afficher à vos visiteurs un exemple du type de contenu que vous attendez d’eux dans le formulaire peut s’avérer utile.

Pour ajouter un texte indicatif à un formulaire de contact :

1. Cliquez sur n’importe quel champ de votre formulaire.
2. Ouvrez les réglages du bloc dans la colonne latérale.
3. Faites défiler vers le bas jusqu’au réglage « Texte indicatif ».
4. Saisissez votre texte indicatif dans la case prévue à cet effet. Il apparaîtra ensuite dans le champ du formulaire.
5. Cliquez sur le bouton « Enregistrer » en haut de l’écran.

Par défaut, les champs d’un formulaire rempliront la largeur du conteneur du formulaire. Vous pouvez modifier la largeur de chaque champ en procédant comme suit :

1. Cliquez sur n’importe quel champ de votre formulaire.
2. Ouvrez les réglages du bloc dans la colonne latérale.
3. Faites défiler la page jusqu’au réglage Largeur et définissez la largeur sur 25 %, 50 %, 75 % ou 100 %.
   • Si vous souhaitez que deux champs apparaissent côte à côte, définissez-les sur 50 %. Quand il y a de la place, plusieurs champs peuvent apparaître sur une même ligne.
4. Cliquez sur le bouton « Enregistrer » en haut de l’écran.

Vous pouvez choisir de modifier la façon dont la couleur et le texte apparaissent pour chaque champ de formulaire, ou vous pouvez les définir de sorte que chacun utilise les mêmes réglages de couleur et de texte.

Lorsque vous cliquez sur un champ de formulaire spécifique, les réglages du bloc incluent l’option « Synchroniser le style des champs ». Si cette option est ACTIVÉE, les modifications que vous apportez à ce champ affecteront tous les champs. Cliquez sur la position DÉSACTIVÉ si vous souhaitez modifier les réglages de ce champ uniquement :

Vous pouvez synchroniser les modifications suivantes dans tous les champs pour garantir une expérience visuelle cohérente dans l’ensemble de votre formulaire :

• Couleur : définit les couleurs pour :
  • Texte de libellé : le texte qui apparaît au-dessus du champ du formulaire.
  • Texte de champ : le texte indicatif (facultatif), ainsi que le texte saisi dans un champ.
  • Arrière-plan des champs : l’arrière-plan de la section de saisie d’un champ de formulaire.
  • Bordure : la bordure autour du champ de formulaire.
• Styles des champs de saisie : définissez la taille du texte, la hauteur de la ligne et les styles de bordure du champ.
• Styles de libellé : définissez la taille du texte et la hauteur de ligne des libellés de champ.

Pour ajuster les couleurs de votre formulaire, procédez comme suit :

1. Ouvrez la vue en liste et recherchez le bloc Formulaire et les champs individuels qu’il contient :

2. Une fois le bloc Formulaire global sélectionné, ouvrez les réglages du bloc dans la colonne latérale, puis cliquez sur l’onglet Styles (l’icône en forme de cercle noir et blanc).
3. À l’aide des réglages de couleur, vous pouvez contrôler la couleur du texte du formulaire, la couleur d’arrière-plan et la couleur des liens utilisés dans le formulaire :

4. Ensuite, cliquez sur un champ de formulaire spécifique et ouvrez à nouveau les réglages du bloc.
5. Ici, vous pouvez contrôler les couleurs suivantes pour chaque champ de formulaire :
   • Texte de libellé : le texte qui apparaît au-dessus du champ du formulaire.
   • Texte de champ : le texte indicatif (facultatif), ainsi que le texte saisi dans un champ.
   • Arrière-plan des champs : l’arrière-plan de la section de saisie d’un champ de formulaire.
   • Bordure : la bordure autour du champ de formulaire.
6. Activez l’option « Synchroniser le style des champs » pour appliquer vos modifications à tous les champs ou désactivez-la pour contrôler chaque champ individuellement.
7. Cliquez sur le bouton « Enregistrer » en haut de l’écran.