En avant propos, je débute dans la conception de site web, même s'il y a quelques années j'avais déjà créé un site en html et css grâce à Alsacréation. 
Dans le cadre d'un site pour une activité pro, j'aimerai mettre en place un formulaire de contact pour mes visiteurs. Après avoir lancé une discussion sur le sujet via alsacréation, j'ai décidé de me lancer via un script trouvé sur le web. J'ai eu quelques soucis pour le personnaliser mais cela semble tenir plus ou moins la route, en tout cas en apparence.
Par contre, quand je valide mon formulaire j'ai systématiquement le même message "votre message n'a pas été envoyé, réessayer plus tard !" J'en déduis que j'ai du faire une bêtise en manipulant le javascript mais je n'arrive pas à trouver où… Votre aide et vos conseils me seront d'un grand secoue, merci par avance.
Modifié par Mazh (13 Dec 2013 - 18:28)
Dans le cadre d'un site pour une activité pro, j'aimerai mettre en place un formulaire de contact pour mes visiteurs. Après avoir lancé une discussion sur le sujet via alsacréation, j'ai décidé de me lancer via un script trouvé sur le web. J'ai eu quelques soucis pour le personnaliser mais cela semble tenir plus ou moins la route, en tout cas en apparence.
Par contre, quand je valide mon formulaire j'ai systématiquement le même message "votre message n'a pas été envoyé, réessayer plus tard !" J'en déduis que j'ai du faire une bêtise en manipulant le javascript mais je n'arrive pas à trouver où… Votre aide et vos conseils me seront d'un grand secoue, merci par avance.
<div id='formulaire'>
<form action='send.php' method='post' id='contact_form'>
<p> Votre nom :
<div id='name_error' class='error'><img src='images/error.png'> veuillez entrer votre nom !</div>
<div>
<input type='text' name='name' id='name'>
</div>
</p>
<p> Votre Email :
<div id='email_error' class='error'><img src='images/error.png'> veuillez entrer votre e-mail !</div>
<div>
<input type='text' name='email' id='email'>
</div>
</p>
<p> Objet :
<div id='subject_error' class='error'><img src='images/error.png'> veuillez préciser votre sujet !</div>
<div>
<input type='text' name='subject' id='subject'>
</div>
</p>
<p> Votre message :
<div id='message_error' class='error'><img src='images/error.png'> Champs message est requis !</div>
<div>
<textarea name='message' id='message'></textarea>
</div>
</p>
<div id='mail_success' class='success'><img src='images/success.png'> Merci ! Votre message a bien été envoyé !</div>
<div id='mail_fail' class='error'><img src='images/error.png'> votre message n'a pas été envoyé, réessayer plus tard !</div>
<p id='cf_submit_p'>
<input type='submit' id='send_message' value='Envoyer votre message'>
</p>
</form>
<br />
</div>
/* Formulaire */
#formulaire {
width: 400px;
margin-left: auto;
margin-right: auto;
}
#formulaire input, #formulaire textarea {
width: 100%;
padding: 5px;
border: 1px solid #80BF40;
}
#formulaire textarea {
height: 100px;
border: 1px solid #80BF40;
}
#send_message {
width: 200px !important;
border: 1px solid #80BF40;
cursor: pointer;
cursor: hand;
}
#cf_submit_p {
text-align: right;
}
.error {
display: none;
padding:5px;
margin-bottom:2px;
color: #D8000C;
font-size:12px;
background-color: #FFBABA;
border:1px solid #F00;
width:400px;
}
.success {
display: none;
padding:5px;
color: #044406;
font-size:12px;
background-color: #B7FBB9;
width:400px;
}
.error img {
vertical-align:top;
}
$(document).ready(function(){
$('#send_message').click(function(e){
e.preventDefault();
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(1000);
}else{
$('#name_error').fadeOut(1000);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(1000);
}else{
$('#email_error').fadeOut(1000);
}
if(subject.length == 0){
var error = true;
$('#subject_error').fadeIn(1000);
}else{
$('#subject_error').fadeOut(1000);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(1000);
}else{
$('#message_error').fadeOut(1000);
}
if(error == false){
$('#send_message').attr({'disabled' : 'true', 'value' : 'Envoi en cours...' });
$.post("send.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#cf_submit_p').remove();
$('#mail_success').fadeIn(1000);
}else{
$('#mail_fail').fadeIn(1000);
$('#send_message').removeAttr('disabled').attr('value', 'Message envoyÈ');
}
});
}
});
});Modifié par Mazh (13 Dec 2013 - 18:28)
).