Styliser les alertes de Contact Form 7 avec Bootstrap 4

contact form 7 header

Un Snippet simple a utiliser en SCSS

Vous avez peut-être été confronté a ce détail : Les alertes du plugin Wordpress "Contact Form 7" ont un style assez.... singulier. Des solutions éxistent déjà sur le net, mais ce genre de technique qui consiste a ajouter une surcouche de Javascript quand c'est inutile me donne la nausée.

Voici un snippet a réutiliser en SCSS, où bien a réadapter en LESS afin de leur donner le styles de alertes de Bootstrap. Libre a vous de le modifier ensuite.

NB : Vous constaterez que je fait directement des "extends" des classes d'alertes de Bootstrap 4 (version SASS), il faut donc bien penser a importer les fichiers Bootstrap comme il se doit en amont. Une adaptation pour Bootstrap 3 ne devrait pas vous poser trop de problèmes, à la différence que Bootstrap 3 utilise LESS, néanmoins, l'idée reste la même.

                                
                                    div.wpcf7-response-output {
  @extend .alert;
}

div.wpcf7-mail-sent-ok {
  @extend .alert-success;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
  @extend .alert-warning;
}

div.wpcf7-spam-blocked {
  @extend .alert-warning;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
  @extend .alert-danger;
}
                                
                            

Voir également

blog comments powered by Disqus

Licence Creative Commons Cet article est mis à disposition sous Licence Creative Commons Attribution - Partage dans les mêmes Conditions 4.0 International.