Formulaire de contact slide-in
Bonjour à tous,
Je viens vers vous car j'ai un soucis concernant mon formulaire de contact.
J'ai suivi votre tuto concernant le formulaire de contact slide-in qui fonctionne très bien de base (http://designshack.developpez.com/tu...tact-slide-in/).
Mais je souhaiterai, comme tous formulaires de contact, y ajouter des champs obligatoires, et je recherche donc quelqu'un pour m'aider dans ce sens.
J'ai suivi le tuto de GraphikArt pour la création de ces champs obligatoires mais mêlés au slide-in, ca devient le gros bazare:
En effectuant mes tests d'envoi, le slide-in se ferme que les champs soient corrects ou non :
- si les champs sont corrects, le mail s'envoie et le slide-in se ferme.
- si les champs ne sont pas corrects, le mail ne s'envoie pas (logique) et le slide-in se ferme quand même.
En fait, idéalement, je voudrais que quand on clique sur "me contacter", cela affiche le formulaire en slide-in,
et que tant que les champs ne sont pas correctement remplis ou vides, le slide-in ne se ferme pas même si l'on appuie sur le bouton "envoyer".
et si les champs sont corrects, en cliquant sur le bouton "envoyer" cela affiche la phrase comme quoi le mail a bien été envoyé et dans ce cas là soit le slide-in se ferme tout seul, soit il se ferme seulement si l'on appuie de nouveau sur "me contacter" (peu importe pour cela).
J'ai tenté de modifier la fonction closeForm() :
Code:
1
2
3
4
| function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 3000);
} |
en la commentant ou en remplaçant "slideUp" par "slideDown", rien y fait, cela ne me convient pas.
Je vous transmets le lien afin que vous puissiez tester, ce sera peut-être plus parlant pour vous :
http://www.ledoux-webdesign.fr/sites...olio/index.php
mon code php pour les champs obligatoires :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <?php
if (!empty($_POST)) {
extract($_POST);
$valid=true;
if (empty($nom)) {
$valid=false;
$erreurnom="Ce champ n'est pas rempli !";
}
if (!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i", $email)) {
$valid=false;
$erreuremail="Ce champ n'est pas valide";
}
if (empty($email)) {
$valid=false;
$erreuremail="Ce champ n'est pas rempli !";
}
if (empty($message)) {
$valid=false;
$erreurmessage="Ce champ n'est pas rempli !";
}
if ($valid) {
$to="laetitia.ledoux@gmail.com";
$sujet="Message portfolio de : ".$nom;
$header= "From: $nom <$email>\n";
$message = stripcslashes($message);
$nom = stripcslashes($nom);
if (mail($to, $sujet, $message)) {
$information="Votre message a bien été envoyé!";
unset($nom);
unset($email);
unset($message);
}else{
$information="Une erreur est survenue, votre message n\'a pas été envoyé !";
}
}
}
?> |
Mon code du js pour le slide-in :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $.noConflict();
jQuery(document).ready(function($){
$("#contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}else{
$("#contactForm").slideUp("slow");
}
});
});
function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 3000);
} |
Mon code html du formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <div id="contactFormContainer">
<div id="contactForm">
<form method="post" action="">
<fieldset>
<div id="blocMessage"><span id="messageSent">Votre message a été correctement envoyé !</span></div>
<label for="nom">Nom<span class="requis">*</span></label>
<span class="errorMessage"><?php if (isset($erreurnom)){echo $erreurnom;}?></span>
<input class="required" type="text" name="nom" id="nom" value="<?php if (isset($nom)) {echo $nom;}?>"/>
<label for="email">Email<span class="requis">*</span></label>
<span class="errorMessage"><?php if (isset($erreuremail)){echo $erreuremail;}?></span>
<input class="required" type="email" name="email" id="email" value="<?php if (isset($email)) {echo $email;}?>"/>
<label for="message">Votre message<span class="requis">*</span></label>
<span class="errorMessage"><?php if (isset($erreurmessage)){echo $erreurmessage;}?></span>
<textarea class="required" name="message" id="message" rows="3" cols="20"><?php if (isset($message)) {echo $message;}?></textarea>
<input id="sendMail" type="submit" name="submit" onclick="closeForm()"/>
</fieldset>
</form>
</div>
<div id="contactLink"><p><img src="img/contact.png" alt="contactme" class="imgContact"/>Me contacter</p></div>
</div> |
En espérant, que cela pourra vous aider, dans le cas contraire, n'hésitez pas à me demander les fichiers ou à me poser des questions.
En vous remerciant grandement par avance.
Laetitia.
