CSS sur formulaire de contact

Version imprimable

11/05/2023, 10h36
duboi

1 pièce(s) jointe(s)

CSS sur formulaire de contact

bonjour,

Je n'arrive pas à trouver les propriétés css pour personnaliser ce formulaire :https://autre.cdlacom.eu/
j'aimerais le personnaliser comme celui en pièce jointe.Pièce jointe 638530

Votre nom, votre prénom ne sont pas visibles mais j'aimerais qu'ils soit en blanc.

Merci
11/05/2023, 15h42
NoSmoking
Bonjour,
la couleur d'écriture de tes <label> est celle définie sur le <body> soit color: #191919 dans ton cas, il te suffit donc de la redéfinir à color: #FFF, par exemple :
Code:

1 2 3 form label { color: #FFF; }
11/05/2023, 18h01
duboi

MERCI ca fonctionne, parcontre, on peut modifier les labels en simple trait au lieux d'un fond blanc comme sur la photo?

en plus le graphiste a mis les étoiles obligatoires en vert. Ca me parait compliqué de les personnaliser en css.

Citation:

en plus le graphiste a mis les étoiles obligatoires en vert.

ton graphiste a prévu l'emplacement pour la saisie :mouarf:

Bon je te mets un exemple de ce qui pourrait répondre à ton attente, à toi de l'adapter à ton réel besoin.

Je pars du HTML suivant, à adapter donc :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<fieldset>
  <h1>Contacter le cabinet</h1>
  <p class="saisie">
    <input id="name" name="name" type="text" required>
    <label for="name">Nom et prénom</label>
  </p>
  <p class="saisie">
    <input id="email" name="email" type="email" required>
    <label for="email">Email</label>
  </p>
  <p class="saisie">
    <input id="telphone" name="telphone" type="tel" required>
    <label for="telphone">Numéro téléphone</label>
  </p>
  <p class="info-saisie">* Champs obligatoires</p>
</fieldset>

... et j'applique le CSS ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
fieldset {
  --color: #FFF;
  --bgColor: #333;
  --requiredColor: #0B6;
  width: 30em;
  padding: 1em 2em;
  border: none;
  color: var(--color);
  background-color: var(--bgColor);
}
.saisie {
  position: relative;
  padding-top: 2em;
}
.saisie label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--color);
  line-height: 2;
  transition: .25s;
  transform-origin: 0 0;
}
.saisie input:focus + label {
  border-color: transparent;
  transform: scale(.9);
}
.saisie input {
  width: 100%;
  border: none;
  font-size: inherit;
  line-height: 2;
  color: inherit;
  background-color: inherit;
}
[required] + label:after {
  content: "*";
  float: right;
  font-weight: 700;
  color: var(--requiredColor);
}
.info-saisie {
  color: var(--requiredColor);
}

... on ne doit pas être loin de ce que tu cherches à faire.

Je te laisse analyser ;)

bonjour,

merci pour ton retour et ton code;
C'est pas évident, j'ai essayé de réadapter ton code en regardant les propriétés sur firefox édition mais ca fait pas tout a fait pareil
https://autre.cdlacom.eu/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.wpcf7  {
  position: relative;
  padding-top: 2em;
}
.wpcf7 input label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--color);
  line-height: 2;
  transition: .25s;
  transform-origin: 0 0;
}
.wpcf7 input:focus + label {
  border-color: transparent;
  transform: scale(.9);
}
.wpcf7 input {
  width: 100%;
  border: none;
  font-size: inherit;
  line-height: 2;
  color: inherit;
  background-color: inherit;
}
input#your-name.wpcf7-text.wpcf7-validates-as-required.saisie + label:after {
  content: "*";
  float: right;
  font-weight: 700;
  color: var(--requiredColor);
}
.info-saisie {
  color: var(--requiredColor);
}
 
 
.info-label {
  color: var(--requiredColor);
}

et puis pour les asterix , dans contact form7, j'ai pas trouvé de balise en fait, ils sont crés en dur comme ca

Code:

1
2
3
4
5
6
7
8
9
10
11
<label> Nom et prénom *
    [text* your-name class:saisie] </label>
 
<label> Email *
    [email* your-email class:saisie] </label>
 
<label> Numéro de téléphone * 
[tel* tel-189 class:saisie] </label>
 
<label> Votre message * 
    [text your-subject class:saisie] </label>

15/05/2023, 18h22
NoSmoking

Le code CSS que tu as ajouté n'est pas conforme à ce que je t'ai indiqué :weird:

La structure que tu utilises ne correspond pas à ce que je t'ai fourni :weird:

De plus il ne faut pas oublier de déclarer tes variables CSS, sinon tu n'auras rien.

Il te faut donc adapter à ton besoin !
16/05/2023, 08h22
duboi

Je comprends mais c'est pas mon fort le css
Si je te redonne mon site : https://autre.cdlacom.eu/
tu peux me redire les bonnes propriétés?
En fait le modèle que je cherche à faire est visible ici : [https://www.figma.com/proto/kv6l1FGh...ode-id=81%3A3]
17/05/2023, 12h11
NoSmoking

Citation:

tu peux me redire les bonnes propriétés?

tout d'abord, as tu la possibilité de modifier la structure HTML, car en l'état je ne trouve pas cela très propre même si cela apparaît faisable !
17/05/2023, 20h59
duboi

1 pièce(s) jointe(s)

non malhreusement, c'est sur un site wordpress et c'est le plugin contact form 7, en pièce jointe.Pièce jointe 638845

l'extension contact form 7 permet de définir un "placeholder" (je ne sais pas s'il y a un mot équivalent en français) avec cette configuration :
[email* your-email class:saisie placeholder "Votre adresse e-mail"].

qui produira ce code html (avec quelques classes css en plus pour "input")
Code:

1 2 3 4 5 6 7 8 9 10 11 <p> <span class="wpcf7-form-control-wrap" data-name="your-email"> <input size="40" class="wpcf7-form-control saisie" placeholder="Votre adresse e-mail" value="" type="email" name="your-email"> </span> </p>
le texte "Votre adresse e-mail" disparait quand on commence à saisir quelque chose.
j'ai l'impression que cela s'approche déjà plus du résultat souhaité, non ?

18/05/2023, 13h35
duboi

oui c'est ca que je voudrais , faut que je fasse la réplique car je m'occupe de l'intégration de ce graphisme sur wordpress

Je trouve quand même dommage de supprimer l'information via le <label> qui participe à accessibilité même si un placeholder reste une bonne idée mais qui dans le cas présent va casser le désign de ce cher designer :mrgreen:.

Avec le HTML que tu as, soit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<label> Nom et prénom
    <span class="wpcf7-form-control-wrap" data-name="your-name">
        <input
            size="40"
            class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required saisie"
            id="your-name"
            aria-required="true"
            aria-invalid="false"
            value=""
            type="text"
            name="your-name">
    </span>
</label>

... j'ai supprimé les * dans les labels.

On peut s'en sortir en appliquant le CSS suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.wpcf7 {
  /*-- ne pas oublier les déclarations de couleur --*/
  --color: #FFF;
  --requiredColor: #0A6;
  position: relative;
}
.wpcf7 label {
  top: 0;
  left: 0;
  width: 100%;
  line-height: 2;
  color: #FFF;
  /*-- simulation de la border --*/
  background-image: linear-gradient(var(--color), var(--color));
  background-position: 0 2em;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
.wpcf7 label:last-child {
  background: none;
}
.wpcf7 label span.wpcf7-form-control-wrap:after {
  content: "*";
  position: absolute;
  top: -2em;
  right: 0;
  font-weight: 700;
  color: var(--requiredColor);
}
.wpcf7 input.saisie {
  width: 100%;
  border: none;
  font-size: inherit;
  line-height: 1;
  background-color: inherit;
}

à suivre ...

19/05/2023, 10h55
duboi

Tu es un génie.
Ca fonctionne.
J'aurai jamais trouvé, je savais même pas qu'on pouvait ajouter un astérix dans le css.
D'habitude , je m'en sors avec Firefox editions mais la ca dépassait mes bases.
MERCI.
19/05/2023, 17h02
NoSmoking

Nota important :
ne pas oublier de mettre une mention (*) champ obligatoire, ou une menton plus générale Tous les champs sont obligatoires et, dans ce cas, ne pas mettre les astérisques.