Une simple expérimentation CSS, sans tutoriel. J’ai ajouté à ce formulaire de contact une petite enveloppe animée à côté du bouton « Envoyer ». Celle-ci se ferme, s’incline et se déplace, laissant apparaitre les messages d’information concernant l’état d’envoi de l’email.
Les animations sont en CSS (transition). jQuery et ajax ne sont là que pour gérer l’envoi, et assigner des classes et l’attribut disabled au bouton, selon l’état de l’envoi, ce qui permet au CSS de faire ses transitions. En cas d’erreur d’envoi, le CSS est prévu, il suffit juste que la gestion des erreurs soit implémentée dans l’ajax. J’ai mis une case à cocher pour simuler une erreur.
Au début je voulais faire seulement le bouton et cette enveloppe… Et j’ai fini par faire le formulaire en entier. Comme à mon habitude, aucune image, que du CSS. Par contre je ne suis pas allé jusqu’à créer le code pour envoyer réellement l’email, ce n’était pas le but, surtout qu’en l’état, ce formulaire est inexploitable avec les anciens navigateurs.
Bref, je vous laisse matter la démo.
See ya o/
PS : une deuxième version sortira bientôt, on verra les choses un peu plus… en grand ;)
