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

Cet article est la traduction de : Creating a Slide-In jQuery Contact Form.

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.

Article lu   fois.

Les deux auteurs

Site personnel

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.