Formulaire de contact

Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019
- - Dernière réponse : Tsarano
Messages postés
6
Date d'inscription
samedi 10 septembre 2016
Statut
Membre
Dernière intervention
24 juin 2019
- 24 juin 2019 à 14:39
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> </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;
}


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

2 réponses

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
55
0
Merci
Oui et ? Quel est ton problème ?
Commenter la réponse de SioGabx
Messages postés
6
Date d'inscription
samedi 10 septembre 2016
Statut
Membre
Dernière intervention
24 juin 2019
1
0
Merci
Des erreurs dans le script JS oublie de "});" à la fin et tu utilise un code jquery hors il n'est pas chargé.

https://code.jquery.com/
Commenter la réponse de Tsarano