Comment formater un formulaire de contact 7 dans Divi

Être capable de créer du contenu pour une page Web implique une grande attention aux détails. Chaque petit détail peut être amélioré, c’est une règle. Et cela s’applique encore plus lorsque nous avons un grand site Web ou de nombreux petits détails à couvrir. Un exemple de ceci est si nous possédons une boutique en ligne créée sur des plates-formes comme Blogger .

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

Compte tenu de cela, nous pouvons réaliser quand le niveau de détail à pouvoir couvrir au sein de nos sites Web . Cependant, tout dépend du niveau de créativité que nous pouvons avoir pour déployer des efforts sur notre site Web. Car, avant cela, nous vous parlons d’un petit détail que vous pouvez couvrir en quelques minutes, à savoir le ContactForm 7.

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

Mais, vous avez le petit détail qui s’avère souvent être un plugin d’enquête un peu simple, au point que beaucoup considèrent son apparence quelque peu disgracieuse . 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 de WordPress et en raison de son esthétique. C’est vraiment agréable à regarder. Pour cette raison, il peut être un peu ennuyeux d’utiliser ContactForm 7 dans une page Web avec Divi, car les deux styles ne correspondent pas.

C’est pourquoi nous devons formater ContactForm 7 pour 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

Vraiment, pouvoir utiliser ContactForm 7 est une bénédiction lorsque nous voulons recevoir un message de nos visiteurs et pouvoir interagir avec eux si nous le souhaitons. Mais si nous avons Divi comme thème, nous pouvons avoir le petit problème de constater que ce plugin ne se combine pas du tout avec notre thème.

C’est pourquoi nous devons reformuler l’apparence de ContactForm 7, et l’adapter à l’apparence de Divi. Nous pouvons le faire d’une 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 le CSS personnalisé. Dans ce cadre, nous devrons entrer le code suivant .

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

couleur d’arrière-plan: #eee! important;

bordure: aucune! importante;

largeur: 100%! important;

-moz-border-radius: 0! important;

-webkit-border-radius: 0! important;

border-radius: 0! important;

taille de la police: 14px;

couleur: # 999! important;

rembourrage: 16px! important;

-moz-box-sizing: border-box;

-webkit-box-dimensionnement: border-box;

box-dimensionnement: border-box;

}

.wpcf7-submit {

couleur: # 8B3C90! important;

marge: 8px auto 0;

curseur: pointeur;

taille de la police: 20px;

poids de la police: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

rayon de la bordure: 3px;

rembourrage: 6px 20px;

hauteur de ligne: 1,7em;

fond: transparent;

bordure: solide 2px;

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

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

-moz-transition: tous les 0,2s;

-webkit-transition: tous les 0,2s;

transition: tous les 0,2 s;

}

.wpcf7-submit: hover {

couleur d’arrière-plan: #eee;

couleur de la bordure: #eee;

rembourrage: 6px 20px! important;

}

Gardez à l’esprit que chacun des endroits où il est indiqué #eee et # 8B3C90 , vous devrez le changer 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 formulaire .

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 à cela est que ce n’est vraiment pas aussi utile que d’utiliser ContactForm 7, il n’a pas autant d’ options et ce n’est pas aussi intuitif et simple. C’est pourquoi il est préférable de s’en tenir à ContactForm 7 et de le modifier au besoin.