18041 sujets

Questions générales et questions de débutants

[Résolu] Formulaire de contact

Bonjour à tou(te)s,

Je recherche un soft gratuit ou un / site pour pouvoir créer un formulaire de contact, avec la particularité de pouvoir mettre 2 blocs l'un à coté de l'autre.
J'entends par blocs un ensemble de balises ex:
<label>Votre Nom: <textinput>Name

J'ai bidouiller une image pour vous donner un exemple:
upload/43715-Sanstitre1.gif

Merci d'avance pour votre aide...
Bonjour,
Voici un code html qui fait un formulaire de contact:
------------------------------------------------------------------------
<html>
<head>
<style>
form div + div {
margin-top: 1em;
}
label {
/* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* Afin de s'assurer que tous les champs textuels utilisent la même police
Par défaut, textarea utilise une police à espacement constant */
font: 1em sans-serif;

/* Pour donner la même dimension à tous les champs textuels */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;

/* Pour harmoniser l'apparence des bordures des champs textuels */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* Afin de rehausser les éléments actifs */
border-color: #000;
}
textarea {
/* Pour aligner correctement les champs multilignes et leurs étiquettes */
vertical-align: top;

/* Pour donner assez d'espace pour entrer du texte */
height: 5em;

/* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
Cela ne marche pas avec tous les navigateurs */
resize: vertical;
}
.button {
/* Pour positionner les boutons de la même manière que les champs textuels */
padding-left: 90px; /* même dimension que les étiquettes */
}

button {
/* Cette marge représente approximativement le même espace
que celui entre les étiquettes et les champs textuels */
margin-left: .5em;
}
</style>
</head>
<body>

<form action="/ma-page-de-traitement" method="post">
<table>
<tr>
<td><label for="nom">Nom :</label><input type="text" id="nom" /></td>
<td><label for="tel">Téléphone :</label><input type="text" id="tel" /></td>
</tr>
<tr>
<td><label for="courriel">Email :</label><input type="email" id="courriel" /></td>
<td><label for="soc">Société :</label><input type="text" id="soc" /></td>
</tr>
<tr>
<td><label for="message">Message :</label> <textarea id="message"></textarea></td>
<td></td>
</tr>
<tr>
<td><div class="button">
<button type="reset">Annuler</button>
</div></td>
<td><div class="button">
<button type="submit">Envoyer</button>
</div></td>
</tr>
</table>
</form>
</body>
</html>
------------------------------------------------------------------------
upload/61768-Capture.PNG
Modifié par MariaVaughan (15 Apr 2016 - 16:35)
Merci pour ta réponse MariaVaughan.

Je croyais que pour qu'un formulaire fonctionne, il fallait qu'il y ait une page HTML ET une page PHP pour que celui-ci fonctionne.
Je me suis trompé car en ajoutant "<form action="mailto:adresse-mail" method="post" enctype="text/plain">", cela fonctionne mais avec l'utilisation du logiciel de messagerie de l'envoyeur.

Ce que je recherche, c'est :
1) Un fonctionnement sans utilisation du logiciel de messagerie de l'envoyeur, ce qui sous entend un lien vers une page PHP, ou JS, etc...
2) La récupération des infos saisis pour les mettre dans le corps du message envoyé.

Voila donc la raison pour laquelle je recherchais un soft me permettant de me créer ces pages sans que vous fassiez le boulot à ma place Smiley cligne Smiley cligne Smiley cligne

Merci encore pour votre aide... Smiley cligne
Modifié par valttt (17 Apr 2016 - 08:22)
Je vous renvois mes codes que j'ai un peu adaptés:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" href="Acc.css" type="text/css" media="screen"><title>Acc</title>

<style>
form div + div {
margin-top: 1em;
}
label {
/* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* Afin de s'assurer que tous les champs textuels utilisent la même police
Par défaut, textarea utilise une police à espacement constant */
font: 1em sans-serif;

/* Pour donner la même dimension à tous les champs textuels */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;

/* Pour harmoniser l'apparence des bordures des champs textuels */
border: 2px solid #999;
}
input:focus, textarea:focus {
/* Afin de rehausser les éléments actifs */
border-color: #000;
}
textarea {
/* Pour aligner correctement les champs multilignes et leurs étiquettes */
vertical-align: top;

/* Pour donner assez d'espace pour entrer du texte */
height: 8em;

/* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
Cela ne marche pas avec tous les navigateurs */
resize: vertical;
}
.button {
/* Pour positionner les boutons de la même manière que les champs textuels */
padding-left: 90px; /* même dimension que les étiquettes */
}

button {
/* Cette marge représente approximativement le même espace
que celui entre les étiquettes et les champs textuels */
margin-left: .5em;
}
</style></head><body>
<div id="container">
<form action="mailto:vl927@aol.com" method="post" enctype="text/plain">
<div id="select">Civilité :
<select name="select">Civilité :
  <option>Monsieur</option>
  <option>Madame</option>
  <option>Melle</option>
</select>
</div>

<table style="text-align: left; width: 800px; height: 159px;">
  
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br><label for="nom">Nom :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input id="nom" type="text">
      </td>
      <td colspan="1" rowspan="3" style="vertical-align: top;"><br><label for="message">Message :&nbsp;&nbsp;</label> 
	  <textarea id="message"></textarea>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br><label for="tel">Téléphone :&nbsp;&nbsp;</label><input id="tel" type="text">
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br><label for="courriel">Email :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input id="courriel" type="email">
      </td>
    </tr>
  </tbody>

  </table>
  <br>
<div class="button">
    <button type="submit">Envoyer</button>
  </div>
  </form>

</body></html>


CSS:

#container
{
  width: 900px;
  margin: 0 auto;
  }
#select
{
width: 200px;
margin: 0 auto;	 
}

Modifié par valttt (17 Apr 2016 - 08:27)
Bonjour,

Vous devez ajouter une action à votre formulaire par exemple?: action="mail.php"
et mail.php doit contenir le code suivant?:
----------------------
<?php
$to = 'personne@example.com';
$subject = 'le sujet';
$message = 'Bonjour !';
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>
-------------
Sujet clos
Aller à