CSS sur formulaire de contact

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

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 : 248
Taille : 10,4 Ko

Nom : Capture.PNG
Affichages : 248
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, 15h42

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, 18h01

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, 11h25

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, 09h22

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>

**NoSmoking** · 15/05/2023, 18h22

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

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

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 !

**duboi** · 16/05/2023, 08h22

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]

**NoSmoking** · 17/05/2023, 12h11

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 !

**duboi** · 17/05/2023, 20h59

non malhreusement, c'est sur un site wordpress et c'est le plugin contact form 7, en pièce jointe. Nom : Capture2.PNG
Affichages : 150
Taille : 30,1 Ko

**mathieu** · 17/05/2023, 21h47

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

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

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 ?

**duboi** · 18/05/2023, 13h35

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

**NoSmoking** · 18/05/2023, 17h22

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

.

Avec le HTML que tu as, soit :

Code html :

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

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 :

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
.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 ...

**duboi** · 19/05/2023, 10h55

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.

**NoSmoking** · 19/05/2023, 17h02

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.

CSS sur formulaire de contact

CSS

Discussions similaires

Partager

Partager