Se connecter

Styliser les formulaires WordPress avec les variables CSS Flow

Flow rend chaque formulaire à l’intérieur d’un Shadow DOM. L’interface utilise des composants Mantine et expose un ensemble de variables CSS que vous pouvez remplacer pour correspondre à votre identité visuelle.

Il existe trois façons de personnaliser le thème d’un formulaire :

  • Couleur primaire et palettes personnalisées - dans l’inspecteur du bloc Form, vous pouvez choisir une couleur primaire dans la palette Mantine, définir des nuances primaire claires/sombres et même fournir vos propres noms de couleur et valeurs hexadécimales. Le plugin génère des palettes à 10 nuances à partir de vos valeurs hexadécimales.

  • Mode de couleur - définissez le mode clair, sombre ou automatique (système). Le mode courant est transmis au Shadow DOM via un attribut data‑mantine‑color‑scheme.

  • Substitutions de thème - le bloc Form dispose d’une zone de texte Theme Overrides. Tout CSS que vous collez ici est injecté dans le Shadow DOM du formulaire. C’est l’endroit où remplacer les jetons de conception Mantine (--mantine‑…) ou les jetons spécifiques à Flow (--flow‑…).

En plus des jetons du wizard, Flow expose aussi une couche générique de jetons de blocs pour le reste des contrôles de formulaire. Cela offre aux clients une surface de remplacement stable pour les champs de saisie, radios, cases à cocher, curseurs, notations, champs PIN, fieldsets, blocs de repli et boutons d’action.

Pour les blocs d’affichage/contenu plus riches, Flow expose désormais aussi des jetons dédiés pour les citations, les marques/surlignages, les badges, les blocs de code, les nombres formatés, les spoilers, les images et les éléments de liste débordante.

Jetons de modale et de galerie en DOM léger​

Flow Modal et Flow Gallery ne s’affichent pas dans le shadow root du formulaire. Remplacez-les depuis le CSS de thème/page ordinaire à l’aide de .wps-flow-modal et .wps-flow-gallery, et non depuis une zone de texte Theme Overrides au niveau du formulaire.

Les jetons utiles du DOM léger incluent :

  • Coquille de modale : --wps-flow-modal-panel-background, --wps-flow-modal-content-background, --wps-flow-modal-panel-color, --wps-flow-modal-panel-shadow, --wps-flow-modal-backdrop-background
  • Chrome de modale : --wps-flow-modal-chrome-background, --wps-flow-modal-chrome-color
  • Galerie : --wps-flow-gallery-stage-background, --wps-flow-gallery-nav-background, --wps-flow-gallery-nav-color, --wps-flow-gallery-meta-color

Les wrappers des emplacements header/body/actions de la modale sont volontairement transparents. La surface défilable partagée est .wps-flow-modal__content, donc --wps-flow-modal-content-background est la bonne substitution lorsque vous voulez un arrière-plan de modale continu qui ne recouvrira pas les couches d’en-tête/pied de page collantes ni le bouton de fermeture. Le wrapper chrome en haut à droite reste lui-même transparent ; --wps-flow-modal-chrome-background et --wps-flow-modal-chrome-color s’appliquent aux boutons individuels de fermeture/plein écran afin que ces contrôles restent lisibles sur des médias sombres tout en gardant l’apparence d’actions distinctes.

.wps-flow-modal {
  --wps-flow-modal-panel-background: #ffffff;
  --wps-flow-modal-content-background: #ffffff;
  --wps-flow-modal-panel-color: #0f172a;
  --wps-flow-modal-chrome-background: #ffffff;
  --wps-flow-modal-chrome-color: #0f172a;
}

.wps-flow-gallery {
  --wps-flow-gallery-stage-background: #0f172a;
  --wps-flow-gallery-nav-background: rgba(15, 23, 42, 0.82);
  --wps-flow-gallery-nav-color: #ffffff;
  --wps-flow-gallery-meta-color: #e2e8f0;
}

Démarrage rapide​

Pour modifier les polices, les rayons et les couleurs d’accent dans tous les formulaires Flow de votre site, ajoutez ce qui suit au champ Theme Overrides de votre formulaire. Vous pouvez aussi définir ces règles globalement dans le CSS de votre thème à l’aide du sélecteur .smartcloud-flow-shadow-root.

/* Target the flow shadow root */
.smartcloud-flow-shadow-root {
  /* Default text styling */
  --mantine-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mantine-font-size-md: 16px;
  --mantine-line-height-md: 1.6;

  /* Radius and spacing */
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 1rem;

  /* Primary colour */
  --mantine-color-blue-6: #0ea5e9;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  /* Generic Flow fields */
  --flow-control-radius: 999px;
  --flow-control-border-color: var(--mantine-color-blue-3);
  --flow-submit-bg: var(--mantine-color-blue-filled);
  --flow-submit-color: white;
  --flow-fieldset-border: 1px solid var(--mantine-color-blue-2);
}

/* Wizard specific tweaks */
.flow-wizard-container {
  --flow-wizard-gap: 1.5rem;
  --flow-wizard-border-radius: var(--mantine-radius-md);
}

.flow-wizard-title {
  --flow-wizard-title-size: 1.5rem;
  --flow-wizard-title-weight: 700;
}

.flow-wizard-next-button {
  --flow-wizard-next-bg: var(--mantine-color-blue-filled);
  --flow-wizard-next-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
}

.flow-block__collapse {
  --flow-collapse-toggle-radius: 999px;
}

.flow-block__display-blockquote {
  --flow-blockquote-accent: var(--mantine-color-blue-6);
  --flow-blockquote-bg: color-mix(
    in srgb,
    var(--mantine-color-blue-6) 10%,
    white
  );
}

.flow-block__display-badge {
  --flow-badge-padding: 0.4rem 0.85rem;
}

.flow-block__table {
  --flow-table-header-bg: color-mix(in srgb, #0f172a 6%, white);
  --flow-table-border-color: color-mix(in srgb, #0f172a 14%, white);
}

.flow-block__timeline {
  --flow-timeline-accent: var(--mantine-color-blue-6);
}

.flow-block__overflow-list {
  --flow-overflow-item-bg: var(--mantine-color-blue-0);
}

Placez ce CSS dans le champ Theme Overrides pour voir les changements immédiatement. Utilisez vos propres noms et valeurs de couleur pour aligner le formulaire sur votre marque.

Jetons de conception Mantine​

Mantine expose de nombreuses variables CSS pour l’espacement, les rayons, la typographie, les couleurs, les ombres et les z-indices. Flow hérite de ces variables à l’intérieur de son Shadow DOM. Quelques jetons utiles :

  • Espacement : --mantine-spacing-xs, --mantine-spacing-sm, --mantine-spacing-md, --mantine-spacing-lg, --mantine-spacing-xl.
  • Rayon : --mantine-radius-xs, --mantine-radius-sm, --mantine-radius-md, --mantine-radius-lg, --mantine-radius-xl.
  • Polices et interlignes : --mantine-font-family, --mantine-font-size-sm, --mantine-font-size-md, --mantine-line-height-sm, --mantine-line-height-md.
  • Ombres : --mantine-shadow-xs, --mantine-shadow-sm, --mantine-shadow-md, etc.
  • Couleurs : --mantine-color-gray-0 … --mantine-color-gray-9, --mantine-color-blue-0 … --mantine-color-blue-9, ainsi que d’autres couleurs nommées. Lorsque vous choisissez une couleur primaire, les variables --mantine-primary-color-* sont mises à jour automatiquement.

Voir la liste des variables CSS Mantine pour une référence complète.

Jetons du wizard Flow​

Les formulaires multi-étapes de Flow utilisent un composant wizard. Vous pouvez personnaliser sa disposition et ses couleurs via des jetons --flow‑wizard‑…, ciblés sur l’élément pertinent. Les jetons importants incluent :

  • Conteneur : --flow-wizard-gap (espacement entre les sections), --flow-wizard-border-radius, --flow-wizard-padding.
  • En-tête : --flow-wizard-header-spacing, --flow-wizard-title-color, --flow-wizard-title-size, --flow-wizard-title-weight.
  • Progression : --flow-wizard-progress-margin, --flow-wizard-bar-height, --flow-wizard-bar-color, --flow-wizard-bar-bg.
  • Stepper : --flow-wizard-stepper-gap, --flow-wizard-numbers-gap, --flow-wizard-number-size, --flow-wizard-number-active-bg, --flow-wizard-number-inactive-bg, --flow-wizard-number-active-color, --flow-wizard-number-inactive-color.
  • Contenu d’étape : --flow-wizard-step-gap, --flow-wizard-step-padding, --flow-wizard-step-title-color, --flow-wizard-step-title-size, --flow-wizard-step-title-weight, --flow-wizard-step-desc-color, --flow-wizard-step-desc-size, --flow-wizard-fields-gap.
  • Contrôles : --flow-wizard-controls-gap, --flow-wizard-controls-margin, --flow-wizard-controls-padding, --flow-wizard-controls-border-top.
  • Boutons : --flow-wizard-prev-color, --flow-wizard-prev-bg, --flow-wizard-prev-border, --flow-wizard-next-color, --flow-wizard-next-bg.

Définissez ces variables dans votre CSS Theme Overrides pour ajuster l’apparence du wizard. Par exemple, pour agrandir les numéros d’étape et changer la couleur active :

.flow-wizard-step-number {
  --flow-wizard-number-size: 40px;
  --flow-wizard-number-active-bg: var(--mantine-color-green-6);
  --flow-wizard-number-active-color: white;
}

Jetons des champs Flow​

Les blocs Flow ordinaires exposent aussi des variables CSS afin que vous puissiez styliser les parties non liées au wizard avec la même approche basée sur des jetons.

  • Champs généraux : --flow-field-gap, --flow-field-padding, --flow-field-radius, --flow-field-bg, --flow-field-border, --flow-field-shadow.
  • Libellés et messages : --flow-field-label-color, --flow-field-label-size, --flow-field-label-weight, --flow-field-description-color, --flow-field-description-size, --flow-field-error-color, --flow-field-error-size, --flow-field-caption-color, --flow-field-caption-size.
  • Contrôles de type input : --flow-control-min-height, --flow-control-radius, --flow-control-bg, --flow-control-border-width, --flow-control-border-color, --flow-control-color, --flow-control-placeholder-color, --flow-control-padding-inline, --flow-control-padding-block, --flow-control-focus-border-color, --flow-control-focus-shadow, --flow-control-disabled-opacity.
  • Contrôles de choix : --flow-choice-size, --flow-choice-color, --flow-choice-label-color.
  • Curseurs : --flow-slider-track-size, --flow-slider-track-bg, --flow-slider-bar-color, --flow-slider-thumb-size, --flow-slider-thumb-bg, --flow-slider-thumb-border.
  • PIN et notation : --flow-pin-gap, --flow-pin-input-size, --flow-rating-size, --flow-rating-active-color, --flow-rating-inactive-color.
  • Fieldsets et blocs repliables : --flow-fieldset-border, --flow-fieldset-radius, --flow-fieldset-padding, --flow-fieldset-legend-color, --flow-collapse-toggle-bg, --flow-collapse-toggle-border, --flow-collapse-toggle-radius, --flow-collapse-toggle-padding, --flow-collapse-toggle-color.
  • Boutons d’action : --flow-action-button-radius, --flow-action-button-padding, --flow-submit-bg, --flow-submit-color, --flow-submit-border, --flow-save-draft-bg, --flow-save-draft-color, --flow-save-draft-border.
  • Blocs d’affichage / contenu : --flow-display-text-color, --flow-display-text-weight, --flow-display-text-line-height, --flow-display-title-color, --flow-display-title-weight, --flow-display-title-line-height, --flow-display-title-letter-spacing, --flow-blockquote-bg, --flow-blockquote-accent, --flow-blockquote-color, --flow-blockquote-radius, --flow-blockquote-padding, --flow-blockquote-gap, --flow-blockquote-border-width, --flow-blockquote-icon-size, --flow-blockquote-text-style, --flow-blockquote-cite-color, --flow-blockquote-cite-size, --flow-mark-bg, --flow-mark-color, --flow-mark-radius, --flow-mark-padding, --flow-highlight-bg, --flow-highlight-color, --flow-highlight-radius, --flow-highlight-padding, --flow-badge-padding, --flow-badge-circle-padding, --flow-badge-font-size, --flow-badge-font-weight, --flow-badge-letter-spacing, --flow-badge-text-transform, --flow-code-inline-bg, --flow-code-inline-color, --flow-code-block-bg, --flow-code-block-color, --flow-code-radius, --flow-code-padding, --flow-code-block-padding, --flow-number-color, --flow-number-weight, --flow-number-font-variant, --flow-spoiler-toggle-color, --flow-spoiler-content-color, --flow-image-radius, --flow-image-caption-color, --flow-image-caption-size, --flow-list-color, --flow-list-marker-color, --flow-list-padding-start, --flow-list-item-gap, --flow-table-color, --flow-table-border-color, --flow-table-cell-border-color, --flow-table-striped-bg, --flow-table-header-bg, --flow-table-header-color, --flow-table-header-weight, --flow-table-cell-color, --flow-table-caption-color, --flow-table-caption-padding-bottom, --flow-table-cell-padding-inline, --flow-table-cell-padding-block, --flow-timeline-color, --flow-timeline-gap, --flow-timeline-item-gap, --flow-timeline-content-gap, --flow-timeline-accent, --flow-timeline-line-opacity, --flow-timeline-bullet-color, --flow-timeline-bullet-weight, --flow-timeline-title-color, --flow-timeline-title-weight, --flow-overflow-item-bg, --flow-overflow-item-border, --flow-overflow-item-color, --flow-overflow-item-gap, --flow-overflow-item-radius, --flow-overflow-item-padding, --flow-overflow-item-shadow, --flow-overflow-summary-cursor, --flow-overflow-summary-font-weight, --flow-overflow-summary-letter-spacing.
  • Suggestions IA : --flow-ai-suggestions-border-thickness, --flow-ai-suggestions-border-stops, --flow-ai-suggestions-border-speed.
  • Métadonnées de soumission / aides à l’état de succès : --flow-submission-meta-bg, --flow-submission-meta-border, --flow-submission-meta-radius, --flow-submission-meta-padding, --flow-submission-meta-gap, --flow-submission-meta-label-color, --flow-submission-meta-value-color, --flow-submission-meta-value-font, --flow-submission-meta-copy-bg, --flow-submission-meta-copy-border, --flow-submission-meta-copy-color, --flow-submission-meta-shadow.

Ces jetons servent de valeurs par défaut de thème. Si un bloc définit explicitement une couleur, un rayon ou une propriété similaire dans l’éditeur, ce réglage propre au bloc peut toujours prendre le dessus sur le jeton.

Si vous voulez limiter les substitutions à un type de bloc précis, Flow ajoute des classes stables autour de chaque bloc runtime :

  • Blocs de type input : .flow-block__text, .flow-block__textarea, .flow-block__select, .flow-block__number, .flow-block__password, .flow-block__date
  • Blocs de choix : .flow-block__checkbox, .flow-block__radio, .flow-block__switch
  • Autres champs : .flow-block__pin, .flow-block__slider, .flow-block__rangeslider, .flow-block__rating, .flow-block__file, .flow-block__tags
  • Conteneurs et actions : .flow-block__fieldset, .flow-block__collapse, .flow-block__submit, .flow-block__save-draft
  • Blocs d’affichage/contenu : .flow-block__display-text, .flow-block__display-title, .flow-block__display-blockquote, .flow-block__display-mark, .flow-block__display-highlight, .flow-block__display-badge, .flow-block__display-code, .flow-block__display-number-formatter, .flow-block__display-spoiler, .flow-block__display-image, .flow-block__list, .flow-block__list-item, .flow-block__table, .flow-block__table-row, .flow-block__table-th, .flow-block__table-td, .flow-block__timeline, .flow-block__timeline-item, .flow-block__overflow-list, .flow-block__overflow-list-item
  • Surfaces IA et réponse : .flow-ai-suggestions, .flow-ai-suggestions-border, .flow-submission-meta

Ces wrappers .flow-block__* constituent la surface de thématisation stable. Le contrôle interactif Mantine ou le bouton se trouve souvent un niveau plus bas et consomme le jeton --flow-* à cet endroit, donc il vaut mieux définir les jetons sur le wrapper plutôt que cibler des classes utilitaires internes.

Les mises en page d’état de succès réutilisent les surfaces de style des boutons d’action et des métadonnées de soumission, de sorte que la plupart des thèmes d’écran de confirmation peuvent être gérés via les jetons de bouton d’action et les substitutions .flow-submission-meta plutôt que via des variables spécifiques supplémentaires à l’état de succès.

Par exemple, pour donner au bouton de soumission et aux champs PIN un style de marque plus affirmé :

.flow-block__submit {
  --flow-submit-bg: var(--mantine-color-green-6);
  --flow-submit-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
  --flow-control-radius: 12px;
}

Recettes de thème à copier-coller​

Ces préréglages sont un point de départ pour les projets clients. Collez-en un dans le champ Theme Overrides, puis ajustez les couleurs et les jetons d’espacement selon vos besoins.

SaaS arrondi​

À utiliser lorsque vous voulez un aspect d’application moderne et doux avec des contrôles arrondis et une action primaire plus marquée.

.smartcloud-flow-shadow-root {
  --mantine-font-family: Inter, system-ui, sans-serif;
  --mantine-radius-md: 14px;
  --mantine-spacing-md: 1rem;
  --mantine-color-blue-6: #2563eb;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  --flow-control-radius: 14px;
  --flow-control-border-color: var(--mantine-color-blue-2);
  --flow-control-focus-border-color: var(--mantine-color-blue-5);
  --flow-control-focus-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);

  --flow-submit-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --flow-submit-color: white;
  --flow-action-button-radius: 14px;

  --flow-wizard-number-active-bg: #2563eb;
  --flow-wizard-next-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
}

Minimal clinique​

À utiliser pour les formulaires médicaux, juridiques ou administratifs où la clarté compte davantage que l’expression de marque.

.smartcloud-flow-shadow-root {
  --mantine-font-family: system-ui, sans-serif;
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 0.875rem;

  --flow-field-gap: 0.375rem;
  --flow-control-radius: 6px;
  --flow-control-bg: #ffffff;
  --flow-control-border-color: #cbd5e1;
  --flow-control-focus-border-color: #0f172a;
  --flow-control-focus-shadow: 0 0 0 1px #0f172a;

  --flow-field-description-color: #475569;
  --flow-field-error-color: #b91c1c;

  --flow-fieldset-border: 1px solid #cbd5e1;
  --flow-collapse-toggle-border: 1px solid #cbd5e1;

  --flow-submit-bg: #0f172a;
  --flow-submit-color: #ffffff;
  --flow-save-draft-border: 1px solid #cbd5e1;
}

Marque forte​

À utiliser lorsque le formulaire doit porter visiblement la marque du client au lieu de se fondre dans le chrome de la page.

.smartcloud-flow-shadow-root {
  --mantine-font-family: "Space Grotesk", system-ui, sans-serif;
  --mantine-radius-md: 10px;
  --mantine-color-pink-6: #e11d48;
  --mantine-primary-color-filled: var(--mantine-color-pink-filled);

  --flow-control-radius: 10px;
  --flow-control-border-width: 2px;
  --flow-control-border-color: #fecdd3;
  --flow-control-focus-border-color: #e11d48;
  --flow-control-focus-shadow: 0 0 0 3px rgb(225 29 72 / 0.18);

  --flow-choice-color: #e11d48;
  --flow-slider-bar-color: #e11d48;
  --flow-slider-thumb-border: 2px solid #e11d48;
  --flow-rating-active-color: #e11d48;

  --flow-submit-bg: #e11d48;
  --flow-submit-color: #ffffff;

  --flow-wizard-number-active-bg: #e11d48;
  --flow-wizard-next-bg: #e11d48;
}

Contraste sombre​

À utiliser lorsque le formulaire se trouve dans une mise en page sombre et a besoin d’un contraste plus marqué sans devoir restyler manuellement chaque composant.

.smartcloud-flow-shadow-root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0f172a;
  --mantine-color-text: #e5e7eb;

  --flow-field-description-color: #94a3b8;
  --flow-control-bg: #111827;
  --flow-control-color: #f8fafc;
  --flow-control-border-color: #334155;
  --flow-control-placeholder-color: #64748b;
  --flow-control-focus-border-color: #38bdf8;
  --flow-control-focus-shadow: 0 0 0 3px rgb(56 189 248 / 0.18);

  --flow-fieldset-border: 1px solid #334155;
  --flow-collapse-toggle-bg: #111827;
  --flow-collapse-toggle-border: 1px solid #334155;

  --flow-submit-bg: #38bdf8;
  --flow-submit-color: #0f172a;
  --flow-save-draft-color: #e5e7eb;
  --flow-save-draft-border: 1px solid #475569;

  --flow-wizard-bar-bg: #334155;
  --flow-wizard-number-inactive-bg: #1e293b;
  --flow-wizard-number-inactive-color: #cbd5e1;
  --flow-wizard-next-bg: #38bdf8;
  --flow-wizard-next-color: #0f172a;
}

Bonnes pratiques​

  • Gardez vos substitutions de thème limitées à .smartcloud-flow-shadow-root afin qu’elles n’affectent que les interfaces Flow.
  • Utilisez les variables Mantine pour garantir la cohérence des couleurs et des espacements entre les modes clair et sombre.
  • Lorsque vous définissez des couleurs personnalisées via le champ Colours du bloc Form, choisissez des noms uniques (par exemple brand) et utilisez-les dans vos substitutions (--mantine-color-brand-6).
  • Testez vos substitutions en mode clair et en mode sombre. Utilisez l’attribut data-mantine-color-scheme sur .smartcloud-flow-shadow-root pour définir ou détecter le mode.