Les formulaires de contact sont une partie indispensable de chaque site Web. Ils sont généralement implémentés sur une page séparée et font preuve de créativité, même s’il existe de nombreuses façons d’améliorer leur style visuel. Dans ce didacticiel, vous verrez comment créer un formulaire de contact dynamique à l'aide de jQuery.

Voyons ce que nous essayons de réaliser avec ce tutoriel. L'image ci-dessous montre la mise en page de notre objectif. Contactez-nous dans le coin supérieur droit du contenu. lien. Lorsque l'utilisateur clique dessus, le formulaire de contact glisse vers le bas. Lorsque l'utilisateur envoie le formulaire, il reçoit un message l'informant que son message a été envoyé avec succès et, dans les deux secondes, le formulaire complet glisse vers le haut.

Remarque: vous pouvez rendre ce formulaire entièrement fonctionnel en ajoutant une validation et un code réel qui envoie le courrier électronique.

Consultez la démo et téléchargez le code source complet ici.

La structure

Expliquons d'abord la structure.

Nom * Adresse email * Votre message * <textarea id="?Message?" rows="?3"" cols="?20""> Votre message a été envoyé avec succès!

Logo d'entreprise

?

Le code CSS

Nous avons? ContactForm? et? contactLink? divs à l'intérieur du? contactFormContainer? qui est positionné absolument. ContactForm contient des éléments de formulaire et contactLink basculera notre formulaire de contact au clic. Assez simple, non? Le code CSS rendra ceci plus clair:

#contactFormContainer {position: absolute; à gauche: 600px; Flotter à droite; } #contactForm {height: 277px; largeur: 351px; background-image: url ('bkg.jpg'); affichage: aucun; } #contactForm fieldset {padding: 30px; bordure: aucune; } #contactForm label {display: block; couleur: # ffc400; } #contactForm input [type = text] {display: block; bordure: solide 1px # 4d3a24; largeur: 100%; marge inférieure: 10px; hauteur: 24px; } #contactForm textarea {display: block; bordure: solide 1px # 4d3a24; largeur: 100%; marge inférieure: 10px; } #contactForm input [type = submit] {background-color: # 4d3a24; bordure: solide 1px # 23150c; couleur: # fecd28; rembourrage: 5px; } #contactLink {height: 40px; largeur: 351px; background-image: url ('slidein_button.png'); bloc de visualisation; curseur: pointeur; } #messageSent {color: # ff9933; affichage: aucun; }

Faisons glisser les gens!

Et pour que cela fonctionne, nous devons ajouter une touche de jQuery.

$ (document) .ready (fonction () {$ (? # contactLink?). click (fonction () {if ($ (? # contactForm?).) est (?: caché?)) {$ (? # contactForm? ) .slideDown (? slow?);} else {$ (? # contactForm?). slideUp (? slow?);}});}); function closeForm () {$ (? # messageSent??). show (? lent?); setTimeout ('$ (? # messageSent??). hide (); $ (? # contactForm?). slideUp (? slow?)', 2000); }

Laissez-moi expliquer brièvement le code ci-dessus. En cliquant sur #contactLink div, vous basculez la visibilité du formulaire de contact. Une fois que l'utilisateur a soumis le formulaire, un message "Votre message a été envoyé avec succès!" apparaîtra et le formulaire entier glissera dans son état initial.

Consultez la démo et téléchargez le code source complet ici.

Pourquoi tout ça?

Ceci est juste un exemple de la façon dont vous pouvez améliorer l'expérience utilisateur en ajoutant un contenu dynamique à vos pages. Outre un formulaire de contact, vous pouvez créer un formulaire de connexion coulissant, un formulaire de recherche ou tout autre élément susceptible d'améliorer l'expérience de l'utilisateur.

Y a-t-il quelque chose qui pourrait être mieux fait? Connaissez-vous une autre façon de faire cela? Partagez quelques exemples!