Formulaire de contact avec icônes graphiques en Css

Accueil > Technique > CSS > CSS Astuces > Formulaire de contact avec icônes graphiques en Css

Livres à télécharger

‹ ›

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :

Sujets que vous pourriez aussi aimer :

Formulaire de contact et icônes graphiques

A l'occasion de cette nouvelle astuce CSS, une fois n'est pas coutume, nous n'allons pas concentrer l'étude sur les réglages de mise en page par les styles. Ici, il est question de découvrir une librairie publique, donc mise à disposition en ligne.

Formulaire Html de contact avec icônes graphiques

Formulaire Html de contact avec icônes graphiques

Il s'agit d'une librairie de polices. Elle permet de transformer des textes en jeux d'icônes pour agrémenter les présentations sans alourdir le poids de la page à télécharger. C'est ce qu'illustre le formulaire finalisé présenté par la capture. Chaque champ à renseigner est annoncé par un visuel très évocateur. La page Web gagne ainsi en clarté et en efficacité.

Sources de travail
Pour la découverte de cette nouvelle astuce Css, nous suggérons d'appuyer les travaux sur un formulaire déjà bien amorcé.

Télécharger le fichier compressé formulaire-contact-icones.rar en cliquant sur ce lien,

Après décompression, vous obtenez le fichier de la page Web (index.htm) accompagné de ses ressources dont les feuilles de styles locales dans le sous dossier Css.

Formulaire Html de contact à enrichir avec des symboles graphiques Css

Formulaire Html de contact à enrichir avec des symboles graphiques Css

Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,

Nous réceptionnons un formulaire de contact effectivement déjà structuré. Il est très proche de celui de la présentation, à quelques détails près. Et ces détails ont une importance cruciale. Fort naturellement, vous remarquez que les icônes graphiques ne sont pas présentes en regard des champs. Il s'agit de l'enjeu de cette découverte. De plus, les textes des zones de texte apparaissent plus sombres. Et pour cause, si vous cliquez dans l'une d'entre elles et que vous débutez la saisie, l'information guide ne disparaît pas. L'utilisateur doit s'en charger. Au cours des astuces précédentes, nous avons découvert l'attribut Html placeholder. C'est lui qui permet de réaliser ce tour de passe-passe automatiquement.

A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Dans l'entête du code Html, vous notez la référence à pas moins de trois feuilles de styles :

...
<head>
<title>Astuce et effet CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ ... /font-awesome.min.css">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
</head>
<body>
...

Les deux dernières sont classiques. La feuille mes-styles.css est utilisée pour l'agencement général de la page. La feuille les-styles.css est exploitée pour la mise en forme et la mise en page du formulaire de contact. Pour contribuer à la rapidité d'un site Web en production, il est préférable de les regrouper pour ne pas multiplier les chemins d'accès. Mais dans ces phases de démonstrations, c'est pour plus de confort que nous les dissocions. Enfin, vous notez la référence à une feuille de styles publique. Elle se nomme font-awesome.min.css et son chemin d'accès complet est donné dans le code. C'est elle qui permet de traduire un texte codé en symbole graphique.

Effacer le texte à la saisie
Pour débuter très simplement, nous proposons de mettre en place ces attributs Html placeholder pour effacer automatiquement les textes guides au moment où la saisie débute. La construction du formulaire de contact se situe plus bas dans le code Html. Elle est placée dans le calque d'identifiant auCentre.

...
<div id="auCentre">

<form action="index.htm" class="carte">
<h2 class="centrer">Nous contacter</h2>
<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Prenom" type="text" value="Votre prénom">
</div>
</div>

<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Nom" type="text" value="Votre nom">
</div>
</div>
...

Vous notez que les informations de guide à la saisie sont inscrites en dur dans l'attribut value des balises input pour les zones de texte. C'est la raison pour laquelle elles ne réagissent pas à la frappe et restent affichées en permanence. Nous devons supprimer cet attribut pour chaque zone de texte et le remplacer par un placeholder.

Dans la première balise Input, remplacer l'attribut value par l'attribut placeholder,

Le même procédé doit être reproduit pour les quatre autres balises input des zones de texte.

...
<form action="index.htm" class="carte">
<h2 class="centrer">Nous contacter</h2>
<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Prenom" type="text" placeholder="Votre prénom">
</div>
</div>

<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Nom" type="text" placeholder="Votre nom">
</div>
</div>

<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="email" type="text" placeholder="Votre email">
</div>
</div>

<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="telephone" type="text" placeholder="Votre numéro de téléphone">
</div>
</div>

<div class="ligne">
<div class="colonne"><i>*</i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="message" type="text" placeholder="Commentaire">
</div>
</div>
...

C'est ainsi que nous remplaçons l'information statique par un guide discret qui sait s'effacer dès lors que l'inscription d'un caractère débute.

Enregistrer les modifications (CTRL + S),
Revenir sur le navigateur et actualiser la page (F5),

Les informations de guide à la saisie apparaissent dans des tons plus atténués. Elles se suggèrent.

Et si vous renseignez l'un ou l'autre champ, vous remarquez avec satisfaction que les aides textuelles s'éclipsent dès lors que le premier caractère est tapé. Et si d'aventure vous veniez à vider l'un de ces champs, l'information de guide réapparaîtrait aussitôt. Voilà donc un premier concept ergonomique fort utile, voire indispensable pour un formulaire Web actuel.

Symboles graphiques
Maintenant, pour la mise en place des icônes, nous allons exploiter une extension qui se nomme Font Awesome. Littéralement, vous pouvez traduire par la police géniale. La référence à sa feuille de styles est créée en entête de code Html, avant les deux styles locaux, comme nous avons pu le constater précédemment. Elle fait elle-même référence à des librairies externes. Pour l'exploiter dans l'attribut class d'un élément Html, il suffit de désigner le nom du style en le préfixant d'un autre nom. Cet autre nom représente le type d'icône, une catégorie en quelque sorte. Dans le fichier proposé dans cette formation, nous n'avons qu'un type et il se nomme fa. Mais vous allez voir que les possibilités d'icônes sont nombreuses. Faut-il encore connaître leurs styles. Ici, nous proposons de défricher le terrain.

Supprimer le symbole de l'astérisque entre les balises i du champ pour le prénom,
Dans la balise i ouvrante, ajouter la liaison au style Css suivant :

...
<div class="ligne">
<div class="colonne"><i class="fa fa-user"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Prenom" type="text" placeholder="Votre prénom">
</div>
</div>
...

Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
Puis, actualiser le navigateur avec la touche F5 du clavier,

Comme vous pouvez le voir, l'icône représentant un utilisateur (user) est bien présente par simple référence à un style.

Icône graphique Css pour formulaire de contact Html

Icône graphique Css pour formulaire de contact Html

Mais pour l'instant, elle apparaît fort petite. La feuille les-styles.css offre un style dédié. Il se nomme tailleXL : .tailleXL{font-size:36px;}. Nous allons donc le combiner avec le précédent style pour l'icône. Pour cela et comme vous le savez, il suffit de les séparer d'un espace.

Revenir dans le code Html et ajouter le style tailleXL dans la balise i,

...
<div class="colonne"><i class="tailleXL fa fa-user"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Prenom" type="text" placeholder="Votre prénom">
</div>
...

Enregistrer les modifications, revenir sur la page Web et l'actualiser (F5),

Combiner des styles Css pour augmenter la taille de l-icône graphique sur le formulaire

L'icône réagit à la taille du texte.

Nous avons confirmation que ces icônes graphiques sont issues d'une police. Par conséquent, elles ne pèsent rien ce qui est fort appréciable pour un site internet.

Avant de poursuivre l'implémentation des autres icônes, nous proposons de découvrir comment il est possible de débusquer d'autres symboles susceptibles de convenir aux conceptions Html, quel que soit le thème.

En haut du code Html, sélectionner l'adresse du premier style :

https://cdnjs.cloudflare.com/ajax/libs/... /4.7.0/css/font-awesome.min.css

La copier avec le raccourci clavier CTRL + C,
Dans un nouvel onglet du navigateur, la coller avec le raccourci clavier CTRL + V,
Réaliser alors le raccourci CTRL + F pour activer la zone de recherche,
Taper le nom du style utilisé : fa-user et valider par Entrée si nécessaire,

Style font awesome pour icônes graphiques Css

Comme vous pouvez le voir, c'est un code alphanumérique interprété par cette librairie qui permet l'injection de l'icône en lieu et place de la balise qui référence le style.

A défaut de documentation, si vous scrutez tous les styles présents, les noms anglais sont très évocateurs comme fa-trash pour l'icône d'une poubelle, fa-arrow-up pour l'icône d'une flèche dirigée vers le haut ou encore fa-hourglass-o pour l'icône d'un sablier.

Forts de ces découvertes, nous allons maintenant pouvoir mettre en place toutes les icônes manquantes.

Revenir dans le code de la page Html,
Supprimer les astérisques des balises i,
Puis, ajouter tous les styles combinés suivants :

...
<div class="ligne">
<div class="colonne"><i class="tailleXL fa fa-user"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Prenom" type="text" placeholder="Votre prénom">
</div>
</div>

<div class="ligne">
<div class="colonne"><i class="tailleXL fa fa-user"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="Nom" type="text" placeholder="Votre nom">
</div>
</div>

<div class="ligne">
<div class="colonne"><i class="tailleXL fa fa-envelope-o"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="email" type="text" placeholder="Votre email">
</div>
</div>

<div class="ligne">
<div class="colonne"><i class="tailleXL fa fa-phone"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="telephone" type="text" placeholder="Votre numéro de téléphone">
</div>
</div>

<div class="ligne">
<div class="colonne"><i class="tailleXL fa fa-pencil"></i></div>
<div class="calqueSaisie">
<input class="zoneSaisie" name="message" type="text" placeholder="Commentaire">
</div>
</div>
...

Enregistrer les modifications et revenir sur le navigateur,
Actualiser la page Web (F5),

Icônes graphiques de polices Web Css sur formulaire de contact Html

Comme vous pouvez le voir, avec des noms de styles fidèles à ce qu'ils doivent représenter et grâce à cette extension font awesome, nous avons réussi à agrémenter sensiblement le formulaire Html de contact sans pour autant alourdir le poids de la page.

Sur Facebook

Sur Youtube

Les livres

Contact

Mentions légales

Toutes les vidéos de formation en informatique

Les livres de formation du Formateur à télécharger