Formulaire de contact avec CSS3

L'une des sections les plus importantes de tout site Web est le formulaire de contact, qui peut être aussi simple que d'ajouter quelques champs simples et un bouton pour envoyer ces informations saisies, mais nous pouvons toujours aller un peu plus loin et si nous sommes créatifs, implémentez un formulaire de contact qui remplit non seulement sa fonctionnalité inhérente, mais fournit également un effet visuel et convivial.

Voyons ensuite les étapes à suivre pour la mise en place de ce formulaire qui simulera une enveloppe qui au survol du curseur de la souris permettra à l'utilisateur de renseigner les données au sein de ce qui sera une lettre, et tout cela à l'aide de HTML Oui CSS3.

Actifs ou ressources

Nous devons d'abord avoir notre enveloppe où ira notre lettre, pour cela nous utiliserons deux images différentes, une du haut de l'enveloppe et une autre du bas, qui, combinées aux transitions, nous donneront l'effet que nous voulons.

Comme on peut le voir, elles ne sont pas compliquées du tout, cependant, ces images sont dans le référentiel créé pour cet exemple que vous trouverez à la fin du tutoriel dans le lien de téléchargement correspondant.

Construction de forme

Nous allons d'abord créer un fichier HTML qui s'appellera formulaire_contact.html qui contiendra notre formulaire en tant que tel et l'inclusion du fichier .css qui se chargera de gérer ses styles ainsi que les transitions, voyons à quoi cela ressemble :

 Formulaire de contact
Salut!
Message:
Entrez vos coordonnées
Nom : Courriel :

Il ne nous reste plus qu'à créer notre .css appelé styles.css et là, placez des styles pour notre forme et utilisez les transitions pour générer l'effet souhaité, nous allons d'abord modifier un peu l'apparence de notre corps pour lui donner l'apparence d'une lettre :

 corps {arrière-plan : #ccc url ('img / bg_carta_fuera.png.webp'); couleur : # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; marge : 20px auto 0; hauteur : 1000px ;} h1 {marge-bas : 20px ; text-align: center; font-size: 48px; text-shadow: 0 1px 0 # ede8d9; }

Une fois cela fait, nous allons implémenter les transitions dans le div qui contient le formulaire pour cela que nous utiliserons transition dans ses différentes variantes pour chaque navigateur et avec la valeur facilité d'entrée Nous allons vous donner l'effet d'un début et d'une fin lents :

 #form_wrap {débordement : caché; hauteur : 446px ; position : relative ; haut : 0px ; -webkit-transition : tous les 1s easy-in-out .3s ; -moz-transition : tous les 1s easy-in-out .3s ; -o-transition : tous les 1s easy-in-out .3s ; transition : tous les 1s d'entrée-sortie .3s;}

Maintenant avec les pseudo éléments avant Oui malgré nous allons compléter l'effet de la lettre sortant de l'enveloppe, voyons :

 #form_wrap : avant {contenu : "; position : absolue ; bas : 128 px ; gauche : 0 px ; arrière-plan : url ('img / before.png.webp'); largeur : 530 px; hauteur : 316 px ;} #form_wrap : après {contenu : "; position : absolue ; bas : 0px ; gauche : 0 ; arrière-plan : url ('img / after.png.webp'); largeur : 530 px, hauteur : 260 px; }

Enfin, nous ajoutons quelques styles au bouton de soumission afin de contrôler à la fois l'affichage et les effets :

 #form_wrap input [type = soumettre] {position: relative; font-family: 'helvetica'; taille de la police : 24 px; couleur : # 7c7873 ; ombre de texte : 0 1px 0 #fff ; largeur : 100 % ; text-align : centre ; opacité : 0; arrière-plan : aucun; curseur : pointeur ; -moz-border-radius : 3px ; -webkit-border-radius : 3px ; rayon de bordure : 3px ; -webkit-transition : opacité .6s easy-in-out 0s; -moz-transition : opacité .6s facilité d'entrée-sortie 0s; -o-transition : opacité .6s facilité d'entrée-sortie 0s; transition : opacité .6s facilité d'entrée-sortie 0s; } #form_wrap : survoler l'entrée [type = soumettre] {z-index : 1; opacité : 1; -webkit-transition : opacité .5s facilité d'entrée-sortie 1.3s; -moz-transition : opacité .5s facilité d'entrée-sortie 1.3s; -o-transition : opacité .5s facilité d'entrée-sortie 1.3s; transition : opacité .5s facilité d'entrée-sortie 1.3s;}

Voyons donc à quoi ressemble notre formulaire de contact initial lorsque nous l'exécutons dans le navigateur :

AGRANDIR

Si nous passons le curseur de la souris dessus, nous verrons la fonctionnalité que le formulaire s'affiche pour pouvoir saisir les données et envoyer :

AGRANDIR

Comme on peut le voir, la construction de ce formulaire était assez simple et le meilleur de tous est que nous ne sommes liés à aucune bibliothèque externe donc sa mise en œuvre est assez simple sur n'importe quel site web, il ne reste plus à chacun d'étendre l'exemple et d'effectuer le fonctionnalité de l'envoi à l'aide d'un langage de programmation, tel que PHP, Rubis, Python ou Node.js.