Reprendre le design de BrandStudio
Chaque nouveau formulaire reprend les couleurs et la police de votre marque depuis BrandStudio — y compris un formulaire créé à partir d’un modèle ou par Kenji. À l’étape « Design », la carte « Marque » en haut contient pour cela l’interrupteur « Reprendre le design de BrandStudio ». Tant qu’il est activé, les réglages en dessous sont verrouillés ; si vous modifiez quelque chose dans BrandStudio, le formulaire suit automatiquement.
Si vous désactivez l’interrupteur, le formulaire conserve son apparence actuelle et vous le personnalisez vous-même à partir de là ; la carte affiche « design propre ». Si vous le réactivez, il suit à nouveau la marque — votre design propre est mis de côté, et « Annuler : design propre du … » le restaure. Si votre marque n’a pas encore de couleurs, c’est d’ici là le thème sobre qui s’applique, avec la police de la marque.
La carte « Marque » n’apparaît que si votre compte possède une marque. L’interrupteur agit immédiatement, sans « Enregistrer ».
- Ouvrez le formulaire à l’étape « Design ».
- Désactivez « Reprendre le design de BrandStudio » si vous voulez personnaliser le design vous-même.
- Réglez les couleurs, la police et les champs, puis cliquez sur « Enregistrer ».
Logo et données de l’entreprise
Avec « Afficher le logo et les données de l’entreprise de la marque » dans la même carte, le logo et le nom de votre marque s’affichent au-dessus du formulaire, et en dessous le nom de l’entreprise, l’e-mail, le téléphone, le site web et les icônes de vos comptes sur les réseaux sociaux que vous avez enregistrés dans SocialStudio. La notification, la copie et la copie PDF portent les mêmes informations, et le titre de la page dans le navigateur devient alors par exemple « Réserver une table · Café Lumen ».
L’interrupteur est activé par défaut et ne dépend pas du design : même si vous personnalisez le design vous-même, votre logo reste affiché. S’il manque des données d’entreprise à la marque, le formulaire utilise l’expéditeur de Invoice. Le réglage s’applique après « Enregistrer » ; « Aperçu dans le navigateur » vous montre le rendu.
- Ouvrez l’étape « Design ».
- Dans la carte « Marque », activez ou désactivez « Afficher le logo et les données de l’entreprise de la marque ».
- Cliquez sur « Enregistrer » et vérifiez le résultat avec « Aperçu dans le navigateur ».
Ambiances et couleurs
Si vous personnalisez le design vous-même, un clic sous « Ambiances » règle tout d’un coup : Sobre, Minuit, Sauge, Sable, Rose, Océan, Encre ou Ciel. Ensuite, vous affinez les couleurs une par une sous « Couleurs » : « Arrière-plan », « Carte » — la surface sur laquelle se trouvent les champs —, « Couleur du texte » et « Boutons et accent ».
« Arrière-plan » et « Carte » disposent en plus du curseur « Opacité », pour qu’une image d’arrière-plan puisse transparaître. Le texte et l’accent restent entièrement opaques : un texte semi-transparent dépendrait de ce qui se trouve dessous et pourrait devenir illisible sans qu’on s’en aperçoive. Choisissez une couleur de texte et une couleur de carte nettement différentes — ce sont elles qui assurent la lisibilité de votre formulaire.
- À l’étape « Design », désactivez la reprise depuis BrandStudio.
- Cliquez sur une ambiance, par exemple « Sable ».
- Ajustez certaines couleurs et l’opacité, puis cliquez sur « Enregistrer ».
Police
Sous « Police », vous choisissez l’une des onze polices libres — « Système », Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope ou IBM Plex Mono. L’aperçu l’affiche immédiatement.
Vous téléversez votre propre police sous forme de fichier : « Téléverser votre fichier de police (woff2, 2 Mo max.) ». Le nom du fichier devient son nom, et « Retirer » la retire. Si votre police est hébergée par un service de polices, ouvrez « Police personnalisée via un lien » et saisissez le lien vers le fichier CSS (https) ainsi que le nom de la famille de police — l’aperçu montre si les deux correspondent. La police est alors chargée depuis l’endroit vers lequel pointe le lien. Un fichier téléversé a priorité sur le lien et sur la sélection.
- À l’étape « Design », désactivez la reprise depuis BrandStudio.
- Choisissez une police sous « Police » — ou téléversez un fichier woff2.
- Cliquez sur « Enregistrer ».
Style des champs et arrondi
Sous « Champs », vous définissez l’apparence des champs de saisie : « Bordure » avec un contour fin, « Surface » avec un fond légèrement teinté ou « Ligne » avec une simple ligne de base — la forme la plus sobre. Le curseur « Arrondi » rend la carte, les champs et les boutons plus anguleux ou plus arrondis.
Comme tous les réglages de cette étape, cela ne fonctionne que si vous avez désactivé la reprise depuis BrandStudio, et s’applique après « Enregistrer ».
Image d'arrière-plan
Une image peut se trouver derrière la carte. Sous « Image d'arrière-plan », trois sources sont disponibles : votre propre fichier (PNG, JPEG ou WebP jusqu’à 3 Mo), la recherche « Ou chercher des images libres … » et « Ou choisir parmi mes images » depuis votre MediaStudio. Dans tous les cas, l’image est copiée dans votre formulaire et servie depuis votre adresse — aucun service tiers n’intervient.
La carte avec les champs reste lisible par-dessus ; la part de l’image qui transparaît se règle avec l’opacité de « Carte ». « Retirer l'image » la retire. Une image choisie est enregistrée immédiatement. Le téléversement, la recherche et votre propre bibliothèque sont verrouillés tant que le formulaire suit votre marque.
- À l’étape « Design », désactivez la reprise depuis BrandStudio.
- Sous « Image d'arrière-plan », tapez un mot comme « café » et cliquez sur « Rechercher ».
- Cliquez sur une image — elle se place immédiatement derrière le formulaire.
Aperçu et test
Au centre de « Design », votre formulaire s’affiche tel que vos clients le voient — avec les mêmes couleurs, polices et rangées que sur la page de saisie. « Ordinateur », « Tablette » et « Téléphone » changent la largeur ; en largeur téléphone, les rangées passent les unes sous les autres, exactement comme chez le client. À gauche se trouve la structure : un clic sur un champ vous amène à « Construire », avec ce champ déjà sélectionné.
« Tester » rend l’aperçu remplissable : les conditions s’appliquent et rien n’est enregistré. « Aperçu » vous ramène au mode précédent. « Aperçu dans le navigateur » enregistre d’abord, puis ouvre la vraie page de saisie dans un nouvel onglet — vous y voyez aussi le logo et les données de l’entreprise, le prix indicatif et le total de la commande. Cela fonctionne même tant que le formulaire est encore fermé ; un bandeau en haut indique « Aperçu », et rien n’y est envoyé.
À l’étape « Construire », le formulaire est volontairement affiché de façon neutre ; c’est cette étape-ci qui montre son apparence.
- Ouvrez l’étape « Design » et choisissez « Téléphone ».
- Cliquez sur « Tester » et remplissez le formulaire à titre d’essai.
- Cliquez sur « Aperçu dans le navigateur » pour voir la vraie page.