Formulaire pour contact (html et css)
Résolu
photomartin
Messages postés
177
Statut
Membre
-
jnetmike3 -
jnetmike3 -
Bonjour,
Je créé ce post car je suis en train de faire mon site Internet et maintenant je suis "arrivé" à la page de Contact. Celle-ci sera composé d'un petit formulaire et devrait m'envoyer (à mon adresse eMail) le formulaire rempli pur les visiteurs... Ben, en fin, accomplir la tache de "contact" =)
En fait je suis en train de faire le site en HTML + CSS. A ce jour j'ai déjà fait le formulaire mais je ne suis pas sûr qu'il soit "correct" (sauriez-vous me confirmer cela?).
Une autre chose: existe-t-il un moyen de l'essayer? Pour voir s'il fonctionne bien et comment le formulaire rempli arriverait sur mon adresse eMail.
Voila ce que j'ai fait jusque maintenant
----------------------------------------------------------------------------------------------------------------------------------------------
CSS:
/* ----------------------------------------- Contact DIVs ----------------------------------------- */
div#contactsup
{ float: left ; width: 800px ; height: 50px ; text-align: left ; padding: 20px 100px 0px 100px; }
div#contactleft
{ float: left ; width: 577px ; height: 545px ; padding: 10px 5px 0px 5px; overflow: auto ; }
div#contactmiddle
{ float: left ; width: 6px ; height: 555px ; }
div#contactright
{ float: left ; width: 377px ; height: 545px ; padding: 10px 15px 0px 15px; overflow: auto ; background: url(../images/contactright.jpg) no-repeat ; }
/* ----------------------------------------- Formulaire ----------------------------------------- */
td
{ font-size: 85% ; font-family: "Lucida Sans", "Lucida Sans Typewriter", Lucida, sans-serif ; color: #ffffff ; }
.cadre_s .cadre_b
{ border: 5px solid #000000 ; }
.cadre_b
{ border: 5px solid #000000 ; }
.form-l
{ background-color: #000000 ; text-align: right ; color: #ffffff ; white-space: nowrap ; padding: 4px 4px 4px 30px ; }
.form-r
{ background-color: #000000 ; padding: 4px 30px 4px 4px ; }
.center
{ text-align: center ; color: #ffffff ; }
.indent
{ margin-left: 60px ; line-height: 18px ; }
.cel-1
{ background-color: #000000 }
.cel-2
{ background-color: #000000 }
----------------------------------------------------------------------------------------------------------------------------------------------
HTML:
<body>
<div id="conteneur">
<div id="header">
<div id="headerleft">
</div>
<div id="headerrightsup">
</div>
<div id="headerrightinf">
<div id="barrenav">
(...............................................)
</div>
</div>
</div>
<div id="contenu">
<div id="contactsup">
<h1>Contactez-moi</h1>
</div>
<div id="contactleft">
<br />
<h2>Formulaire</h2>
<br />
<form action="mailto:xxxxxxxxxxxxxxx@xxxxxxxxxx.xx" METHOD="post" ENCTYPE="text/plain">
<INPUT TYPE="hidden" NAME="MonNom" VALUE="fr">
<table cellspacing="1" align="center" id="contactfr">
<tr>
<td class="form-l"><label for="comments">Situation:</label><br></td>
<td class="form-r"><input type="radio" name="situation" /> Monsieur <input type="radio" name="sex" /> Madame <input type="radio" name="sex" /> Mademoiselle <br></td>
</tr>
<tr>
<td class="form-l">Nom<br></td>
<td class="form-r"><input type="text" name="nom" value="" size="35" maxlength="50"><span style="display:none">Email<input type="text" name="email" value="" size="1" maxlength="50"><select name="yallc[]" size="1" multiple><option value="e" selected></option><option value="w" selected></option></select><textarea name="message" cols="1" rows="1"></textarea></span><br></td>
</tr>
<td class="form-l">Pays / Ville <br></td>
<td class="form-r"><input type="text" name="geo" value="" size="35" maxlength="100"><br></td>
</tr>
<tr>
<td class="form-l">Email<br></td>
<td class="form-r"><input type="text" name="email" value="" size="35" maxlength="100"><br></td>
</tr>
<tr>
<td class="form-l">Téléphone<br></td>
<td class="form-r"><input type="text" name="tel" value="" size="35" maxlength="18"><br></td>
</tr>
<tr>
<td class="form-l" valign="top">Message<br></td>
<td class="form-r"><textarea name="in[texte]" rows=8 cols="50"></textarea><br></td>
</tr>
<tr>
<td class="form-l"> <br></td>
<td class="form-r"><input type="submit" name="submit" value="Envoyer"><br></td>
</tr>
</table>
</form>
</div>
<div id="contactmiddle">
(.......................................................)
</div>
<div id="contactright">
(.......................................................)
</div>
<div id="footer">
(.......................................................)
</div>
</body>
----------------------------------------------------------------------------------------------------------------------------------------------
Merci d'avancer pour votre aide ;)
PhotoMartin
Je créé ce post car je suis en train de faire mon site Internet et maintenant je suis "arrivé" à la page de Contact. Celle-ci sera composé d'un petit formulaire et devrait m'envoyer (à mon adresse eMail) le formulaire rempli pur les visiteurs... Ben, en fin, accomplir la tache de "contact" =)
En fait je suis en train de faire le site en HTML + CSS. A ce jour j'ai déjà fait le formulaire mais je ne suis pas sûr qu'il soit "correct" (sauriez-vous me confirmer cela?).
Une autre chose: existe-t-il un moyen de l'essayer? Pour voir s'il fonctionne bien et comment le formulaire rempli arriverait sur mon adresse eMail.
Voila ce que j'ai fait jusque maintenant
----------------------------------------------------------------------------------------------------------------------------------------------
CSS:
/* ----------------------------------------- Contact DIVs ----------------------------------------- */
div#contactsup
{ float: left ; width: 800px ; height: 50px ; text-align: left ; padding: 20px 100px 0px 100px; }
div#contactleft
{ float: left ; width: 577px ; height: 545px ; padding: 10px 5px 0px 5px; overflow: auto ; }
div#contactmiddle
{ float: left ; width: 6px ; height: 555px ; }
div#contactright
{ float: left ; width: 377px ; height: 545px ; padding: 10px 15px 0px 15px; overflow: auto ; background: url(../images/contactright.jpg) no-repeat ; }
/* ----------------------------------------- Formulaire ----------------------------------------- */
td
{ font-size: 85% ; font-family: "Lucida Sans", "Lucida Sans Typewriter", Lucida, sans-serif ; color: #ffffff ; }
.cadre_s .cadre_b
{ border: 5px solid #000000 ; }
.cadre_b
{ border: 5px solid #000000 ; }
.form-l
{ background-color: #000000 ; text-align: right ; color: #ffffff ; white-space: nowrap ; padding: 4px 4px 4px 30px ; }
.form-r
{ background-color: #000000 ; padding: 4px 30px 4px 4px ; }
.center
{ text-align: center ; color: #ffffff ; }
.indent
{ margin-left: 60px ; line-height: 18px ; }
.cel-1
{ background-color: #000000 }
.cel-2
{ background-color: #000000 }
----------------------------------------------------------------------------------------------------------------------------------------------
HTML:
<body>
<div id="conteneur">
<div id="header">
<div id="headerleft">
</div>
<div id="headerrightsup">
</div>
<div id="headerrightinf">
<div id="barrenav">
(...............................................)
</div>
</div>
</div>
<div id="contenu">
<div id="contactsup">
<h1>Contactez-moi</h1>
</div>
<div id="contactleft">
<br />
<h2>Formulaire</h2>
<br />
<form action="mailto:xxxxxxxxxxxxxxx@xxxxxxxxxx.xx" METHOD="post" ENCTYPE="text/plain">
<INPUT TYPE="hidden" NAME="MonNom" VALUE="fr">
<table cellspacing="1" align="center" id="contactfr">
<tr>
<td class="form-l"><label for="comments">Situation:</label><br></td>
<td class="form-r"><input type="radio" name="situation" /> Monsieur <input type="radio" name="sex" /> Madame <input type="radio" name="sex" /> Mademoiselle <br></td>
</tr>
<tr>
<td class="form-l">Nom<br></td>
<td class="form-r"><input type="text" name="nom" value="" size="35" maxlength="50"><span style="display:none">Email<input type="text" name="email" value="" size="1" maxlength="50"><select name="yallc[]" size="1" multiple><option value="e" selected></option><option value="w" selected></option></select><textarea name="message" cols="1" rows="1"></textarea></span><br></td>
</tr>
<td class="form-l">Pays / Ville <br></td>
<td class="form-r"><input type="text" name="geo" value="" size="35" maxlength="100"><br></td>
</tr>
<tr>
<td class="form-l">Email<br></td>
<td class="form-r"><input type="text" name="email" value="" size="35" maxlength="100"><br></td>
</tr>
<tr>
<td class="form-l">Téléphone<br></td>
<td class="form-r"><input type="text" name="tel" value="" size="35" maxlength="18"><br></td>
</tr>
<tr>
<td class="form-l" valign="top">Message<br></td>
<td class="form-r"><textarea name="in[texte]" rows=8 cols="50"></textarea><br></td>
</tr>
<tr>
<td class="form-l"> <br></td>
<td class="form-r"><input type="submit" name="submit" value="Envoyer"><br></td>
</tr>
</table>
</form>
</div>
<div id="contactmiddle">
(.......................................................)
</div>
<div id="contactright">
(.......................................................)
</div>
<div id="footer">
(.......................................................)
</div>
</body>
----------------------------------------------------------------------------------------------------------------------------------------------
Merci d'avancer pour votre aide ;)
PhotoMartin
A voir également:
- Formulaire contact html css
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Editeur html - Télécharger - HTML
- Formulaire de reclamation instagram - Guide
- Erreur lors de l'enregistrement du contact - Forum Xiaomi
6 réponses
Salut
le :
Ca m'étonnerait que ce soit très pratique (ca marche au moins ?).
Il te faut un script PHP (ou un autre langage mais je pense que php est plus simple)
Remplace par :
Et dans "suite.php" tu met un script php pour mailler !
Regarde ces deux tutos très complais sur les formulaires et la fonction mail :
https://openclassrooms.com/fr/courses
https://openclassrooms.com/fr/courses
Voila bonne lecture et bonne chance
le :
<form action="mailto:xxxxxxxxxxxxxxx@xxxxxxxxxx.xx" METHOD="post" ENCTYPE="text/plain">
Ca m'étonnerait que ce soit très pratique (ca marche au moins ?).
Il te faut un script PHP (ou un autre langage mais je pense que php est plus simple)
Remplace par :
<form action="suite.php" METHOD="post" ENCTYPE="text/plain">
Et dans "suite.php" tu met un script php pour mailler !
Regarde ces deux tutos très complais sur les formulaires et la fonction mail :
https://openclassrooms.com/fr/courses
https://openclassrooms.com/fr/courses
Voila bonne lecture et bonne chance
En html c'est possible mais l'utilisateur va se voir ouvrir Outlouk et c'est vraiment désagréable....
Ca fait ramer voir planter le pc si tu clique plusieurs fois, et si tu es sous linux baheuuu faudrait tester ^^
Sinon tu peux utiliser CGI mais bon connais pas.
PHP utilise un serveur STMP c'est simple et efficace, je te conseille ca, beaucoup de sites l'utilise d'ailleurs
Ca fait ramer voir planter le pc si tu clique plusieurs fois, et si tu es sous linux baheuuu faudrait tester ^^
Sinon tu peux utiliser CGI mais bon connais pas.
PHP utilise un serveur STMP c'est simple et efficace, je te conseille ca, beaucoup de sites l'utilise d'ailleurs
Merci, tu avais raison, le PHP donne de nouvelles posibilitées et ce n'est pas si difficile que ça =)
Merci encore une fois
Martin
Merci encore une fois
Martin
Merci pour le message
Suis-je "obligé" d'utiliser du PHP? Car j'ai travaillé en HTML et CSS et je ne voudrais pas utiliser un "code" que je ne connais pas... Je croyais qu'en HTML c'était possible.
Sinon, merci pour les liens, je vais voir =)
Amicalement
PhotoMartin
Suis-je "obligé" d'utiliser du PHP? Car j'ai travaillé en HTML et CSS et je ne voudrais pas utiliser un "code" que je ne connais pas... Je croyais qu'en HTML c'était possible.
Sinon, merci pour les liens, je vais voir =)
Amicalement
PhotoMartin
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ce script html est très bien avec code de protection et n'ouvre pas de boite mail envoie directement.
<form id="monForm" name="monForm" action="/rep/traitement/contact.php" method="post"> <fieldset> <legend>Contact</legend> <p> <label for="form_nom">Votre nom*</label> <input type="text" id="form_nom" name="nom" /> </p> <p> <label for="form_email">Votre Email*</label> <input type="text" id="form_email" name="email" title="Votre Email" class="obligatoire email" /> </p> <p> <label for="form_sujet">Sujet de votre message*</label> <input type="text" id="form_sujet" name="sujet" title="Sujet de votre message" class="obligatoire" /> </p> <p class="center"><input value="b" style="width: 50px; font-weight: bold;" onclick="storeCaret('b')" type="button"> <input value="i" style="width: 50px; font-style: italic;" onclick="storeCaret('i')" type="button"> <input value="u" style="width: 50px; text-decoration: underline;" onclick="storeCaret('u')" type="button"> <input value="center" style="width: 50px;" onclick="storeCaret('center')" type="button"> <input value="url" style="width: 50px;" onclick="storeCaret('url')" type="button"> <input value="img" style="width: 50px;" onclick="storeCaret('img')" type="button"></p> <p><label for="message">Message</label> <textarea name="message" rows="10" id="message"></textarea> </p> </fieldset> <fieldset> <legend>Champ de sécurité</legend> <p> <input type="hidden" name="validate" value="cb3bae31bb1c443fbf3db8889055f2fe" /> <input type="hidden" name="resSecuSpam" value="em91lnhi" /> <input type="hidden" name="contact" value="" /> <input type="hidden" name="addr" value="82.249.147.146" /> <label for="form_secure"> <img class="img_securite" src="http://tonsite.com/protect-img-em91lnhi-fr.png" alt="" /> </label> <div class="securite_div"> <span class="attention">Veuillez recopier les caractères de l'image : </span><br /> <input name="karak_envoi" class="input_codesecu" class="obligatoire" type="text" /> </div> </p> </fieldset> <p class="submit"> <input type="submit" name="submit" value="Envoyer"/><input type="hidden" name="login" value="rire-et-delire" /><input type="hidden" name="page" value="contact.html" /><input type="hidden" name="rubrique" value="" /><input type="hidden" name="cat" value="" /><input type="hidden" name="id_rep" value="" /> </p> <p>*champs obligatoires</p> </form></div>