Avec Contact Form 7, suivant les situations, il est bien utile de personnaliser le style d’un seul formulaire. Il vous faudra identifier l’ID principal du formulaire à personnaliser et ajouter les règles CSS voulues.

Une fois le formulaire inséré sur la page, une div est créée avec un ID relatif au formulaire affiché.

Il faut récupérer l’ID pour pouvoir faire correspondre les différentes règles que vous voulez créer pour la modification.

Comment repéré l’ID du formulaire ?

En consultant le code source html de la page avec par exemple, la console développeur ou en affichant le code source.

L’ID est facilement identifiable et ressemble à ça : wpcf7-f592-o1

On devra donc ajouter les class css dans un fichier de style à inclure sur sa ou ses pages :

Pour cibler une balise « généraliste »

#wpcf7-f592-o1 input{
    padding: 15px;
}

Pour modifier et cibler une class existante

#wpcf7-f592-o1 .wpcf7-submit{
    padding: 15px;
    color: white;
    background-color:green;
}