Bonjour,

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

J'ai déjà réalisé un formulaire simple :

HTML :

<!doctype html>

 
<html xml:lang="fr-fr" lang="fr-fr" >
<link href="test-form.css"rel="stylesheet" type="text/css" />
<script src="test-form.js" type="text/javascript"></script>
<h1>Formulaire de contact</h1>

<div class="position contact">
<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>
  <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;
}

JAVASCRIPT :

$('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;
});

Alex0123

14 juin 2019 à 8:40:38

AbcAbc6

14 juin 2019 à 8:54:30

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/formulaire-de-contact-69

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Formulaire de contact

Doublon

Supprimer

Modérer

Signaler le message aux modérateurs