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
- Qu’est-ce que la POO ?
- Les fonctions fléchées en Javascript
- Différence entre Node.js et AngularJS
- Différence entre == et === en JavaScript
- Apprendre JSON
- Bouton Javascript pour faire revenir à la page précédente
- Comment détecter un appareil mobile avec JavaScript
- Fermer l’onglet actuel dans une fenêtre avec Javascript
- Forcer la saisie en majuscule dans une input avec JavaScript
- Afficher un message de confirmation avant suppression en JavaScript
- Comment détecter la fermeture du navigateur en JavaScript
- Comment récupérer le hash à la fin d’une URL avec JavaScript
- Comment récupérer le nom, taille et type d’un fichier en JavaScript
- Exécuter javascript en ligne de commande
- Afficher un message d’erreur à coté d’un input en Javascript
- Formulaire de contact avec HTML, CSS et Javascript
- Écrivez votre premier script Hello, World! en JavaScript
- Comment récupérer les paramètres d’URL en JavaScript
- Calculer le PGCD de deux nombres en Javascript
- Comment calculer la racine carrée d’un nombre en Javascript
- Convertir décimal en binaire, octal ou hexadécimal en Javascript
- Anagramme en javascript
- Comment fusionner des objets en javascript
- Suite de Fibonacci en Javascript
- Comment rafraîchir/actualiser une page en Javascript
- Créer un tableau associatif en Javascript
- Format monétaire d’un nombre en Javascript
- Comment désactiver le clic droit en JavaScript
- Comment ouvrir un lien dans un nouvel onglet en Javascript
- Comment parcourir un objet en Javascript
- Comment inverser une chaîne de caractères en Javascript
- Chiffrement de césar en Javascript
- Générer une ID unique en Javascript
- Méthodes setInterval() et setTimeout() en Javascript
- Arrondir à 2 chiffres après la virgule en Javascript
- Supprimer un élément d’un tableau en Javascript
- Tri par Fusion en Javascript
- Tri par sélection en Javascript
- Tri par insertion en Javascript
- Tri à bulle en Javascript
- Mélanger un tableau en Javascript
- Comment vérifier si l’objet est un tableau(array) en Javascript
- Convertir int en string en Javascript
- Récupéré tout les éléments unique dans un tableau en Javascript
- Comment copier un tableau en Javascript
- Comment générer un nombre aléatoire en Javascript
- Framework Javascript les plus utilisés
- Liste des fonctions Javascript
- Afficher une variable Javascript dans une page HTML
- Afficher une DIV pendant X secondes en Javascript
- Afficher/Masquer plusieurs DIV en Javascript
- Comment changer le contenu d’un DIV en JavaScript
- Récupérer le texte d’une balise HTML en Javascript
- Afficher du texte dans une div avec Javascript
- Calculer l’age à partir d’une date de naissance en Javascript
- Comment comparer deux dates en Javascript
- Calculer la différence entre deux dates en Javascript
- Imprimer un fichier PDF en Javascript
- Validation du mot de passe en Javascript
- Vérifier si un champ est un nombre en Javascript
- Vérifier si un champ est vide en JavaScript
- Vérifier la validité d’un email avec Javascript
- Supprimer le dernier caractère d’une chaîne en Javascript
- Récupérer le dernier caractère d’une chaîne en Javascript
- Redirection automatique en JavaScript
- Horloge digital en Javascript
- Comment afficher la date et l’heure actuelles en Javascript
- Somme de deux nombres en Javascript
- Calculer la factorielle d’un nombre en Javascript
- Fonction pour vérifier si un nombre est premier en Javascript
- Inverser les chiffres d’un nombre en Javascript
- Vérifier l’âge d’une personne en Javascript
- Convertir une chaîne de caractère en minuscule en Javascript
- Convertir une chaîne de caractère en majuscule en Javascript
- Vérifier si un nombre est un palindrome en JavaScript
- Nombre pair ou impair en Javascript
- Nombre d’Armstrong en Javascript
- Différence entre PHP et Javascript
- Comment passer une variable de JavaScript à PHP
- Comment réinitialiser un formulaire avec JavaScript
- Comment détecter l’événement de redimensionnement d’une fenêtre en JavaScript
- Appeler deux fonction sur le même événement onClick en JavaScript
- Ajuster la hauteur d’iFrame en fonction de son contenu en JavaScript
- Comment récupérer la valeur d’un input texte en Javascript
- Comment ajouter un élément au début d’un tableau en JavaScript
- Comment convertir un objet JavaScript en JSON
- Comment générer un timestamp en JavaScript
- Comment ajouter des valeurs à un tableau en JavaScript
- Comment parser JSON en JavaScript
- Comment détecter la résolution de l’écran en JavaScript
- Comment inclure un fichier JavaScript dans un autre fichier JavaScript
- Comment récupérer l’url de la page courante avec JavaScript
- Comment retourner plusieurs valeurs avec une fonction en JavaScript
- Comment trier un tableau de nombres avec Javascript
- Comment vérifier si une chaîne est vide en JavaScript
- Convertir une liste de mots séparés par virgule en un tableau en JavaScript
- Comment changer la classe d’un élément HTML avec JavaScript
- Différence entre encodeURIComponent() et encodeURI() en JavaScript
- Comment décoder une URL en JavaScript
- Comment encoder une URL en JavaScript
- Comment créer des chaînes multilignes en JavaScript
- Comment changer la couleur du background avec JavaScript
- Comment vérifier si une variable existe ou définie en JavaScript
- Comment vérifier si une variable est undefined ou null en JavaScript
- Comment détecter un clic dans iframe en JavaScript
- Déclencher/arrêter une animation CSS via Javascript
- Comment agrandir ou diminuer une image en JavaScript
- Comment modifier la taille d’une image en JavaScript
- Comment récupérer la taille de l’image actuelle avec Javascript
- Comment concaténer deux tableaux de chaînes de caractères en JavaScript
- Comment définir une fonction en JavaScript ?
- Commentaires en JavaScript
- Supprimer un élément d’un tableau en JavaScript
- Comment supprimer les doublons d’un tableau – JavaScript
- Comment vérifier si une valeur existe dans un tableau en JavaScript
- Comment parcourir un tableau en JavaScript
- Découper une chaîne de caractères en JavaScript
- Les principales nouveautés de JavaScript ES6
- Comment vérifier si une chaîne contient une sous-chaîne en JavaScript
- Comment remplacer un caractère dans une chaîne de caractères en JavaScript
- Comment remplacer plusieurs espaces par un seul espace en JavaScript
- Comment remplacer toutes les occurrences d’une chaîne de caractères en JavaScript?
- Fonctions Callback en JavaScript
- Itérateurs en JavaScript
- Programmation fonctionnelle en javascript – map, filter et reduce
- Qu’est-ce que la programmation réactive en Javascript ?
- Qu’est-ce qu’une fermeture en JavaScript ?
- Fonctions pures en JavaScript
- Comment créer un tableau 2D en JavaScript ?
- Inverser un tableau en JavaScript
- Comment trier un tableau en JavaScript
- 10 Bonnes pratiques de codage en Javascript
- Frameworks de tests unitaires en javascript
- Héritage en JavaScript
- Programmation orientée objet en JavaScript
- Comment utiliser DOM et les événements en JavaScript
- 10 méthodes de gestion des tableaux dans JavaScript à connaître
- Les tableaux – JavaScript
- Les variables – JavaScript
- Boîtes de dialogue alert(), confirm() et prompt() – JavaScript
- Balise script – JavaScript
- Différence entre Undefined et Null en Javascript
- Différence entre JSON et XML
- Différence entre Websockets et Ajax
- Différence entre JavaScript et VBScript
- Différence entre AJAX et JSON
- Différence entre JQuery et JQuery UI
- Différence entre Bootstrap et Angular
- Différence entre let et var en JavaScript
- Différence entre JavaScript et TypeScript
- Différence entre JavaScript et jQuery
- Différence entre AngularJS, Angular 2, Angular 4 et Angular 5
- Différence entre Angular, React, Ember, Backbone et Node.js
- Différence entre Angular et React
- Différence entre React.js et React Native
- Différence entre HTML, CSS et JavaScript
- Différence entre Javascript et Python
- Différence entre java et javascript
- Comment fonctionne Javascript et comment créer une calculatrice simple avec
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
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
Bonjour Patrick,
Je vous recommande ce tuto.
Bon courage 🙂
Bonjour,
Je ne vois pas tellement l’utilité d’une BDD pour un formulaire de contact ????
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.
Bonjour,
D’après ce qu’on peut voir, ça ressemble plus à un formulaire de contact !
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
Bonjour j’ai essayé votre code, mais comment faire pour que les messages arrivent dans une boîte mail définie?
Merci d’avance
Bonjour, que faut-il ajouter à votre script pour que les commentaires s’affichent sur le même page ?
Merci.
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.
Bonjour j’ai essayé votre code, mais comment faire pour que les messages arrivent dans une boîte mail définie?
Merci d’avance
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é ?