Modifier le style global d'un formulaire

phizys · 11/10/2011, 14h35

Bonjour à tous,

Alors voilà, j'ai un formulaire html avec lequel je rencontre des problèmes.
En premier, j'aimerais pouvoir changer le style de typo et sa couleur.
Ensuite, le background qui est blanc par défaut.
Après, empêcher le redimensionnement du bloc texareas avec l'attribut resize:none.
Et enfin, pouvoir faire en sorte que les messages sortants du formulaire arrive directement sur une boite Yahoo et ne plus utiliser la mailto.

JE SAIS, ça fait beaucoup de choses !

J'ai cherché des solutions sur la toile mais n'arrive à rien.
Je trouve des bouts de code pour la couleur de la typo ou bien pour le fond mais le soucis c'est que je ne sais pas où les coller

Quant à la dernière question posée plus haut, je patauge grave. Je lis un peu partout qu'il serait question de PHP ?
J'ai contacté mon hébergeur OVH afin de savoir s'il y avait une solution...pas de réponse à ce jour.

Je suis désolé si mes questions peuvent paraître un peu déroutantes pour rester poli, mais je débute, et comme tout débutant j'essaye d'apprendre par le biais de ceux qui savent

Je vous communique le code de mon formulaire.

Merci d'avance à ceux qui pourront m'aider !

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
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<title></title>
</head>
 
<body>
 
<script type="text/javascript">
// Remplace les caractères accentués (+ espace)
function htmlToAccent(str) {
  var norm = new Array("é", "É", "è", "È", "ê", "Ê", "ë", "Ë", "à", "À", "ù", "Ù", "ç", "Ç");
  var spec = new Array("e", "E", "e", "E", "e", "E", "e", "E", "a", "A", "u", "U", "c", "C");
  for (var i = 0; i < spec.length; i++) {
	while(str.indexOf(norm[i]) != -1) {
      str = str.replace(norm[i], spec[i]);
	}
  }
  return str;
}
function envoyeremail() {
	var url = "mailto:monemail@email.fr?subject=Demande&body=";
	var body = 'Nom : '+document.getElementById('sender_name').value+'%0A';
	body += htmlToAccent('Prénom : ')+htmlToAccent(document.getElementById('sender_surname').value)+'%0A';
	body += htmlToAccent('Adresse : ')+htmlToAccent(document.getElementById('adresse1').value)+'%0A';
	body += '          '+htmlToAccent(document.getElementById('adresse2').value)+'%0A';
	body += htmlToAccent('Téléphone : ')+htmlToAccent(document.getElementById('telephone').value)+'%0A';
	body += htmlToAccent('Email : ')+htmlToAccent(document.getElementById('email').value)+'%0A';
	body += htmlToAccent('Préférence pour joindre : ')+htmlToAccent(document.getElementById('preferenceJoindre').value)+'%0A';
	var demande = document.getElementById('message').value;
	demande = demande.replace(/\n/g, '%0A');
	demande = htmlToAccent(demande);
	body += 'Demande : '+demande;
	url += body;
	location.href = url;
}
</script>
<form id="formulaire">
                                                            <table width="550px" border="0" align="center">
                                <tbody><tr>
                                  <td  colspan="2" align="center" valign="top">
 
                                      <fieldset>
                                      <legend>&nbsp;Votre demande&nbsp;</legend>
                                        <table>
                                        <tbody><tr>
                                          <td width="15px">&nbsp;</td>
                                          <td align="right" width="250px">Votre demande concerne :</td>
                                          <td align="left">
                                            <textarea name="message" id="message" cols="35" rows="8" class="email_news" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';"></textarea>
 
                                          </td>
                                          <td width="15px">&nbsp;</td>
                                        </tr>
                                      </tbody>
									  </table>
                                      </fieldset>
                                      <br>
                                      <fieldset>
                                      <legend>&nbsp;Vos coordonnées&nbsp;</legend>
 
                                        <table>
                                        <tbody><tr>
                                          <td width="15px">&nbsp;</td>
                                          <td align="right" width="250px">Nom :</td>
                                          <td width="150px" align="left">
                                            <input type="text" id="sender_name" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td width="15px">&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px">Prénom : </td>
                                          <td align="left">
                                            <input type="text" id="sender_surname" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td>&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px">Adresse 1 :</td>
                                          <td align="left">
                                            <input id="adresse1" type="text" id="adresse1" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td>&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px">Adresse :</td>
                                          <td align="left">
                                            <input id="adresse2" type="text" id="adresse2" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td>&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px">Téléphone :</td>
                                          <td align="left">
                                            <input id="telephone" type="text" id="telephone" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td>&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px"> Email :</td>
                                          <td align="left">
                                            <input id="email" type="text" id="email" size="30" onfocus="this.style.backgroundColor='#FBE6ED';" onblur="this.style.backgroundColor='';">
                                          </td>
                                          <td>&nbsp;</td>
 
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td align="right" width="250px"> Votre préférence pour vous joindre :</td>
                                          <td align="left">
                                            <select id="preferenceJoindre">
												<option id="courrier">Par courrier</option>
 
												<option id="email">Par email</option>
												<option id="telephone">Par téléphone</option>
											</select>
                                          </td>
                                          <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                          <td colspan="4">&nbsp;</td>
 
                                        </tr>
                                      </tbody></table>
                                      </fieldset>
									  <div align="left"><i>Tous les champs sont à remplir obligatoirement.</i></div>
                                      <br>
									  </td>
									  </tr>
									  <tr>
 
									  <td align="left">
                                      <input type="submit" value="Annuler" name="submit" onclick="document.formulaire.reset();">
                                                                      </td>
                                      <td  align="right">
									  <input type="submit" value="Envoyer" name="submit" onclick="envoyeremail();">
                                                                      </td>
                                </tr>
                              </tbody></table>
							  </form>
 
							  </body>
							  </html>

RomainVALERI · 11/10/2011, 17h21

Citation:

Envoyé par phizys

Je trouve des bouts de code pour la couleur de la typo ou bien pour le fond mais le soucis c'est que je ne sais pas où les coller

Il faut savoir où tu veux te situer :

- non-développeur : tu décris tes besoins à un développeur (ami, prestataire, etc.) qui s'en charge et te livre le produit fini. Ton post suggère que tu n'en es pas là et que tu veux t'en occuper toi-même.

- semi-développeur : tu as des notions globales en tant qu'utilisateur web, tu sais lire le manuel d'un outil et te référer à l'aide, tu peux utiliser différentes suites logicielles permettant de créer sans développer directement en code.

- développeur : même sans vouloir devenir Linus Torvalds demain matin, tu prends le parti d'apprendre les bases et d'écrire les fonctionnalités nécessaires, au fur et à mesure de leur apprentissage, dans les langages adaptés.

Si tu fais partie de la seconde catégorie mais que tu veux plutot faire partie de la troisième (ce qui n'est pas "mieux", mais disons qu'il y a un choix à faire, qui dépend de toi, de ton activité actuelle, de tes goûts, etc.), il n'y a pas 10000 solutions : commencer par les bases. ^^

Sinon, on peut toujours te "donner la becquée" pour corriger les problèmes ponctuels que tu te poses, mais sache que ça risque fortement de se répéter au prochain besoin. (un poisson... apprendre à pêcher... tu m'as compris...

)

phizys · 11/10/2011, 21h55

Merci RomainVALERI d'avoir répondu à mon message bien que je ne m'attendais pas, je l'avoue, à ce "genre" d'aide.

Pour ma part, je suis graphiste - j'ai même un diplôme - et c'est vrai que je suis une quiche en développement web.

De mon côté, je suis également inscrit sur un site dédié à Photoshop, Illustrator et autres, et j'essai du mieux que je peux d'aider les personnes dans la difficulté.

Je pourrais bien évidemment rétorquer aux néophytes qui postent sur ledit forum qu'ils peuvent commencer par acheter des livres sur les logiciels d'Adobe. Ou bien se payer une formation. Ou alors chercher des tutoriels en ligne avant de poser leurs questions...mais ce n'est pas mon rôle et encore moins celui de ce forum d’entraide.
Alors oui, bien sûr parfois les questions sont récurrentes et à leur lecture on prend vite conscience du manque de connaissance de base des logiciels.
Alors oui, je leur donne la becquée.
Mais finalement mes explications lui permettront peut-être d'avancer, de progresser et mes réponses profiteront à d'autres.
C'est valorisant pour soi et pour autrui.

Voilà.
J'avais un besoin urgent de réponse à mon post.
Ta réponse m'a surpris.
Elle n'est pas méchante ni agressive, loin de là.
Mais ce n'est pas l'idée que je me fais d'un forum d'entraide.
Je trouverai peut-être sur un autre forum une bonne âme qui voudra bien donner une suite favorable à mes questions de débutant.

Cordialement.

12monkeys · 11/10/2011, 22h07

Bonsoir

Pour ce que tu veux faire, il te faut utiliser CSS.

Voici un article pour débuter : http://css.developpez.com/tutoriels/premiers-pas/, ça t'indiquera notamment comment insérer des CSS dans une page web.
Pour personnaliser un formulaire voici deux autres articles : http://a-pellegrini.developpez.com/t...ss/formulaire/ et http://j-willette.developpez.com/tut...ss/formulaire/.

Maintenant pour tes questions : pour changer la police et la couleur il faut utiliser font-family et color

Code :

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

1
2
3
4
div {
   font-family : Arial, sans-serif;
   color : red;
}

Pour l'arrière-plan c'est la propriété background-color à utiliser de la même manière que ci-dessus.

Pour ta dernière question tu peux effectivement le faire en PHP, mais ce n'est pas le bon forum ici pour poser ce genre de questions, vois plutôt le forum PHP.

RomainVALERI · 12/10/2011, 01h05

Citation:

Envoyé par phizys

Merci RomainVALERI d'avoir répondu à mon message bien que je ne m'attendais pas, je l'avoue, à ce "genre" d'aide.
[...]

Oui, pardon, on s'est mal compris. ^^

Ce que je n'ai pas explicitement formulé, c'est que si tu choisis effectivement d'écrire le code toi-même, nous serons prêts à t'aider, il y a plein de bonnes volontés par ici. Les tutoriels ne se substituent pas à l'aide que nous apportons, ils sont une première étape optionnelle, disons. En effet, quand les questions révèlent des lacunes qui semblent trop importantes, nous avons coutume de commencer par redonner des références sur les bases... ^^ mais si tu "feuillettes" le forum, tu verras que nous en venons très souvent, dans un second temps, à mettre les mains dans le cambouis.

Mes références restaient assez vagues, mais 12monkeys t'a suggéré des articles plus ciblés, j'espère que ça te convient mieux, allez te vexe pas

(et pour "donner la becquée", je t'accorde que la métaphore est 1) pas top pertinente 2) de mauvais goût

désolé de cette petite exaspération à mauvais escient

)

11/10/2011, 21h55	#3
phizys Invité de passage Philippe graphiste Inscription : octobre 2011 Messages : 2 Détails du profil Informations personnelles : Nom : Philippe Localisation : France, Yonne (Bourgogne) Informations professionnelles : Activité : graphiste Informations forums : Inscription : octobre 2011 Messages : 2 Points : 0 Points : 0	Merci RomainVALERI d'avoir répondu à mon message bien que je ne m'attendais pas, je l'avoue, à ce "genre" d'aide. Pour ma part, je suis graphiste - j'ai même un diplôme - et c'est vrai que je suis une quiche en développement web. De mon côté, je suis également inscrit sur un site dédié à Photoshop, Illustrator et autres, et j'essai du mieux que je peux d'aider les personnes dans la difficulté. Je pourrais bien évidemment rétorquer aux néophytes qui postent sur ledit forum qu'ils peuvent commencer par acheter des livres sur les logiciels d'Adobe. Ou bien se payer une formation. Ou alors chercher des tutoriels en ligne avant de poser leurs questions...mais ce n'est pas mon rôle et encore moins celui de ce forum d’entraide. Alors oui, bien sûr parfois les questions sont récurrentes et à leur lecture on prend vite conscience du manque de connaissance de base des logiciels. Alors oui, je leur donne la becquée. Mais finalement mes explications lui permettront peut-être d'avancer, de progresser et mes réponses profiteront à d'autres. C'est valorisant pour soi et pour autrui. Voilà. J'avais un besoin urgent de réponse à mon post. Ta réponse m'a surpris. Elle n'est pas méchante ni agressive, loin de là. Mais ce n'est pas l'idée que je me fais d'un forum d'entraide. Je trouverai peut-être sur un autre forum une bonne âme qui voudra bien donner une suite favorable à mes questions de débutant. Cordialement.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email