Comment styler WP Formulaire de contact 7 Formulaire de plugin en utilisant materialise css et Own stylesheet?

Question

I mon site web J'utilise WordPress Contact Form 7 pour obtenir des informations de mes utilisateurs. Le site web est construit en utilisant materialise css Framework.

Maintenant, je veux utiliser mon style CSS personnalisé et matérialiser le style CSS au formulaire. Alors que j'utilise le code suivant. Mais ce n'est pas le style.

Quelqu'un me dit comment puis-je styliser ce formulaire?

<div class="row"> 
<form class="col s12"> 
<div class="row"> 
<div class="input-field col s6"> 
<i class="material-icons prefix">account_circle</i> 
[email* your-email id:icon_prefix class:validate] 
<label for="icon_prefix">Your Email</label> 
</div> 
</div> 

Answer 1

J'ai eu le même problème récemment sur un projet. Je suis en mesure de garder le style de Materialise sous la forme en ajoutant ce code jquery à mon dossier js:

$('input').focus(function(e) { 
var name = $(this).attr('name'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active'); 
}}); 

$('input').blur(function(e) { 
var name = $(this).attr('name'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active'); 
}}); 

Qu'est-ce que ce code n'est d'ajouter la classe « active » à l'étiquette du champ de texte est concentré et l'enlever quand il est flou. Donc, votre code est correct. Ajoutez simplement cet extrait et vous aurez également la transition dans le champ de texte.

La raison pour laquelle vous avez ce problème est due à un élément span wrapper que le formulaire de contact 7 ajoute en tant que parent de votre champ de courrier électronique.

Answer 2

i modifie la même solution que @ user7346350 pour taxtarea et l'icône travail trop se concentrer

$('input').focus(function(e) { 
var name = $(this).attr('id'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active'); 
    $(this).parent().siblings('i').addClass('active'); 
}}); 

$('input').blur(function(e) { 
var name = $(this).attr('id'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active'); 
    $(this).parent().siblings('i').removeClass('active'); 
}}); 

$('textarea').focus(function(e) { 
var name = $(this).attr('id'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active'); 
    $(this).parent().siblings('i').addClass('active'); 
}}); 

$('textarea').blur(function(e) { 
var name = $(this).attr('id'); 
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active'); 
    $(this).parent().siblings('i').removeClass('active'); 
}});