Créer un formulaire de contact Slide-In avec jQuery
Date de publication : 19/03/2009 , Date de mise à jour : 08/06/2009
Par
Janko Jovanovic (Auteur)
L'équipe de traduction de developpez.com (Traducteur)
Les formulaires de contact sont une partie indispensable de tout
site web. Ils sont pour la plupart mis en place sur une page séparée
et ils montrent rarement de la créativité, même s'il existe
plusieurs façons
d'améliorer leur style visuel. Dans ce tutoriel, vous verrez
comment créer un formulaire de contact dynamique en utilisant
jQuery.
Introduction
La structure
Le code CSS
Le code jQuery
Pourquoi tout ça ?
Remerciements
Introduction
Voyons ce que nous cherchons à faire avec ce tutoriel. L'image
ci-dessous montre la description de notre objectif. En haut à
droite, on trouve le lien "Contact us". Quand l'utilisateur clique
dessus, le formulaire de contact se déroule. Quand l'utilisateur
soumet son formulaire, il reçoit une confirmation indiquant que son message
a été envoyé avec succès, et en deux secondes, le formulaire tout
entier remonte vers le haut afin de ne laisser que le lien "Contact us"
visible.
Note : Vous pouvez rendre ce formulaire complètement fonctionnel
en ajoutant la validation et le code qui envoie l'e-mail.
La structure
Montrons avant toute chose la structure.
<div class="box">
<div id="contactFormContainer">
<div id="contactForm">
<fieldset>
<label for="Name">Nom *</label>
<input id="name" type="text" />
<label for="Email">Adresse Email *</label>
<input id="Email" type="text" />
<label for="Message">Votre message *</label>
<textarea id="Message" rows="3" cols="20"></textarea>
<input id="sendMail" type="submit" name="submit" onclick="closeForm()" />
<span id="messageSent">Votre message a été correctement envoyé !</span>
</fieldset>
</div>
<div id="contactLink"></div>
</div>
<div class="header">
<h1>Logo</h1>
</div>
...
</div>
|
Le code CSS
Nous avons les div "contactForm" et "contactLink" dans le
div parent "contactFormContainer" qui est positionné de
façon absolue. contactForm contient les éléments du
formulaire, et contactLink fera basculer notre formulaire
de contact sur un clic. Simple, n'est-ce pas ? Le code CSS rend
les choses plus claires :
#contactFormContainer
{
position:absolute;
left:600px;
float:right;
}
#contactForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#contactForm fieldset
{
padding:30px;
border:none;
}
#contactForm label
{
display:block;
color:#ffc400;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#contactForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#contactLink
{
height:40px;
width:351px;
background-image:url('slidein_button.png');
display:block;
cursor:pointer;
}
#messageSent
{
color:#ff9933;
display:none;
}
|
Le code jQuery
Et pour faire cela, nous devons ajouter une touche de 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")', 2000);
}
|
Je vous explique brièvement le code ci-dessus. Un simple clic
#contactLink div (plus précisément "Contact Us" fera
apparaître et disparaître le formulaire. Une fois que l'utilisateur
a soumis le formulaire, le message "Votre message a été correctement
envoyé !" apparaît et tout le formulaire retourne à son état original.
Pourquoi tout ça ?
C'est juste un exemple montrant comment améliorer l'expérience de l'utilisateur
en ajoutant un contenu dynamique à vos pages. A côté d'un formulaire
de contact, vous pouvez créer un formulaire de connexion, un
formulaire de recherche ou tout ce qui peut améliorer l'expérience
de l'utilisateur.
Connaissez-vous une autre façon de faire ça ? Donnez des exemples !
Remerciements


Les sources présentées sur cette page sont libres de droits
et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation
constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ©
2008 Design Shack. Aucune reproduction,
même partielle, ne peut être faite de ce site et de l'ensemble de son contenu :
textes, documents, images, etc. sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 €
de dommages et intérêts.
Cette page est déposée.