Styliser la boîte de message de confirmation

Souhaitez-vous que le message de confirmation de votre formulaire corresponde à l'apparence de votre marque ? Par défaut, WPForms affiche les soumissions réussies dans une boîte verte, mais vous pouvez facilement modifier ce style ou le supprimer complètement avec un simple code CSS.

Ce guide vous montrera comment personnaliser le style de votre message de confirmation pour créer une expérience de formulaire plus cohérente.

Comprendre le style par défaut

WPForms encapsule automatiquement les messages de soumission de formulaire réussis dans une boîte verte avec un rembourrage et des bordures spécifiques. Bien que cela fonctionne bien pour de nombreux sites, vous pourriez vouloir :

• Supprimer complètement le style pour un look plus épuré
• Changer les couleurs pour correspondre à votre marque
• Modifier des éléments spécifiques comme le rembourrage ou les bordures
• Appliquer un style personnalisé à des formulaires spécifiques uniquement

Personnaliser le message de confirmation

Explorons différentes façons de modifier le style de votre message de confirmation. Si vous avez besoin d'aide pour ajouter du CSS personnalisé à votre site, veuillez consulter notre guide sur l'ajout de code personnalisé à WordPress.

Supprimer le style d'arrière-plan pour tous les formulaires

Pour supprimer complètement le style vert par défaut de tous les messages de confirmation de formulaire, ajoutez ce CSS :

.wpforms-confirmation-container-full {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Avec le CSS montré ci-dessus, il supprime la couleur d'arrière-plan et la bordure du message de confirmation.

Personnalisation pour des formulaires spécifiques

Pour modifier le message de confirmation d'un seul formulaire, utilisez ce CSS (remplacez 1000 par l'ID de votre formulaire) :

div#wpforms-confirmation-1000 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez notre tutoriel sur comment trouver les ID de formulaire.

Changer les couleurs d'arrière-plan

Pour changer la couleur d'arrière-plan du message de confirmation pour tous les formulaires :

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

Cet exemple crée un arrière-plan sombre avec du texte blanc. Ajustez les codes de couleur (#333333 et #ffffff) pour correspondre aux couleurs souhaitées.

Et maintenant, vous avez ajusté avec succès le style du message de confirmation ! Ensuite, souhaitez-vous en savoir plus sur la façon de personnaliser d'autres éléments du formulaire ? Consultez notre guide sur la création de balises intelligentes personnalisées pour ajouter du contenu dynamique à vos formulaires.