Formaloo propose déjà de nombreuses options intégrées de style et de mise en page, souvent suffisantes pour publier un formulaire soigné et professionnel sans écrire de code.
Lorsque vous avez besoin de plus de précision, Custom CSS et Custom JavaScript vous permettent de styliser et de contrôler des parties spécifiques de votre formulaire, par exemple mettre en valeur un champ, placer automatiquement le curseur dans une zone de saisie ou déclencher une animation lorsqu’une question apparaît.
ℹ️ Inclus dans : tous les forfaits payants
Pour vous permettre de personnaliser chaque champ avec précision, Formaloo vous permet de cibler chaque champ à l’aide d’un ID de champ (Field ID). Vous pouvez ainsi appliquer des styles ou des comportements exactement au champ souhaité, même sur les formulaires multipages ou une question à la fois (1QAT) où les questions apparaissent étape par étape.
💡 Vous cherchez d’abord un style général ?
Consultez les options de design intégrées pour apprendre à ajuster les couleurs, les polices, les espacements et la mise en page à l’aide des options intégrées,
Consultez les extraits CSS les plus utilisés pour des exemples rapides,
Découvrez les noms de classes pris en charge que vous pouvez utiliser pour styliser des parties plus larges de votre formulaire.
ℹ️ Si vous devez uniquement styliser l’ensemble du formulaire ou un groupe de champs, les noms de classes pris en charge peuvent suffire. Si vous devez styliser ou contrôler des champs spécifiques, le ciblage au niveau du champ est la meilleure option.
Dans les sections ci-dessous, vous découvrirez le fonctionnement des ID de champ, leur utilisation dans Custom CSS et Custom JavaScript, et comment exécuter du code lorsque des champs deviennent visibles.
1. ID de champ : comment définir l’ID de champ (ou trouver le slug du champ)
Chaque champ de votre formulaire possède un ID stable exposé dans le HTML. Vous utilisez cet ID dans votre Custom CSS et votre Custom JS pour cibler ce champ sans dépendre de sélecteurs fragiles ou de la structure du DOM.
Si vous définissez un ID de champ (
alias) pour un champ dans l’éditeur de formulaire, c’est cette valeur qui est utilisée :
Sinon, c’est le
sluginterne du champ qui est utilisé :
Vous pouvez donc toujours compter sur une valeur unique et cohérente par champ.
ID spéciaux
Page d’accueil :
welcome_pagePage de confirmation/page de fin : utilise la même logique que les autres champs (alias ou slug du champ de la page de fin) :
2. Utiliser les ID de champ dans Custom CSS
Utilisez le sélecteur d’attribut [data-field-id="your_field_id"] dans votre Custom CSS.
Exemples :
Mettre en gras le libellé d’un champ spécifique :
[data-field-id="email"] label {
font-weight: bold;
}Ajouter une bordure à un champ spécifique :
[data-field-id="phone_number"] {
border: 2px solid #0066cc; border-radius: 8px; padding: 12px;
}Styliser la page d’accueil :
[data-field-id="welcome_page"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;
}
☝️ Remplacez "email", "phone_number" ou "welcome_page" par l’ID de champ réel (ou le slug) du champ à cibler.
3. Utiliser les ID de champ dans Custom JS
Utilisez document.querySelector('[data-field-id="your_field_id"]') pour obtenir l’élément DOM du champ.
Exemples :
Obtenir l’élément d’un champ :
const emailField = document.querySelector('[data-field-id="email"]'); if (emailField) {
emailField.classList.add('highlight');
}Placer le curseur dans un champ au chargement du formulaire :
const firstField = document.querySelector('[data-field-id="full_name"]');
if (firstField) {
const input = firstField.querySelector('input, textarea, select');
if (input) input.focus();
}
☝️ Vérifiez toujours que l’élément existe (par ex. if (emailField)) avant de l’utiliser. Sur les formulaires multipages ou 1QAT, un champ peut ne pas être présent dans le DOM tant que l’utilisateur n’a pas atteint sa page : utilisez dans ce cas l’événement de visibilité de champ (ci-dessous).
4. Événement de visibilité de champ : exécuter du JS lorsqu’un champ apparaît
Votre Custom JS s’exécute une seule fois au chargement du formulaire. Sur les formulaires multipages ou une question à la fois, les champs des pages suivantes ne sont pas présents dans le DOM au chargement. Si vous utilisez document.querySelector('[data-field-id="..."]') dans votre script initial, le résultat sera null pour ces champs jusqu’à ce que l’utilisateur y accède.
L’événement de visibilité de champ vous permet d’exécuter du code exactement au moment où un champ devient visible (par ex. lorsque l’utilisateur passe à la page ou à la question suivante).
Nom de l’événement
formaloo:field-visible
Quand il se déclenche
Lorsque l’utilisateur accède à une nouvelle page (formulaire multipage) et qu’un champ de cette page devient visible.
Lorsque l’utilisateur passe à la question suivante (formulaire 1QAT) et que le champ de cette question devient visible.
Vous pouvez ainsi exécuter votre code en toute sécurité pour un champ dès qu’il apparaît à l’écran.
Comment l’écouter
document.addEventListener('formaloo:field-visible', function (event) {
var fieldId = event.detail.fieldId;
var fieldElement = event.detail.fieldElement;
// Run your code for this field
if (fieldId === 'newsletter_signup') { fieldElement.classList.add('animate-in');
}
});
Détails de l’événement
Propriété | Description |
event.detail.fieldId | L’ID du champ (même valeur que data-field-id). |
event.detail.fieldElement | L’élément DOM du champ (le même que celui obtenu avec document.querySelector('[data-field-id="..."]')). |
Exemple : exécuter du code lorsqu’un champ spécifique devient visible
document.addEventListener('formaloo:field-visible', function (event) {
if (event.detail.fieldId === 'feedback_comment') {
var el = event.detail.fieldElement;
var textarea = el.querySelector('textarea');
if (textarea) {
textarea.placeholder = 'Tell us what you think...';
textarea.focus();
}
}
});
Exemple : exécuter du code pour chaque champ lorsqu’il apparaît
document.addEventListener('formaloo:field-visible', function (event) {
console.log('Field visible:', event.detail.fieldId);
// Optional: add a class, animate, or run analytics
event.detail.fieldElement.classList.add('field-visible');
});
5. Aide-mémoire
Objectif | Ce qu’il faut utiliser |
Styliser un champ spécifique dans Custom CSS | [data-field-id="your_field_id"] { ... } |
Obtenir l’élément d’un champ dans Custom JS (lorsqu’il est déjà sur la page) | document.querySelector('[data-field-id="your_field_id"]') |
Exécuter du JS lorsqu’un champ apparaît (multipage / 1QAT) | document.addEventListener('formaloo:field-visible', ...) et utilisez event.detail.fieldId et event.detail.fieldElement |
Styliser la page d’accueil | [data-field-id="welcome_page"] { ... } |
Utilisez l’ID de champ dans l’éditeur de formulaire pour choisir un identifiant lisible et stable pour vos champs, afin que votre Custom CSS et votre JS soient faciles à écrire et à maintenir.
6. Questions fréquentes
Qu’est-ce qu’un ID de champ dans Formaloo ?
Un ID de champ est l’identifiant que Formaloo ajoute à chaque champ dans le HTML du formulaire (sous la forme data-field-id). Vous pouvez l’utiliser pour cibler ce champ spécifique avec du CSS ou du JavaScript.
D’où provient l’ID de champ ?
Si vous définissez un ID de champ (alias) dans l’éditeur de formulaire, c’est cette valeur qui est utilisée. Sinon, Formaloo utilise le slug interne du champ.
Quand utiliser les ID de champ plutôt que les noms de classes ?
Utilisez les ID de champ lorsque vous souhaitez styliser ou contrôler un champ spécifique. Utilisez les noms de classes pris en charge lorsque vous souhaitez styliser de façon cohérente une partie plus large du formulaire ou plusieurs champs.
Cela fonctionne-t-il sur les formulaires multipages et 1QAT ?
Oui. Les ID de champ fonctionnent sur tous les types de formulaires. En JavaScript, les champs qui apparaissent plus tard ne sont pas dans le DOM au chargement initial : utilisez l’événement formaloo:field-visible pour exécuter du code lorsque le champ devient visible.
Pourquoi document.querySelector(...) renvoie-t-il null ?
Sur les formulaires multipages et 1QAT, le champ n’est peut-être pas encore affiché. Écoutez formaloo:field-visible et exécutez votre code lorsque le champ apparaît.
Puis-je cibler la page d’accueil ou la page de confirmation ?
Oui. La page d’accueil utilise welcome_page. La page de confirmation suit la même logique que les autres champs (son alias ou son slug).
Le Custom CSS/JS affecte-t-il les réponses enregistrées ?
Non. Le Custom CSS et le JavaScript modifient l’apparence et le comportement du formulaire pendant son remplissage. Ils ne modifient pas la façon dont les réponses sont enregistrées, sauf si votre JavaScript modifie explicitement des valeurs avant la soumission.
Cette fonctionnalité est-elle disponible sur tous les forfaits ?
Le ciblage des champs par ID de champ dans Custom CSS et Custom JavaScript est disponible sur tous les forfaits payants.