# Blocs de contenu et mise en forme

Ajoutez du texte enrichi, des images, des vidéos, des intégrations et des tableaux à votre formulaire.

## Blocs de contenu et mise en forme

Les formulaires ne sont pas que des questions. Utilisez les blocs de contenu pour ajouter du contexte, une identité visuelle et des médias enrichis entre les champs.

<h2 id="available-blocks">Blocs disponibles</h2>
<p>
  Tapez <kbd>/</kbd> sur le canevas (ou appuyez sur <kbd>Cmd/Ctrl + /</kbd>) pour ouvrir le menu du bloc, puis choisissez un bloc. Les blocs
  de contenu se placent à côté des questions et peuvent être réordonnés par glisser-déposer. Paragraphe est le bloc par défaut — tapez
  simplement sur le canevas ; il n’a pas d’entrée de menu.
</p>

<p>
  Une image comporte une légende facultative (<strong>Ajouter une légende</strong> dans le menu du bloc) et un sous-menu{' '}
  <strong>Aligner</strong> avec Gauche, Centre et Droite. <strong>Remplacer l’image</strong> change le fichier sans perdre la légende.
</p>

<h2 id="embeds">Intégrations</h2>
<p>
  Trois blocs d’intégration se trouvent sous <strong>Médias</strong>. Chacun démarre vide ; ouvrez son menu du bloc pour le remplir.
</p>

<h2 id="text-formatting">Mise en forme du texte</h2>
<p>
  Sélectionnez du texte dans un paragraphe, un titre, un élément de liste ou une cellule de tableau pour afficher la barre d’outils
  flottante :
</p>
<ul>
  <li>
    <strong>Gras</strong> (<kbd>Cmd/Ctrl + B</kbd>), <em>italique</em> (<kbd>+ I</kbd>), souligné (<kbd>+ U</kbd>), barré (<kbd>+ S</kbd>)
  </li>
  <li>Code en ligne et équation (LaTeX)</li>
  <li>
    Lien — le bouton de la barre d’outils ou <kbd>Cmd/Ctrl + K</kbd> avec du texte sélectionné
  </li>
  <li>Police et taille de police</li>
  <li>
    Couleur — un seul menu avec une ligne <strong>Surbrillance</strong> et une ligne <strong>Soulignement</strong>, chacune proposant
    Défaut, Bleu, Vert, Jaune et Rouge
  </li>
</ul>
<p>Les titres et les listes s’insèrent depuis le menu du bloc, pas depuis la barre d’outils flottante.</p>

<h2 id="tables">Tableaux</h2>
<p>
  Insérez un <strong>Tableau</strong> depuis le menu du bloc. Les tableaux sont statiques — les répondants peuvent les lire mais ne peuvent
  pas modifier les cellules. Idéal pour les grilles de tarifs ou les données de référence.
</p>
<p>
  Cliquez sur n’importe quelle cellule pour la modifier. Survolez une ligne ou une colonne pour révéler sa poignée, puis cliquez sur la
  poignée pour accéder à ses actions :
</p>
<ul>
  <li>
    <strong>Ajouter une ligne au-dessus</strong> / <strong>Ajouter une ligne en dessous</strong>,{' '}
    <strong>Ajouter une colonne à gauche</strong> / <strong>Ajouter une colonne à droite</strong>
  </li>
  <li>
    <strong>Dupliquer la ligne</strong> / <strong>Dupliquer la colonne</strong>
  </li>
  <li>
    <strong>Supprimer la ligne</strong> / <strong>Supprimer la colonne</strong>
  </li>
</ul>
<p>
  Faites glisser la même poignée pour réorganiser une ligne ou une colonne. Faites glisser la bordure entre deux cellules pour
  redimensionner ; le premier glissement fige les largeurs actuelles, afin que le tableau conserve les proportions que vous avez vues. Les
  cellules prennent en charge la même mise en forme en ligne que les paragraphes — gras, italique, liens et insertion de réponses avec les
  mentions <kbd>@</kbd>.
</p>

<h2 id="piping">Insertion de réponses dans le contenu</h2>
<p>
  Les blocs de contenu prennent en charge l’insertion de réponses. Tapez <strong>@</strong> dans n’importe quel paragraphe, titre ou élément
  de liste pour ouvrir le menu de mentions et insérer une référence à un champ. Par exemple, un titre qui indique "Merci,{' '}
  <strong>@Prénom</strong>" affiche le vrai prénom du répondant lorsqu’il remplit le formulaire. Consultez{' '}
  <a href="/fr/building-forms/answer-piping">Insertion de réponses</a> pour le guide complet.
</p>

<h2 id="examples">Exemples courants</h2>
<ul>
  <li>
    <strong>Formulaire de candidature</strong> — un Titre introduit chaque section ("Informations personnelles", "Expérience
    professionnelle"), des Paragraphes expliquent quoi remplir, et un bloc Image montre un exemple de mise en page de CV
  </li>
  <li>
    <strong>Inscription à un événement</strong> — une intégration YouTube montre la bande-annonce de l’événement, une intégration Google
    Maps indique le lieu, et un Tableau liste le programme
  </li>
  <li>
    <strong>Commande de produit</strong> — Single Picture Choice pour la sélection du produit, une mise en page en 2 colonnes place la
    quantité et la taille côte à côte, et un Paragraphe en dessous affiche les conditions générales
  </li>
  <li>
    <strong>Confirmation personnalisée</strong> — sur la page de remerciement, un Titre indique "Merci, <strong>@Nom</strong> !" et un
    Paragraphe insère <strong>@Total de la commande</strong> depuis un champ calculé
  </li>
</ul>

> 💡 **Ne surchargez pas**
> <p>
>     Les médias lourds ralentissent le chargement du formulaire. Utilisez les intégrations uniquement lorsqu’elles aident directement le
>     répondant — une courte vidéo explicative, une carte montrant votre emplacement.
>   </p>

<h2 id="next-steps">Prochaines étapes</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Règles de validation](/fr/building-forms/field-configuration#validation-rules) — Obligatoire, min/max, motifs et contraintes
  - [Logique conditionnelle](/fr/building-forms/conditional-logic) — Afficher ou masquer des blocs selon les réponses
  - [Insertion de réponses](/fr/building-forms/answer-piping) — Référencer des réponses avec les mentions @
  - [Apparence et thèmes](/fr/branding-domains/appearance-theming) — Thème, couverture, logo, mode sombre
</div>