Sujet Précédent Sujet Suivant

Formulaire de contact

Fermé
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 14 juin 2019 à 08:49
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;
});

2 réponses

Réponse 1 / 2
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
19 juin 2019 à 13:13
Oui et ? Quel est ton problème ?
0
Réponse 2 / 2
Tsarano Messages postés 6 Date d'inscription samedi 10 septembre 2016 Statut Membre Dernière intervention 24 juin 2019 1
24 juin 2019 à 14:39
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/
0

Discussions similaires

Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
Site chaud contact
joseph -
Afrikarnak -

43 réponses
Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses
Grosses arnaques sur jecontacte.com site de rencontres gratuit
Couilloné? -
Lovane33 -

34 réponses
Whatsapp: différences entre bloquer et supprimer contact
Fjsoz -
Paul49140 -

1 réponse