Bonjour,

j'ai réalisé ce formulaire de contact, pouvez-vous me dire s'il est correct, ce que je dois améliorer.

HTML :

<h1>Formulaire de contact</h1>


<form action="#" method="get"
      name="selectForm" id="selectForm">
			Sélectionnez un contact :
 
<select id="id" name="id" 
               
        
        
class="inputbox"
        
        onchange="document.location.href = this.value">
	<option value="/contact/ccas-action-sociale">Espace familles</option>
	<option value="/contact/ccas-maintien-a-domicile">Urbanisme</option>
	<option value="/contact/ccas">CCAS</option>
	<option value="/contact/contact-cimetieres">Suggestions et réclamations</option>
	<option value="/contact/contact-mairie" selected="selected">Mairie de Mouvaux</option>
  </select>
  <div class="required toUpper">
    <label for="nom">Nom*</label>
    <input id="nom" placeholder="Nom"type="text">
    <span>Vous devez renseigner votre nom de famille</span>
  </div>
  <div class="required">
    <label for="prenom">Prénom*</label>
    <input id="prenom" placeholder="Prénom" type="text">
    <span>Vous devez renseigner votre prénom</span>
  </div>
  <div class="required toUpper">
    <label for="email">Email*</label>
    <input id="email" placeholder="Email" type="text">
    <span>Vous devez renseigner votre adresse email</span>
  </div>
  <div class="required toUpper">
    <label for="adresse">Sujet*</label>
    <textarea id="adresse" placeholder="Sujet"></textarea>
    <span>Vous devez renseigner votre adresse postale</span>
  </div>
  <div class="required">
    <label for="codepostal">Message*
  </label>
    <input id="codepostal"
           placeholder="Message" type="text">
    <span>Vous devez renseigner votre code postal</span>
  </div>
  <div id="success" class="alert">
    Bravo, vos infos ont bien été envoyées !
  </div>
  <div id="error" class="alert">
    Des erreurs existent dans votre formulaire, merci de les corriger avant de ré-essayer l'enregistrement !
  </div>
  <div>
    <label>&nbsp;</label>
    <button type="submit">
      Envoyer
    </button>
  </div>
</form>
  <p>Champs obligatoires*</p>

CSS :

@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
* {
  box-sizing: border-box;
}

body,
input,
button,
textarea {
  font-family: Raleway, sans-serif;
}

button {
  padding: 10px 30px;
  border-radius: 5px;
  width: 200px;
}

input,
textarea {
  padding: 5px;
  width: 200px;
  border-radius: 3px;
  border: 1px solid navy;
}

.invalid input,
.invalid textarea {
  border: 1px solid red;
}

.valid input,
.valid textarea {
  border: 1px solid green;
  color: green;
}

div.required.invalid span {
  display: block;
  font-weight: bold;
  margin-top: 10px;
  color: red;
}

div.required span {
  display: none;
}

div.alert {
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}

#success {
  background-color: #5fb012;
  display: none;
}

#error {
  background-color: #b01212;
  display: none;
}

h1,
h2,
h3 {
  font-family: Montserrat, sans-serif;
}

div {
  margin-bottom: 20px;
}

label {
  width: 150px;
  display: inline-block;
}

JAVASCRIP :

$('form').submit(function() {
  var hasError = false;

  $('div.toUpper input').each(function(i, element) {
    $(element).val($(element).val().toUpperCase());
  });

  $('div.required input, div.required textarea').each(function(i, element) {
    if ($(element).val() === "") {
      $(element).parent().addClass('invalid');
      hasError = true;
    } else {
      $(element).parent().removeClass('invalid').addClass('valid');
    }
  });

  if (hasError) {
    $('#error').show();
  } else {
    $('#success').show();
    $('form input, form textarea').val('');
  }

  return false;
});

J'ai rajouté "margin-bottom" mais cela ne s'applique pas :

<div class="marge">
</div>

.marge{
  margin-bottom: 10px;
}

Bonjour,

????

C'est un formulaire, tu utilises la méthode GET pourquoi du js au lieu du PHP? Ce sujet n'a rien à faire sur html / css :).

Si tu pouvais soigner la mise en forme du code en choisissant dans le menu déroulant le langage en question ? 

Merci 

Je dois faire un formulaire de contact comme celui-ci (case à cocher, calendrier) : https://mouvaux.fr/operation-tranquillite-vacances

Dans ce cas tu dois utiliser du php par exemple ...

Regarde cette vidéo elle est pas trop mal.

https://www.youtube.com/watch?v=vVV18mLiq1Q

En plus tu utilises de l'ajax renseigne toi sur les méthodes POST pour faire un formulaire de contact il faut savoir faire un formulaire de base , tu auras après une autre complexité

Bonne chance