Formulaire de contact
MaxBMX17
Messages postés
67
Date d'inscription
Statut
Membre
Dernière intervention
-
Tsarano Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Tsarano Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
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 :
CSS :
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;
});
A voir également:
- Formulaire de contact
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Formulaire de contact le bon coin introuvable ✓ - Forum Vos droits sur internet
- Recuperer contact carte sim - Guide
2 réponses
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/
https://code.jquery.com/
