Guide pratique : Personnaliser vos formulaires Webmecanik en CSS 🎨 – Webmecanik

Pour harmoniser vos formulaires avec votre identité visuelle sans passer des heures sur chaque configuration, le plus simple est d'intégrer vos règles directement dans la feuille de style de votre site (fichier CSS du thème ou espace « CSS personnalisé » de votre CMS) 💡.

Tous les formulaires Webmecanik partagent la même nomenclature de classes. Une seule modification s'applique donc partout, automatiquement ✨ !

1. Les sélecteurs clés à connaître 📌

Voici la structure des classes standards générées par l'outil :

Élément du formulaire	Classe CSS à cibler	Rôle
Conteneur global	`.mauticform_wrapper`	Largeur maximale, marges externes, fond du bloc
Ligne de champ	`.mauticform-row`	Espacement vertical entre chaque question
Libellés (Labels)	`.mauticform-label`	Typographie, graisse et couleur des titres de champs
Champs de saisie	`.mauticform-input`, `.mauticform-selectbox`, `.mauticform-textarea`	Bordures, arrondis, rembourrage intérieur (padding)
Cases à cocher	`.mauticform-checkboxgrp-row`, `.mauticform-checkboxgrp-label`	Alignement du texte et de la coche
Bouton d'envoi	`.mauticform-button`	Couleur de fond, texte, survol et taille
Messages d'erreur	`.mauticform-errormsg`, `.mauticform-error`	Alertes sous les champs ou en haut de page

2. Modèle CSS prêt à l'emploi 🛠️

Vous pouvez copier ce bloc, l'ajouter à votre site et ajuster simplement les valeurs (couleurs hexadécimales, typographies, arrondis) selon votre charte graphique :

CSS

/* --- 1. Conteneur principal --- */
.mauticform_wrapper {
    max-width: 580px;
    margin: 20px auto;
    font-family: inherit; /* Reprend la police de votre site */
}

/* --- 2. Libellés des champs (Labels) --- */
.mauticform_wrapper .mauticform-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

/* Astérisque des champs obligatoires */
.mauticform_wrapper .mauticform-required .mauticform-label:after {
    color: #e74c3c;
    content: " *";
}

/* --- 3. Champs de saisie, listes et zones de texte --- */
.mauticform_wrapper .mauticform-input,
.mauticform_wrapper .mauticform-selectbox,
.mauticform_wrapper .mauticform-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au focus (quand l'internaute clique dans le champ) */
.mauticform_wrapper .mauticform-input:focus,
.mauticform_wrapper .mauticform-selectbox:focus,
.mauticform_wrapper .mauticform-textarea:focus {
    outline: none;
    border-color: #0073aa; /* Remplacez par votre couleur principale */
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

/* --- 4. Cases à cocher (Consentement RGPD & Choix) --- */
.mauticform_wrapper .mauticform-checkboxgrp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mauticform_wrapper .mauticform-checkboxgrp-label {
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    cursor: pointer;
}

/* Texte libre / Mention RGPD */
.mauticform_wrapper .mauticform-freetext p {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.4;
    margin-top: 5px;
}

/* --- 5. Bouton de soumission --- */
.mauticform_wrapper .mauticform-button-wrapper {
    margin-top: 20px;
}

.mauticform_wrapper .mauticform-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background-color: #0073aa; /* Couleur d'action principale */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Survol du bouton */
.mauticform_wrapper .mauticform-button:hover {
    background-color: #005a87;
    transform: translateY(-1px);
}

/* Bouton au clic */
.mauticform_wrapper .mauticform-button:active {
    transform: translateY(0);
}

/* --- 6. Messages de validation et erreurs --- */
.mauticform_wrapper .mauticform-errormsg {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.mauticform_wrapper .mauticform-message {
    padding: 12px;
    background-color: #e8f8f0;
    border: 1px solid #2ecc71;
    color: #27ae60;
    border-radius: 6px;
    margin-bottom: 15px;
}

3. Trois astuces pour une intégration sereine 🚀

Préfixez toujours avec .mauticform_wrapper : cela donne un poids suffisant à vos règles pour qu'elles prennent le pas sur les styles par défaut injectés par le script sans avoir besoin d'abuser de la directive !important 🛡️.
Ciblez un seul formulaire si besoin : chaque formulaire possède un identifiant unique (par exemple #mauticform_wrapper_privatehirefr). Si vous souhaitez un style particulier sur une page unique, remplacez simplement .mauticform_wrapper par cet identifiant précis 🎯.
Pensez au responsive : les champs sont paramétrés à width: 100%, ce qui garantit une adaptation immédiate aux écrans mobiles et tablettes sans effort supplémentaire 📱.

1. Les sélecteurs clés à connaître 📌

2. Modèle CSS prêt à l'emploi 🛠️

3. Trois astuces pour une intégration sereine 🚀

Articles associés