Souhaitez-vous que le message de confirmation de votre formulaire corresponde à l'image 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 place 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 voudrez peut-être :
- Retirer complètement la coiffure pour un aspect plus net
- Changez les couleurs pour qu'elles correspondent à votre marque
- Modifier des éléments spécifiques tels que le rembourrage ou les bordures
- Appliquer un style personnalisé à des formulaires spécifiques uniquement
Personnalisation du message de confirmation
Explorons les différentes façons de modifier le style de votre message de confirmation. Si vous avez besoin d'aide pour ajouter des CSS personnalisés à votre site, veuillez consulter notre guide sur l'ajout de code personnalisé sur WordPress.
Suppression du 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 cette feuille de style CSS :
.wpforms-confirmation-container-full {
color: inherit !important;
margin: 0 !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
La feuille de style CSS ci-dessus permet de supprimer 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 avec l'identifiant 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'identifiant de votre formulaire, consultez notre tutoriel sur la recherche des identifiants de formulaires.
Modification des couleurs d'arrière-plan
Pour modifier 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 un texte blanc. Ajustez les codes de couleur (#333333 et #ffffff) pour obtenir les couleurs souhaitées.
Vous avez maintenant réussi à modifier le style du message de confirmation ! Ensuite, vous souhaitez apprendre à personnaliser d'autres éléments de formulaire ? Consultez notre guide sur la création de balises intelligentes personnalisées pour ajouter du contenu dynamique à vos formulaires.