Mes zones de saisie dans mon formulaire ne sont pas pareil

Résolu/Fermé

Vince11000 Messages postés 23 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 10 juin 2016 - 16 févr. 2015 à 11:07
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 21 févr. 2015 à 22:41

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:

Mes zones de saisie dans mon formulaire ne sont pas pareil
Formulaire de réclamation facebook - Guide
Zone de telechargement - Accueil - Outils
Saisie gestuelle iphone - Guide
Saisie vocale sms - Guide
Formulaire de reclamation instagram - Guide

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 16/02/2015 à 15:48

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

Vince11000 Messages postés 23 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 10 juin 2016
16 févr. 2015 à 17:32

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/

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2015 à 18:07

Si la liste à choix multiple est une balise select :
.post-content input[type="email"]
.post-content select

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
16 févr. 2015 à 16:05

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

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
16 févr. 2015 à 16:17

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

Vince11000 Messages postés 23 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 10 juin 2016 > animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019
16 févr. 2015 à 17:41

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 ?

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 17/02/2015 à 11:58

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

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.

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
21 févr. 2015 à 22:41

Ok @+

Discussions similaires

Formule calcul d'un total conditionnel

problème de pixel

Résolution d'une image 500 pixels largeur

Je n'arrive plus à récuperer mon compte Outlook

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