💎 Animated Contact Form In HTML & CSS | Dark & Light Mode

Learn how to create a responsive contact form with Dark / light themes.

--- Web Design Tutorial ---

Today, we got a special tutorial, we're going to learn how to create a complete responsive contact page from scratch, we're going to be using HTML, and modern CSS techniques such as CSS grid, flexbox, pseudo selectors, keyframes and more. We're also going to use a bit of JavaScript to add some some stunning animations to our contact form and make it interactive, such as the focus/blur animation on the inputs, and the theme switch animation .
This contact us page has a ton of features : Nice looking UI design - Dark and light modes - Interactive input fields - Stunning animations on the input fields - Outstanding theme switch animation ....
Not only that, our contact form will have both dark and light themes, that we can switch between theme using a toggle button in the navbar. And finally by the end of this video, we're going to see how we can make this website completely responsive on any device, so it stays responsive no matter what the size of the device is.

💚 Get template

💚 Get template by Paypal

👍 Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.

🛎 Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

💖 Please feel free to support my channel. Your donation will motivate me and push me to keep making more of these tutorials.

📁 Assets

💻 Start project from scratch (Images and files used in this tutorial)

⏱ Timestamps:
0:00 - Intro
1:33 - Navbar
9:07 - The Actual Contact Form
27:50 - Adding the Wavy Image
32:15 - Adding the Dark Theme
38:50 - Making The Page Responsive

[simonboysen]

Bro your vids is the greatest thing i have come across in my learning, but can you also do some videos with you explaining meanwhile?? please please

[Satisfiyworldmicrojob]

Bro everyone only shows the video of user dashboard with html and css. But no one shows how to create an admin panel. You can create a fully responsive microjob website admin panel as well as user panel. A lot can be learned from one video. Made part by part. Thanks for watching all your videos, I have become your fan myself. 💘💘💘💘

[amanrajput]

one request, if possible rather than just back song if u can explain things while creating ( its just a humble req. )

[amanrajput]

keep it up bro, im with u. As fresher me and other also need some good motivation and how to do things.
you are really great help ( Namaste )

[traffic]

Okay . . . I really loved u mate and I loved your videos, your memes and everything really . . . I ask you please if u can make more videos because, You do a little in too much time . . but i can't judge everyone got he's life and problems . . . but i ask u pleaeslly ♥

[shreybgoel]

Hey kindly answer this question...
I was learning web development ok and then my plan is to goo deeper in this only like learning 3 d web and after that blockchain stuff but yesterday I saw wwdc and saw vision pro and I am confused what to do??
1. Should I switch? Or start focus on ar vr thing? Or should I focus on what I was doing...

2. Also tell like these days there are soo many tools through which a non coder or a normal person can create a website like legit cool and very functional website even with 3d designs sooo what you think is the future of web developers?? Is it still worth to learn or master this skill?

3. Kindly tell should I learn how to make websites that can be viewed or explore through VR headset...
???? If yes how???

[genshingamer]

Hey bro its awesome bro can you make out like some full hours tutorial

[amusedhermit]

could you explain why you do things like bottom -x% and then seem to reverse it with transform: translateY(x%)?.
The whole wave section was pretty hard for me to follow and i wish i had a better understanding of why you did things the way you did

[arushigarg]

Hey amazing tutorial!!!! Kindly help me with a little problem....My code stopped working after wave-wrap when you selected the div class along with svg...What did you do after selecting...kindly help

[ClarkKentPeter]

How would you connect the backend for this video?

[arushigarg]

Hey...this is one of the best tutorial....I need an urgent help from.you....My code for the svg part is not working....when u select svg ...what function do u execute...at 30 :40 of

[yousseftec]

Great Work🔥. Bro are you From Morocco ?

[monikavarada]

Can you tell me how to add wave or share any video of it

[SiTetua]

Hi, it's a awesome web tutorial. Anyway, I'm wondering, what tool you use to generate wave svg? Thanks.

[muhammedshaltoot]

Hey can you tell me what program do you use I have been searched a lot but I didn’t find the program you use so can you tell me the program you use😊 And great job bro❤

[gasoil_gfx]

You are moroccan. Nice to know that. Can you share your socials ?

[amusedhermit]

rem values here are based on 16px, if you normalized your rem to 10px you will need to multiply all the rem values shown by 1.6

[Jalalopa]

How can I. upload this in my Wordpress website?

[muhammedshaltoot]

Hey can you make login and register page with navbar pls I hope you respond❤😅.

[Code_Czar]

Want to collaborate on a video 👀, would love to collab