Comment formater un formulaire Contact Form 7 dans Divi

Souvent, ces types de pages contiennent de nombreux petits détails à couvrir, tels que la manière dont les produits peuvent être filtrés dans le moteur de recherche ou les conceptions publicitaires associées.

Cela dit, nous pouvons nous rendre compte lorsque le niveau de détail à couvrir au sein de notre propre sites web. Cependant, tout dépend du niveau de la créativité que nous pourrions être amenés à utiliser sur notre site Web. Car, avant cela, nous allons vous parler d'un petit détail que vous pourrez aborder en quelques minutes, et c'est le Formulaire de contact 7.

ContactForm 7 est l'un des plugins de formulaire les plus utilisés par utilisateurs de différentes pages Web. En effet, il s'agit d'un moyen très efficace pour nos visiteurs d'interagir avec nous via une page de contact ou un autre emplacement.

Mais vous avez le petit détail qu'il s'avère souvent être un plugin d'enquête assez basique, au point que beaucoup considèrent son apparence assez. désagréable. C'est pourquoi nous devons réfléchir à de meilleures façons d'adapter ce plugin populaire à notre thème.

Avec ce dernier à l'esprit, nous pouvons mentionner Divi comme l'un des thèmes les plus populaires dans WordPress et pour son esthétique. C'est vraiment cool à voir. Pour cette raison, il peut être un peu ennuyeux à utiliser Formulaire de contact 7 au sein d'une page web avec Divi, car les deux styles ne correspondent pas.

C'est pourquoi nous devons formater ContactForm 7 afin qu'il puisse être vu dans le même sens esthétique que Divi. Voyez ci-dessous comment vous pouvez le faire.

Personnalisation de ContactForm 7 pour Divi

En fait, être capable d'utiliser ContactForm 7 est une bénédiction quand on veut recevoir un message de nos visiteurs et pouvoir interagir avec eux si on le souhaite. Mais si nous avons Divi en tant que thème, nous pourrions avoir le petit problème de constater que ce plugin ne correspond pas du tout à notre thème.

C'est pourquoi nous devons reformuler le look de ContactForm 7 et l'adapter au look de Divi. Nous pouvons le faire de manière très simple. Pour ce faire, nous devons entrer dans le menu Divi puis dans l'option qui apparaît comme "Options du thème", nous trouverons ici CSS personnalisé. Dans celui-ci, nous devrons insérer ce qui suit code.

.wpcf7-text,.wpcf7-textarea,.wpcf7-captchar {

couleur d'arrière-plan : #eee!importante ;

bord : aucun ! important;

largeur : 100% ! important;

-moz-border-radius : 0 ! important;

-webkit-border-radius : 0 !important ;

bord-rayon : 0 ! important;

taille de la police : 14px ;

couleur : # 999 ! important;

rembourrage : 16px ! importante ;

-moz-box-sizing : border-box ;

-sizing-box-webkit : cadre-bordure ;

taille de la boîte : border-box ;

}

.wpcf7-submit {

couleur : # 8B3C90 ! important;

marge : 8px automatique 0 ;

curseur : pointeur ;

taille de la police : 20px ;

poids de la police : 500 ;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

rayon de bordure : 3px ;

rembourrage : 6px 20px ;

hauteur de ligne : 1,7 em ;

bas : transparent ;

carte : solide 2px ;

-webkit-font-smoothing: anti-crénelage;

-moz-osx-font-smoothing : niveaux de gris ;

-moz-transition : tous les 0.2 s ;

- traduction de webkit : tous les 0.2s ;

transition : toutes les 0.2 s ;

}

.wpcf7-submit : survolez {

couleur de fond : #eee ;

couleur de la bordure : #eee ;

rembourrage : 6px 20px ! important;

}

Gardez à l'esprit que chacun des endroits où il est dit #eee e #8B3C90, vous devrez le modifier pour pouvoir personnaliser davantage les couleurs en fonction de celles que vous utilisez sur votre page Web. Il ne vous reste plus qu'à utiliser le constructeur Divi pour pouvoir personnaliser le forme.

Pourquoi ne pas utiliser d'autres alternatives ?

Vous vous demandez peut-être pourquoi vous ne devriez pas mieux utiliser l'outil de formulaire de contact fourni avec Divi. La réponse à cette question est que ce n'est pas vraiment aussi utile que d'utiliser ContactForm 7, il n'a pas beaucoup Options d' et ce n'est pas si intuitif et simple. C'est pourquoi il est préférable de s'en tenir à ContactForm 7 et de le modifier au besoin.

BalisesTutoriel