Mes zones de saisie dans mon formulaire ne sont pas pareil

Résolu
Vince11000 Messages postés 23 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je fais un site sur WordPress à partir du thème "Wilson".
J'ai fais un formulaire sur mon site avec le plugin Contact Form 7.
Mes zones où le visiteur saisie du textes apparaissent d(une façon et dès que je met un champ à choix multiple ou un champ d'adresse mail la zone de texte est différente.
Cela ne fait pas beau ce n'est pas esthétique.
Quelqu'un sait comment je dois procéder pour avoir un beau formulaire ?
l'adresse du site pour vous en rendre compte :

http://www.gestion-de-sinistre.fr/nous-contacter/

Merci beaucoup

A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Les styles des champs de ton formulaire sont appliqués grâce à la règles css suivantes (fichier style.css?ver=1.4 ligne 1129) : 
.post-content input[type="text"], .post-content input[type="tel"], .post-content input[type="url"], .post-content input[type="password"], .post-content textarea {
    background: none repeat scroll 0 0 #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    color: #333;
    font-family: "Lato",sans-serif;
    font-size: 0.85em;
    padding: 14px 16px;
    transition: background 0.2s ease-in-out 0s;
    width: 100%;
}


Or cette règle n'est pas appliqué pour un input de type email.
Tu peux donc ajouter cette règle pour le champ email soit en modifiant la règle du fichier style.css (ajouter le texte en gras) :

.post-content input[type="text"], .post-content input[type="tel"], .post-content input[type="url"], .post-content input[type="password"], .post-content textarea, .post-content input[type="email"] {
background: none repeat scroll 0 0 #fdfdfd;
border: 1px solid #eee;
border-radius: 4px;
color: #333;
font-family: "Lato",sans-serif;
font-size: 0.85em;
padding: 14px 16px;
transition: background 0.2s ease-in-out 0s;
width: 100%;
}

soit ajouter uniquement la règle pour le champ input dans un autre fichier css ou dans ton fichier html : 
.post-content input[type="email"] {
    background: none repeat scroll 0 0 #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    color: #333;
    font-family: "Lato",sans-serif;
    font-size: 0.85em;
    padding: 14px 16px;
    transition: background 0.2s ease-in-out 0s;
    width: 100%;
}


Même principe pour le champ à choix multiple, il faut retrouver le sélecteur css sur lequel appliquer les styles.

Bonne journée
0
Vince11000 Messages postés 23 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Pitet,

Tout d'abord un grand Merci ! c'est sympas de m'avoir répondu.
J'ai pourtant fais ce que tu m'as dis :
- dans mon fichier style.css a la ligne 1129
- j'ai ajouté la règle pour les champs emails et selecteur

".post-content input[type="text"],
.post-content input[type="tel"],
.post-content input[type="url"],
.post-content input[type="password"],
.post-content textarea,
.post-content input[type="email"]
.post-content input[type="select"] {
background: none repeat scroll 0 0 #fdfdfd;
border: 1px solid #eee;
border-radius: 4px;
color: #333;
font-family: "Lato",sans-serif;
font-size: 0.85em;
padding: 14px 16px;
transition: background 0.2s ease-in-out 0s;
width: 100%;
}

Parfait pour mon champ "email" mais RAS pour le champs à choix multiples :-(

http://www.gestion-de-sinistre.fr/nous-contacter/
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Si la liste à choix multiple est une balise select :
.post-content input[type="email"]
.post-content select
0
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut dans ta page contact tu as une balise <style>
juste avant la fermeture de cette balise </style> tu rajoutes

.wpcf7-select {width: 100%;} .pcf7-email {width: 100%;}

ou bien tu rajoute ces ligne à la fin du fichier se trouvant ici
/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.1
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Pour retrouver les styles ou éléments html installe firefox
clic droit sur l'élément / examiner l'élément
ou mieux installes le pugin firebug dans firefox
clic droit sur l'élément / examiner l'élément avec firebug
0
Vince11000 Messages postés 23 Date d'inscription   Statut Membre Dernière intervention   > animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Animostab,

Je n'ai que partiellement résolu ma question concernant la forme de mon formulaire.
En tout cas un grand Merci pour ce firebug que je connaissais pas et qui est super pratique. J'ai résolu quelques petit problème grace à ça.
En revanche, concernant le sujet de mon formulaire j'ai appliqué la solution de Pitet et cela a bien fonctionné pour le champ email mais pas pour le champ du menu déroulant...
Sais tu pourquoi ?
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
parce que certainement une règle css écrite après celle donnée par pitet annule / remplace le width
en dernier recour tu peux mettre ca dans le html de la balise select
style="width: 100%;"
mais je vois que tu a réglé le problème sauf que maintenant les champs n'ont plus de bordure ou la color de bordure est la meme que le fond donc c'est génant a rectifier et firbug dans ce cas est ton ami
0
Vince11000 Messages postés 23 Date d'inscription   Statut Membre Dernière intervention   > animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Animostab,

Effectivement firbug est mon ami désormais. Il est vraiment pratique je confirme.
Je n'ai pas répondu plus tot désolé. Le problème de ce sujet est résolu. Mais quand un problème est régler on en cherche un autre ! mdr.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Ok @+
0

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses