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.

Image non disponible

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.

La structure

Montrons avant toute chose la structure.

 
Sélectionnez
<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 :

 
Sélectionnez
#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.

 
Sélectionnez
$(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.

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

Tous mes remerciements à RomainVALERI pour sa relecture.