Formulaire de contact avec HTML, CSS et Javascript

Un formulaire de contact est une page d’un site Web qui permet aux utilisateurs de communiquer avec le propriétaire du site. La page comporte des champs permettant de renseigner le nom, l’adresse et le type de commentaire. Sur la plupart des sites Web, les adresses électroniques sont également indiquées ; cela dit, le formulaire de contact constitue un moyen immédiat et pratique pour les utilisateurs de poser des questions au propriétaire du site.

Disposer d’une page de contact peut sérieusement réduire la frustration, ce qui est toujours une bonne chose. L’utilisation d’un formulaire de contact est encore mieux puisque les utilisateurs pourront vous contacter à partir de votre site Web.

Dans ce tutoriel nous allons découvrir comment créer un formulaire de contact à l’aide d’un simple code en HTML, CSS et Javascript.
 


 

Code HTML

Voci le code HTML qui permet d’afficher le formulaire de contact. N’oublier pas d’insérer le code JavaScript et CSS ci-dessosus dans les blocs appropriés.

<html>
   <head>
      <script> 
         /*Insérer le code JavaScript ici*/
      </script> 
      <style>
         /*Insérer le style CSS ici*/
      </style>
   </head>
   <body>
      <h1>Formulaire de contact</h1>
      <form name="myForm" action="/file.php" onsubmit="return validateForm()" method="post">
         <table class="form-style">
            <tr>
               <td>
                  <label>
                     Votre nom <span class="required">*</span>
                  </label>
               </td>
               <td>
                  <input type="text" name="name" class="long"/>
                  <span class="error" id="errorname"></span>
               </td>
            </tr>
            <tr>
               <td>
                  <label>
                     Votre adresse e-mail <span class="required">*</span>
                  </label>
               </td>
               <td>
                  <input type="email" name="email" class="long"/>
                  <span class="error" id="erroremail"></span>
               </td>
            </tr>
            <tr>
               <td>
                  <label>
                     Message <span class="required">*</span>
                  </label>
               </td>
               <td>
                  <textarea name="message" class="long field-textarea"></textarea>
                  <span class="error" id="errormsg"></span>
               </td>
            </tr>
            <tr>
               <td></td>
               <td>
                  <input type="submit" value="Envoyer">      
                  <input type="reset" value="Réinitialiser"> 
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>

 
 

Code Javascript

Voci le code Javascript à insérer dans le code HTML ci-dessus.

function validateForm()                                    
{ 
    var name = document.forms["myForm"]["name"];               
    var email = document.forms["myForm"]["email"];    
    var message = document.forms["myForm"]["message"];   
   
    if (name.value == "")                                  
    { 
        document.getElementById('errorname').innerHTML="Veuillez entrez un nom valide";  
        name.focus(); 
        return false; 
    }else{
    		document.getElementById('errorname').innerHTML="";  
    }
       
    if (email.value == "")                                   
    { 
        document.getElementById('erroremail').innerHTML="Veuillez entrez une adresse mail valide"; 
        email.focus(); 
        return false; 
    }else{
    		document.getElementById('erroremail').innerHTML="";  
    }
   
    if (email.value.indexOf("@", 0) < 0)                 
    { 
        document.getElementById('erroremail').innerHTML="Veuillez entrez une adresse mail valide"; 
        email.focus(); 
        return false; 
    } 
   
    if (email.value.indexOf(".", 0) < 0)                 
    { 
        document.getElementById('erroremail').innerHTML="Veuillez entrez une adresse mail valide"; 
        email.focus(); 
        return false; 
    } 
   
    if (message.value == "")                           
    {
        document.getElementById('errormsg').innerHTML="Veuillez entrez un message valide"; 
        message.focus(); 
        return false; 
    }else{
    		document.getElementById('errormsg').innerHTML="";  
    }
   
    return true; 
}

 
 

Code CSS

Voci le code CSS à insérer dans le code HTML ci-dessus.

h1{
  text-align: center;
}

.form-style {
	margin:10px auto;
	width: 400px;
	padding: 20px 12px 10px 20px;
	font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.form-style td {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}

.form-style label{
	margin:0 0 3px 0;
	padding:0px;
	display:block;
	font-weight: bold;
}

.form-style .required{
	color:red;
}
.form-style input[type=submit], .form-style input[type=reset]{
	background: #4eb5f1;
	padding: 8px 15px 8px 15px;
	border: none;
	color: #fff;
}
.form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
	background: #4eb5f1;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}
.form-style .field-textarea{
	height: 100px;
}
.form-style input[type=text], 
.form-style input[type=email],
textarea{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 7px;
	margin:0px;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;	
}
.form-style .long{
	width: 100%;
}
.form-style input[type=text]:focus, 
.form-style input[type=email]:focus,
.form-style textarea:focus{
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border: 1px solid #88D5E9;
}
.error{
	color: #D8000C;
	background-color: #FFBABA;
}

 
 

Résultat


QCM Javascript

4 réflexions sur “Formulaire de contact avec HTML, CSS et Javascript

  • avril 15, 2020 à 8:02
    Permalien

    Bonjour

    Je viens de tester votre code mais il faut utiliser le PHP et il faut le fichier file.php pour pouvoir fonctionner.
    On peut trouver ce fichier à quel endroit ?

    Merci

    Répondre
    • avril 16, 2020 à 12:14
      Permalien

      Bonjour Patrick,

      Je vous recommande ce tuto.

      Bon courage 🙂

      Répondre
  • juin 9, 2021 à 1:51
    Permalien

    Bonjour,

    Tout semble bien fonctionner excepté:

    Je souhaite connaitre la procédure pour obtenir un environnement php. SVP, quelles sont les composantes à télécharger sur notre ordinateur ?

    Merci

    Répondre
  • juin 29, 2021 à 12:25
    Permalien

    Bonjour j’ai essayé votre code, mais comment faire pour que les messages arrivent dans une boîte mail définie?
    Merci d’avance

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *