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

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

  • avril 15, 2020 à 8:02 pm
    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 am
      Permalien

      Bonjour Patrick,

      Je vous recommande ce tuto.

      Bon courage 🙂

      Répondre
      • janvier 4, 2023 à 2:15 pm
        Permalien

        Bonjour,
        Je ne vois pas tellement l’utilité d’une BDD pour un formulaire de contact ????

        Répondre
        • janvier 4, 2023 à 2:21 pm
          Permalien

          J’ai pensé que vous voulez créer un système de commentaire pas un formulaire de contact. Parce que, par exemple les commentaires qui s’affichent sur cette page sont stocké dans une Base de donnée MySQL, et on les affichent via une boucle en utilisant Ajax.

          Répondre
          • mars 16, 2023 à 4:22 pm
            Permalien

            Bonjour,

            D’après ce qu’on peut voir, ça ressemble plus à un formulaire de contact !

  • juin 9, 2021 à 1:51 pm
    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 am
    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
  • janvier 4, 2023 à 9:45 am
    Permalien

    Bonjour, que faut-il ajouter à votre script pour que les commentaires s’affichent sur le même page ?
    Merci.

    Répondre
    • janvier 4, 2023 à 10:56 am
      Permalien

      D’abord, vous devez stocker les commentaires soit dans un fichier ou dans une base de données, après vous les affichés en utilisant Ajax.

      Répondre
  • janvier 14, 2023 à 9:45 am
    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
  • janvier 18, 2023 à 6:37 pm
    Permalien

    Bonjour,
    C’est le genre de code que je recherchais, merci pour votre travail et description, mais comme la précédente demande, où doit-on mettre l’adresse émail ou le fichier doit être envoyé ?

    Répondre
  • février 6, 2025 à 7:28 pm
    Permalien

    You are infringing upon the copyrighted illustrations owned by our company (orrick Inc.). To obtain documentation of our intellectual property rights, please review this document, which includes the links to our images used at waytolearnx.com as well as our prior publications.

    Download the document and see it for yourself:

    https://adclick.g.doubleclick.net//pcs/click?aX0A4tUYW7jlh7C4&&adurl=///%72%65%62%72%61%6E%64%2E%6C%79%2F%63%66%32%33%66%62%36%37

    I believe that you willfully infringed our rights under 17 U.S.C. Sec. 101 et seq. and can be liable for statutory damage as high as $110,000 as set-forth in Sec. 504 (c)(2) of the Digital millennium copyright act (”DMCA”) therein.

    This message is official notice. I demand the removal of the infringing materials described above. Take note as a service provider, the Dmca demands you to eliminate and terminate access to the copyrighted materials upon receipt of this particular notification letter. If you do not stop the utilization of the above mentioned infringing content a court action will likely be initiated against you.

    I do have a strong self-belief that use of the copyrighted materials mentioned above as presumably infringing is not authorized by the copyright proprietor, its agent, as well as laws.

    I declare under penalty of perjury that the information in this notification is accurate and hereby certify that I am licensed to act on behalf of the owner of the exclusive right allegedly violated.

    Best regards,
    Randy Kane
    Legal Officer
    orrick, Inc.

    orrick.com

    02/06/2025

    Répondre
    • février 23, 2025 à 12:52 pm
      Permalien

      Hi please, can you send me the document, which includes the links to your images used at waytolearnx.com at https://waytolearnx.com/contact/ I will check and contact you back. Sorry for the disturbance.

      Répondre

Laisser un commentaire

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