Formulaire de contact pur css3 html5 sans images

img-article

J’avais envie de m’amuser avec les nouvelles fonctionnalités des formulaires html5 et les gradients css3, et l’idée qui m’est venue est est assez simple : créer un formulaire pure html5 Css3 sans utiliser une seule image.

Voici le résultat, que vous pouvez voir dans une démo live ici.

Formulaire de contact pur html5 Css3 sans images
Attention, ce formulaire utilisant des techniques de css3 et html5 pas encore répandues dans tous les navigateurs, il s’agit d’une démonstration de ce qu’on peut faire avec du css3 (à ne pas utiliser sur un site live donc). Il vaut mieux l’ouvrir avec la toute dernière version de firefox. Vous pouvez également l’ouvrir avec chrome ou safari, mais vous n’aurez pas l’effet de transition sur les icônes, les transitions sur les pseudo-classes :before ne fonctionnant pas encore pour ces navigateurs à l’heure où j’écris cet article.

Pour vous résumer quelques unes des techniques au programme : le fond utilise un gradient en css3, le bouton d’envoi utilise des gradients et des box-shadow et les icônes sont en fait une font spéciale appelée iconic. Au niveau du html5, quelques éléments comme placeholder, required, autocomplete et les nouveaux input de type url et mail ont été utilisés.
Vous trouverez sur onextrapixel le tutoriel expliquant comment ce formulaire a été créé :

” Full CSS3 HTML5 Contact Form with No Images ”

Besoin d'un designer ? D'un design de site ou d'application mobile ? De cartes de visites ou d'un logo ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

23 réflexions au sujet de « Formulaire de contact pur css3 html5 sans images »

  1. [troll]
    Méééheu! Pourquoi il y a des lettres devant chaque label? Genre un “u” devant Name, un “M” devant Email address, etc.? Ca march’ paaaaas!
    [/troll]

  2. Bon, langue au chat alors.
    J’ai simplement désactivé javascript! (oui je suis un sale fourbe)
    C’est le petit truc qui gène avec @font-face : pas de javascript, pas de @font-face.

    De plus, ce défaut n’est pas anodin pour tout le monde : utiliser une fonte pour une icône c’est pas terrible au niveau accessibilité, c’est le petit reproche que je fais à cette nouvelle technique. En effet, une liseuse d’écran lira le caractère “icône” comme un caractère normal, ça donnera donc UName par exemple.
    Cependant, tu as inséré ces icônes avec :before, et je ne sais pas si les liseuses d’écran connaissent ça (je ne pense pas, et je ne suis pas expert dans l’accessibilité). Donc à priori, l’insertion par :before te sauve la mise ^^.

    Bon, je voulais juste faire mon chieur parce que tu m’a nargué sur Twitter =D Aïe! Pas le visage!
    Good job! (je note la technique de ninja pour la bordure rayée)

    See ya!

  3. PS1 : en fait j’ai mal formulé ma réponse car les 2 choses n’ont rien à voir l’une avec l’autre (javascript désactivé et lecture du caractère par liseuse d’écran).
    PS2 : tu m’en veux pas hein, dis? Tu m’apprécie encore hein? ;)

  4. J’avoue que je suis bluffée je ne savais pas que désactiver le javascript désactivait les fonts, j’ai pensé à tout cause à ça. J’ai désactivé la connexion, certaines feuilles de style, etc. D’ailleurs c’est étrange que désactiver du javascript ai un effet sur du css, qui à prime abord ne semble pas lier. Si tu as de la doc là dessus je suis preneuse.

    Pour l’accessibilité, je suis assez d’accord, une font en icon avec un text-indent :-xxx px n’est pas accessible “il veut dire quoi ton u ??”. Florent avait assez bien résumé je pense http://fvsch.com/code/icon-font-a11y/ , c’est sure que l’utiliser pour des icônes pure qui ont du sens n’est pas une bonne idée.
    Pour l’utilisation dans un :before je n’ai pas de screenreader sous la main, mais si tu (quelqu’un) veut faire un test je serais curieuse des résultats !

    Mais l’idée est surtout “pour le défi” héhé, les icones c’est la cerise sur le gâteau.

    ps2 : je t’en voudrai pas seulement si tu me ramènes un paquet de cookies !

  5. Désolé, pas de doc, j’ai appris ça durant la création d’un de mes 1ers sites. Ça m’a également surpris bien sûr.

    Effectivement j’avais lu l’article de Florent… puis oublié la moitié. Merci pour le refresh ;)

    Bon, je viens de tester avec VoiceOver (c’est le lecteur d’écran d’origine dans OS X, il est pas très évolué apparemment, et ne marche qu’avec Safari) et c’est presque le drame ^^
    En effet il va lire le caractère au focus du champs texte : http://cl.ly/0U2i2D2l2j0F2F362Z23
    Mais au moins il sépare le caractère du mot, on a donc “u Name” et pas “uName”, ce qui est déjà pas mal.
    C’est le petit doute qui me restait au fond du palais : je suppose que VoiceOver se base sur le moteur de rendu CSS du navigateur, Webkit donc, ce qui me parait logique puisqu’un lecteur d’écran ne lira pas un texte avec la propriété display: none (d’où l’utilisation de clip pour cacher visuellement un texte, tout en restant accessible). Donc si le navigateur ne connait pas :before, le lecteur ne le verra pas (pas de chance sur ce coup là ^^).

    Bon, je me suis un peu trop éloigné du sujet là, j’arrête =)

  6. Etrange ce comportement lorsque le JS est désactivé oO

    J’ai testé sous FF9 Os Linux, avec js désactivé et j’ai pas le soucis… Ai-je manqué quelque-chose ?

    • Argf, voyant ton commentaire, je suis allé chercher plus loin car un doute m’est venu.
      Et… je me suis en quelque sorte vautré!
      Jusque là je bloquais le javascript avec l’extension noscript. Très pratique puisque pas besoin d’aller à chaque fois dans les réglages, le bouton est directement dans la barre des plugins.
      Donc petit test, je change de méthode, et vais bloquer javascript depuis les réglages, et… font-face fonctionne. Nooooooooooooon!! >.<

      Moralité : ça fait des années qu'a cause de ce plugin je crois qu'en désactivant JS, font-face ne fonctionne pas -_-'

      Donc désolé pour la fausse alerte, et je ne m'explique pas pourquoi noscript désactive font-face pour le coup :s

      • Je me disais aussi que j’avais testé avec l’extension “webdeveloper” sous firefox et aucun souci même en désactivant le javascript.
        Effectivement, ton extension est un mystère, elle bloque peut-être les formats spécifiques des fonts en plus des scripts (d’où ma première hypothèse que la font se chargeait pas).

        En tout cas ça confirme que tu es un vil fourbe et que tu me dois une boite de cookies :D

      • Haa! Ça me rassure !

        S’eut été dommage que certaines propriétés css3 soit dépendantes du JS ;-)

        Je pense que justement avec les transitions, les vidéos etc. on va pouvoir s’affranchir un peu plus du JS (bonne ou mauvaise chose, c’est un long débat…)

        En tout cas, beau formulaire ; )

      • Quinze ans après… je comprends tout à fait l’erreur, je l’ai faite aussi il y a quelques mois. Je ne sais pas pourquoi NoScript bloque font-face par défaut. Peut-être parce que certaines fontes étant en SVG, c’est-à-dire XML, on pourrait y mettre de vilaines choses, des scripts js internes et malicieux ?

        (rien à voir, mais “Notifiez-moi des commentaires à venir via émail.”, Stéphanie ? “émail” =D ?)

  7. Salut moi je viens de faire un formulaire de contact dans un site html local et lorsque je clique sur le bouton envoyer : une page html s’ouvre et affiche le contenu du fichier traitement.php.
    SVP ou est le problème est ce que parce que le site est local ? ou c’est mon code ?
    Voici le code que j’ai inséré dans body:

    Formulaire de contact

    Votre nom :
    Votre prénom :
    Votre email
    Le motif de votre messageRenseignement
    Probleme technique
    Partenariat
    Votre message

    et voici le contenu du fichier traitement.php :

    Merci d’avance

    • Bonjour,
      le PHP ne passe pas dans les commentaires, question de sécurité. Sinon oui en local sans traitement côté serveur ça ne marchera pas. Je vous conseil de chercher un petit tutoriel pour l’envoie de mail en PHP, il y en a pleins sur le net.

      Bon courage

    • Le champ pour récupérer le mail du client ? Ou le mail pour se le faire envoyer ? Il faut récupérer les données du formulaire et les traiter côté serveur pour se le faire envoyer, rien à voir avec le HTML5, en général c’est en PHP en web mais d’autres technologies sont envisageables :)