CSS sur formulaire de contact

**duboi** · 11/05/2023, 11h36

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. Nom : Capture.PNG
Affichages : 259
Taille : 10,4 Ko

Nom : Capture.PNG
Affichages : 259
Taille : 10,4 Ko

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

Merci

**NoSmoking** · 11/05/2023, 16h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
form label {
   color: #FFF;
}

**duboi** · 11/05/2023, 19h01

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.

**NoSmoking** · 12/05/2023, 12h25

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

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**duboi** · 15/05/2023, 10h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>