Comment créer un Beau Formulaire de Contact en HTML & CSS !

👋 Bonjour et bienvenue dans cette nouvelle vidéo ! Aujourd'hui je vais vous montrer comment créer un Beau Formulaire de Contact en HTML & CSS !
✅ Reçois tous les jours du nouveau contenu sur :
👉 Instagram : urlz.fr/dFEK
🧑‍💻 Mon site : frenchcoder.fr
📃 Les liens :
⌨️ Le code du tuto : codepen.io/fre...
FontAwesome : fontawesome.co...
Google fonts : fonts.google.com/
📖 50 idées de projets en JavaScript : urlz.fr/dFEL
🎦 S'abonner à la chaîne KZbin : urlz.fr/dFEM
📩 Contact : urlz.fr/dFEK
❤️ Un abonné qualifié : S'abonne ▶️ Partage la vidéo ▶️ Laisse un commentaire.

[@chrisvieiramendes3736]

Pour la première fois je tombe sur une vidéo bien expliquer ! C'était clair net et précis mais surtout expliqué de A à Z ! Merci beaucoup pour ce travail ! (En règle générale les personnes qui explique le codage en HTML CSS j'ai plutôt l'impression qu'elles pensent que l'on a déjà 10 ans d'expérience dedans) 🤣😅

[@sediknaili456]

Je voudrai vous dire que vous êtes le meilleur en matière de pédagogie j'ai appris pas mal de choses grâce à vous vous êtes très explicite vous simplifier et vous expliquer très très bein pour rendre tout facile je vous encourage .bonne continuation

[@Saya.misri_aussi-tha01]

Un immense merci pour ta vidéo super explicite. Les infos sont supers claires et précises. Tout est expliqué dans les moindres détails surtout des choses que j'avais pas bien comprises. Encore milles merci. Et le formulaire est grave stylée en plus.

[@hadjoffi6399]

Bonjour petite question ou reçoit-on les envoyer de contact des utilisateurs ? Merci !

[@karima1923]

Je suis débutante et j ai pu compris rapidement votre travail...merci bcp

[@chryselie.]

Ah bon ? Tu as compris comment envoyer le formulaire sur ta boite mail ? Et ça fonctionne chez toi ?

[@kad_rym7511]

Merci d'avoir mis le code à disposition c'est plus simple que devoir tout recopier, il me reste plus qu'à regarder la vidéo pour tout comprendre continue comme ça !

[@chryselie.]

Justement le tuto n'expliques pas le fonctionnement, tu auras donc perdu ton temps précieux comme moi

[@BeBetterNowBBN]

Merci pour cette vidéo qui m'a permit de un formulaire presque identique

[@kevinkonanyao8346]

c'est super cool le cours

[@Firekiking]

Super tuto !! Mieux que Linkedin Learning par expérience

[@va4227]

abonnée 😃 explications très claires et structurée merci !

[@mamadoumouniroubarry6572]

Une très bonne vidéo vraiment j'ai du faire tout le code en te suivant tellement que c'est explicite. Merci beaucoup 🙏🙏

[@eliaslevy-adam2902]

vraiment utile et bien expliqué merci !

[@lemans_fan]

Belle vidéo, en revanche, tu n'expliques pas comment mettre une adresse mail dans le formulaire. Le bouton envoyer ne sert à rien

[@andreavissoh5770]

Merci pour la vidéo 😊❤ Tu es le best 🎉

[@primo8118]

Tu donnes envie d'aimer la programmation

[@marwen7960]

Bravo pour ce travail qui est trés utile pour moi . merci : )

[@martialAccompagnementDeProjets]

merci le gars. bon pedagogue.

[@stephanierigault9462]

Merci beaucoup pour tous ces bons conseils

[@ibrahimatemitokpe6351]

très bonne explication merci beaucoup

[@sancoumbacissokho9977]

un grand merci à vous

[@vainqueurcoco5463]

Bonjour, Excusez-moi, mais où puis-je trouver les formulaires remplis par les utilisateurs ?

[@chryselie.]

Ben oui, c'est ce que je ne comprends pas comment les gens écrivent des éloges sous la vidéo alors qu'il ne donne pas l'essentiel c'est le fonctionnement et le principe de l'envoi du formulaire sur sa boîte e-mail !

[@allrac0021]

Ça l'envoie ou les informations envoyer lorsque l'on clique sur "Envoyer le message" ?

[@va4227]

on dit un groS zespace 😂 merci vidéo geniale

[@fatouomarsaid4288]

Merci beaucoup c'était très utile

[@nailam4734]

Merci beaucoup excellente vidéo

[@lucasdes2181]

Du coup petite question pour récupérer les données de se formulaire et les enregistrer en pdf ou txt en étant offline ?

[@naniozer6616]

merci c'est super bien expliquer mais je voudrais savoir comment le document peut nous revenir

[@hamadouedraogo5711]

merci beaucoup 🙏🙏🙏

[@zakiawb1294]

C'est super bien expliqué. Mercii

[@frenchcoder-developpementw2429]

Avec Plaisir !

[@emmanuellamy1644]

Bonjour super vidéo (le display:flex; ne fonctionne pas)

[@philippemichaud7513]

comment faire pour recevoir les reponse du formulaire? merci

[@Francoisrosnel]

merci beaucoup, ce génial

[@frenchcoder-developpementw2429]

Avec plaisir !

[@yvesprivat7143]

merci enorment pour la formation

[@davedominant9042]

Cool

[@corinnekupczyk2257]

Merci pour cette super vidéo ultra explicite. Si seulement les profs de ma formation nous mettaient des vidéos comme celle-ci à dispo...

[@chryselie.]

Explicite ? pompeuse et inutile puisqu'il n'explique pas le principe de base qui est le paramétrage et l'envoi du formulaire sur la boîte e-mail !

[@jeanmarc4862]

Je veux ajouter a gauche du formulaires des infos de contact et le placer plus a droite, mais comme c'est le body qui centre cela me semble impossible, dommage.

[@erwanhocquard7845]

Salut quand je site une balise cela marche pas je suis obliger de passer par form div button au lieu de .corps formulaire etc... C'est peut être le fait que je j'utilise Sublime Text au lieu de Studio Visual code. Ducoup je c'est pas comment changer la couleur car quand je remplie le formulaire la couleur est blanche donc on voit rien .Help

[@AstraReall]

comment on fait pour que quand il clique sur le bouton envoyer sa nous envoie a notre email?

[@ryanbouanani8795]

faut un language back end pour faire sa

[@pierreroux9721]

Bonjour, votre tuto est très bien, mais s'il vous plait, corrigez-vous sur les " En fait" qui vous servent de virgule. Sur le code bravo.

[@onenparle..vousdecidez7892]

Et moi qui pensait que vous alliez paramétrer le moyen de le rendre opérationnel. .. contenu du message et adresse courriel obligatoires puis parametrage de l’adresse courriel pour recevoir les messages.

[@frenchcoder-developpementw2429]

Et bien ce n'est pas possible de le faire uniquement en HTML & CSS d'où le titre de la vidéo : "[...] en HTML & CSS !"

[@waveyt7498]

help me j'arrive pas a 43:00 sa ne veux pas deplacer les icones

[@sorceleur3789]

superbe vidéo (j'ai pas tous regardé vue que il y avait des trucs que je savais déjà faire) juste une question le formulaire est la mais il ne marche pas il va pas envoyé le message des personnes qui écrivent sur ton site comment faire? javascript? si oui il y aurait il une vidéo que tu me conseillerez

[@frenchcoder-developpementw2429]

Javascript ou PHP

[@sofiaaaa00000]

Bonjour ! Merci pour vidéo Juste dans le form.corps-formulaire display :Flex; ne fonctionne pas que puisse je faire?

[@nicou91270]

Bonjour, j'ai bien aimé votre vidéo. Comment faire pour associé une adresse mail pour recevoir les messages envoyés depuis le formulaire contact?

[@BrianCoding]

Hello, tu as la fonction mail de php qui pourrait t'aider ! Moi c'est ce que j'ai.

[@nicou91270]

@@BrianCoding merci c’est gentil mais comment on fait ? Y-a-t-il des tutoriels stp à ce sujet ?

[@islamikhlasshaidra]

bonjour je n'arrive pas à faire le front seperation

[@eddyselemani4896]

merci

[@abachiahmed6731]

Merci 👍👍👍👍👍👌👌

[@kytarist4425]

Bonjour ! Super vidéo. J'ai néanmoins un tout petit soucis, je n'arrive pas à changer la couleur outline. Elle reste toujours en bleu. Comment résoudre ceci ?

[@OoOFoxeurOoO]

Au top ;)

[@frenchcoder-developpementw2429]

Merci !

[@anffanehadjidine9924]

merci beaucoup mais vous pouvez faire la meme chose mais en le liant avec le php et mysql genre recuperer les donnees qu'on va les inserer la dessus merci.

[@chryselie.]

Tu n'expliques pas comment rendre ton formulaire fonctionnel, tu passes trop de temps sur le css. La complexité d'un formulaire de contact c'est l'envoi du formulaire sur son e-mail, à priori l'html / css est connu par les gens qui codent de façon basique. Refais ta video ce sera plus efficace pour les utilisateurs. C'est mon point de vue. Ici j'ai perdu temps à espérer avoir un formulaire fonctionnel et non !

[@lumieresoso]

super!!!

[@frenchcoder-developpementw2429]

Merci

[@easyschool7381]

Elle sont enregistré ou les donnés ? comment on recoit les messages des utilisateurs ?

[@frenchcoder-developpementw2429]

Il s'agit juste ici d'une interface réalisée en HTML & CSS donc qui ne fonctionne pas. Il faut utiliser des technologies backend comme le PHP & MySQL pour la rendre fonctionnelle

[@easyschool7381]

@@frenchcoder-developpementw2429 Ca marche merci! peut-être une vidéo de prévu sur ce sujet?

[@frenchcoder-developpementw2429]

@@easyschool7381 C'est noté!

[@louisvandevelde]

Pourquoi injecter du code inutile... C'est dommage, ton formulaire est très beau, je l'ai refait à l'identique en supprimant le code "pour ennuyer mon monde". C'est dommage car cela rend plus difficile la tâche des débutants.

[@patrickpayet7591]

Salut cava ? j'ai copier coller tn code mais comment parametrer pour que ca envoi directement le mail car ca marche pas chez moi?

[@frenchcoder-developpementw2429]

Hello ! Ce n'est pas possible en utilisant que de l'HTML & CSS. Il faut utiliser un langage back-end (côté serveur)

[@mamandubouniteur3187]

Tu utilise quel éditeur de texte stp

[@oursd5794]

J'ai un projet de site web à rendre pour demain, je savais pas faire de page contact. Ton code m'a sauvé, envoie moi ton paypal quand tu veux

[@frenchcoder-developpementw2429]

Super, content que ça ait pu t'aider :) Voici mon Paypal aha : paypal.me/frenchcoder

[@largo13009]

Merci pour la vidéo. Comment fait on pour transférer les infos du formulaires sur une boîte mail ? Merci.

Il faut un c^té serveur (en PHP par exemple) et utiliser la fonction mail(destinataire, titre, contenu, en-tête). C'est un autre travail avec un autre langage ...

[@jean-marclin3153]

d'accord mais comment on le fait fonctionner ?

[@Rystaal]

[EDIT, Problème Résolu] Salut! j'ai un soucis, lorsque je copie les icones via font awesome, même en faisant exactement ce que tu nous présente, soit l'icone s'affiche sous la forme d'un carré simple au lieu de l'icone voulue, soit elle ne s'affiche carrément pas... pourrais tu m'éclairer stp?

[@frenchcoder-developpementw2429]

Salut, alors as-tu bien importé la bibliothèque dans ta balise comme dans la vidéo ? Et sinon, est ce que ta balise est bien sous la forme fab fa... ? Sinon, si ça ne fonctionne pas c'est que tu as sélectionné une icône payante

[@Rystaal]

@@frenchcoder-developpementw2429 Alors, oui, j'ai bien mit la bibliothèque dans la balise comme vu dans la vidéo, mes balise sont bien dans le bon format. Pour les 2 dernières il devait s'agir d'icone payante je suppose (même si j'ai fait attention à ne pas prendre d'icone nécéssitant un compte "pro"). Par contre j'ai toujours ce soucis d'affichage des icones, à la place je n'ai qu'une carré vide (un peu comme lorsqu'on envoie un emoji à un téléphone qui n'est pas capable de le recevoir car trop vieux). J'utilise chrome.

[@frenchcoder-developpementw2429]

@@Rystaal C'est bizarre. Rien ne s'affiche dans la console du navigateur ?

[@Rystaal]

​@@frenchcoder-developpementw2429 Alors je suis vraiment un profane donc je ne vois pas ce que tu veux dire par "console" si ce n'est peut être afficher le code source de la page (dsl je suis totalement noob ^^) Tout est là sauf les icones, à la place il y a une carré vide, j'ai essayé aussi de prendre directement le cdn de font awesome au cas où (fontawesome.com/account/cdn), et d'essayer ce dernier à la place de celui de cdnjs, mais dans les 2 cas, rien n'y fait, toujours cette case vide à la place des icones..

[@Rystaal]

@@frenchcoder-developpementw2429 ok c'est bon j'ai trouvé la console avec Ctrl shift I, voici ce que ca me donne: The value "" for key "initial-scale" is invalid, and has been ignored. j'ai pourtant mit exactement ce que tu as montré, soit

[@ib3205]

33:18

[@satisfactionduty9808]

J'ai vu la video sur comment faire une page de site e commerce, c'est super bien expliqué, mais je me demande comment faire pour le paiment sur un site e commerce et aussi comment faire d'autres pages dans le site et configurer les items pour qu'ils puissent etre ajoutés à la liste de course des clients

[@frenchcoder-developpementw2429]

Ce n'est pas possible avec uniquement de l'HTML et du CSS malheureusement. Tu peux te renseigner sur l'API de paiement Stripe par exemple :) Il faut également que tu apprennes des langages back-end comme le PHP/JS/Python

[@satisfactionduty9808]

@@frenchcoder-developpementw2429 Merci tellement pour ce contenu gratuit de qualité ! :D

[@frenchcoder-developpementw2429]

@@satisfactionduty9808 Je t'en prie :) Content que ça te plaise

[@linamibambou4092]

Moi j’ai un problème au niveau de la partie du message sinon le reste c’est nickel

[@daniellevybanga8953]

Bonjour je suis débutant dans le domaine et j'ai vraiment besoin de conseils

[@amedkiemtore8606]

pourquoi je t'es pa decouvert tres tot. C'est clair ,c'est fluide bref du fais de l'exellent taf

[@frenchcoder-developpementw2429]

Merci aha :)

[@lioneltadoum4064]

en vrai frerot...

[@Isaac-Fitness]

Top frèreo 👍🏿

[@frenchcoder-developpementw2429]

Merci !

[@philippecontamin9944]

bonjour, pourrais tu me dire tous les logiciels que tu utilises. si j'ai bien écouté tu utilises open editors et font awesome pour le moment je ne fais qu'écouter je bosse sur un appart qui passera en Lcd bientot. Et des que j'ai plus de temps j'attaque tous tes contenus pour commencer a coder

[@philippecontamin9944]

merci beaucoup c'est top

[@frenchcoder-developpementw2429]

Salut ! Pour ce tuto j'utilise Visual Studio Code pour l'éditeur de code. Pour voir le résultat j'utilise un navigateur, dans mon cas Google Chrome. Pour les icônes oui j'utilise font awesome et pour la police j'utilise Google Fonts. Et voilà ! Bon courage pour la suite :)

[@philippecontamin9944]

Je regarde ça dès que j'ai un moment mais encore merci pour ces tutos qui même moi à 45 balais ça me paraît presque clair 😆. En tout cas je vais commencer à appliquer tes recommandations de tes tutos et je verrai bien. Merci encore 👍

[@Artycryptoastucespoursel-yi4nq]

Mais du coup c'est ou qu'on recoit le message ?

[@chryselie.]

Comment faire pour recevoir les messages sur sa boîte mail ? Personne n'explique avec précision. Du code du code bla bla bla... Un utilisateur basique a besoin d'un tuto court et efficace ! Ici on a le code et après ? 1h de video c'est pas efficace du tout et le formulaire ne fonctionne pas.

[@finakerrs4861]

On dirait Graven qui parle.

[@salkaahmedvall7084]

👏👏👏👏👏👏👏👌👌🎩

[@VincentVisionOff]

Salut, super vidéo mais beaucoup trop longue, car tu va trop loin dans tes explications et tu te répète beaucoup trop.

[@VictorSch08]

insupportable ton clavier

[@abdallahlakouf]

C'est top.merci.

[@frenchcoder-developpementw2429]

Je t'en prie ! :)