CSS Design, créer un formulaire de contact
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
54m19
de formation
7
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

CSS Design, créer un formulaire de contact

4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
54m19
de formation
7
leçons vidéo
1
chapitre

Dans ce tuto vidéo, je vous propose de réaliser un formulaire de contact tendance et design que vous pourrez utiliser pour vos clients, pour vous-même ou bien en guise de book de présentation.

Pour cela, nous allons utiliser le langage CSS afin de mettre en forme le code HTML qui constituera notre formulaire.

Ici, l'idée sera de jouer avec les opacités afin de faire apparaître de la transparence au niveau de notre formulaire.
Notre écran sera coupé en deux couleurs dans le sens de la hauteur (voila une petite prouesse technique intéressante à découvrir !)
Notre page web sera 100% responsive. Cela signifie qu'elle s'adaptera automatiquement à la largeur de l'écran qui viendra la visiter.

Au niveau des champs de formulaires ainsi que du textarea, nous jouerons d'une petite astuce CSS qui nous permettra de mettre en place un trompe l'oeil, ceci dans le but d'améliorer l'expérience utilisateur.

Je propose un autre cours sur le design de formulaire et un autre pour devenir incollable sur Flexbox

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des bases HTML
Leçon 2
Mise en forme générale de la page web
Leçon 3
Positionnement du formulaire
Leçon 4
Mise en forme de la section
Leçon 5
Mise en forme des champs du formulaire
Leçon 6
Correction de bugs
Leçon 7
Pour aller plus loin

Table des matières

Leçon 1

Mise en place des bases HTML

08m57
Leçon 2

Mise en forme générale de la page web

10m16
Leçon 3

Positionnement du formulaire

07m47
Leçon 4

Mise en forme de la section

09m10
Leçon 5

Mise en forme des champs du formulaire

13m13
Leçon 6

Correction de bugs

03m10
Leçon 7

Pour aller plus loin

01m46

Aperçus

Avis des apprenants

Détail des avis
4
Commentaires
4,8/5
Note moyenne
5/5
3
4/5
1
3/5
0
2/5
0
1/5
0
Jean-Luc Piedevache
Jean-Luc Piedevache
Publié le 02/10/2026
Merci Carl pour ce formulaire design
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil
Alain Tardif
Alain Tardif
Publié le 31/01/2023
Merci Carl pour ce second formulaire design. Cours clair et pédagogique. Le rendu est vraiment super. Validé 100 % formulaire#2. Le tout, dans la bonne humeur. 👨‍🎓
Carl Brison
Carl Brison
Merci beaucoup Alain ;-)
Doume56
Doume56
Publié le 05/12/2021
Un super tuto, des explications de grande clarté, et au final un très beau formulaire. Merci.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil

Vos questions sur le cours

Que contient le fichier source ?

Le code source de ce tutoriel.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
10,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
54m19 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 791 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données