Créer un formulaire de contact Slide-In avec jQuery

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.

Lancez la démonstation et téléchargez le code source complet ici.

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>

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;
}

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.

Lancez la démonstation et téléchargez le code source complet ici.

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 !

Tous mes remerciements à RomainVALERI pour sa relecture.