How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design
Vložit
- čas přidán 28. 06. 2021
- Learn How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design Tutorial Step By Step For Beginners
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn how to make a contact form with HTML and CSS. We will add a label for all input fields and these labels will be animated. Whenever we will start typing anything in the input box then the label will move upward from it's position. We will also add icons in each field of this contract form design. This complete contact form with animation will be made using Only HTML and CSS.
Make Working Contact Form With PHP:
• Create Working Contact...
Image Download:
www.pexels.com/photo/time-lap...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ CZcams: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
Cool!😎 Smart, clear, and concise... excellent job! Just one thing, it should have been responsive.
You are the most amazing designer I have ever seen..God willing, you will succeed 🤲
I love Your channel very clear, simple and easy to follow Amazing!
Thanks, bro!
God bless you!!!
Such a livesaver. Thanks man
awesome, well organized and super userful
Liked all of your videos! Great fan of your!
The video is very helpful. Thanks. Keep making this kinds of video.
I am from Bangladesh, now i am your big fan, thank you very much
Didn’t work at first…. Then I gave input and label a class… worked nicely.. thank you sir
Thank u very much sir, God Bless
This is great! Thank you
Great video keep them coming !!
hey brother I really enjoy watching your videos. your really explain everything in detail and I appreciate it. do you have any videos on databases?
Excellent thank you...
Awesome animation 💯💥💥...I need tutorial of adding div and how the div works while we input in css , and display: absolute, relative , fixed ,static and z-index?...
Excellent Tutorial ❤️
Invaluable!
Thank you so much sir this video is very helpful for me.
This is so helpful 👍👍
You deserve my subscription 👍
Really It's great
Thanks brother 👨👦🙂
Thanks you !!!
Thank you 😊
Very helpful for me
Thank you sir
nice video.. helpful thanks
Keep going.
We love you
Awesome 👍
very simple and innovative way u taught us sir!!! thank you for this video tutorial !!thousand clapppppp***
Hello i have a website there i need to change a button apperaing text expl : login button to join / Log in can i do that with inspect and custom css please reply i need help
awesome tutorial, exactly what i needed! thank you so much!
Glad it helped!
Thanks sir 🙏
Nice Tutorial👌👌
Intall live server from extension aftet that you need not to refresh the website after all changes
just right click and open the file from live server
thank you
very helpful.
Sir i love From Bangladesh
badhiya hai..
Thanks bro
This is really cool. I have one question. I followed all your instructions in order to create my own contact form, but it is stuck to the left side of the page like 8:29 and it won't change or move in the center. Where did I went wrong here?
very helpful
Nice broo, keep up the good work🔥
Thanks 🔥
Awesome! Thanks.
Thanks to you Saud bro
Hi! Thank you so much, it's so beautiful and creative! One question. I followed all your instructions but in the Email input, after I added the text, the icon and the text "Your Email" are falling down again, not staying up as the others. What could go wrong?
SEPERATE THE COMMANDS
input:focus~label{
top: -35px;
font-size: 14px;
}
input:valid~label{
top: -35px;
font-size: 14px;
}
the only fix that i could find and i know it's pretty late was changing the HTML code a bit. instead of input type=email, i changed it to input type=text like the others and that seemed to work but i have no idea how i could make it work without doing this.
thank you
easy explained
sir, whenever i add image to background and put it center cover the, image quality goes down and it shows little blur, so why that happens.... any solution...
🙋🙋
I need this coded Where can I find it .. I opened all the pages in the description and did not find it
It worked
very nice
Thank you!
You're welcome!
input:focus~label isn't working for me? what can be the reasons?
It is very helpful. Thank you very much. I have a question: Why did you define width:100% and height:100vh. I meant isn't the same as if you define both as 100%. Thank you in advance for your answer.
width 100% means it will take its normal width 100% and height:100vh means 100% of viewport which means its height will be responsive for all screens hope you get your answer
cool
such a good video i made one with colour changes but it sits so low on a page? how do i bring it up a bit higher on a page?
He should have 100K Likes at this video
hi thank you for this video why do you put the star on css at the beginning?
Can you make a video on how to send message from this form? I'd appretiate it. Magnificent video btw.
link is there in description
@@GreatStackDev thnx
Круто!
Hello, this is responsive webpage?
For some reason, after adding the input:focus~label and the transition code, nothing happens...I ahve tried using different browsers but the result is the same
Amazing sir also add functionality on submit button
yes that would be so helpful
@@nicksharman1886 yeah
I want Video Complete Tutorial Of Website Creating mean using html css js and database management SQL server and more
sir, I have made a contact form like you. But there have one problem, that is when i click on input (Your Name) then its not working.... click just work for label text(Your name) not working on input... what is the reason sir?? From Bangladesh
Sir g jo head section me meta tag as k kia matlb hai?
What dose required do. Please help
if we don't mark the input field as required then the transition fails and the name goes above the box alreayd!!!
So how can we solve that??
There is a bug in this code. If the user puts in an email address without the "@" symbol, the placeholder text will return to the textbox.
The type: 'email' will usually raise a flag if you don't use the '@' symbol somewhere in the input. I have had it still attempt to process it only to be rejected in the response page.
Very professional and organized job. But you need to focus on teaching not showing, because we want to understand how to choose suitable CSS features.
😍😍😍👍👍👍
Hi, very good video! But I have a question: where will I be able to see received messages?
I followed the "Make Working Contact Form With PHP" tutorial but I ended up getting errors in the .php file and nothing working.
Hello, nice tutorial, but how do you make the script that the messages are sending via the form will be received on your email inbox ??
here is the tutorial for that:
1. send form data using javascript: czcams.com/video/sGQSz22U8VM/video.html
2. send form data using PHP: czcams.com/video/Iv93yjdvkWI/video.html
follow any of the above tutorial
Hi
This is great btw i am making this as my project for college part of my web and i am having some trouble about background-image so its now working at all only linear colors are present but i dont know what to do with the background no idea how to put it pls a lil help, im learning a lot from you thanks.
if you apply the image path. For example if your image are in an image folder then type image/background.jpg I had the same problem until I included the preceding image/ . Hope this helps
@@sylvanusjoseph1140 i fixed this way earlier but thanks anyway for ur help
Sir html CSS and JavaScript use Karke video upload Karo bohut help hoga
When some puts information does it go to your email as in like the owner of the website
I have one tutorial for that, please check the video description for that video link
thanks boss
transition is not doing the job
added to label as you did but no effect
Sir kindly Jo picture use karye vo be nechye de deya karye
From where I'll find the source code?
Please make a tutorial How to make a website like youtube.
Textarea only worked as required field. why?
Hello i have a website there i need to change a button apperaing text expl : login button to join / Log in can i do that with inspect and custom css please reply i need help
changing button text in HTML file will be easy. if you want to change using only css then you need to change the button text color same as button background, so that button text will be invisible. after that add new text using css pseudo element like "before" or "after"
Hi, amazing video as usual!
I have one question, I have other forms in my code, and now that I have changed the styling of input and text area, the other forms on the site have been effected is there any way around this?
You can use classes or id's to differ each input and textareas from another.
The form overlaps when I scroll up how do I fix that ?
Plz make video how to a announcement section in website using html and css .I have summit my project next week .plzzz
is this responsive?
Hello, i would like to ask what kind of software do u use for this one
brackets editor, you can use any code editor
how to achieve this animation without using required please help me sir
How can i create a form that sends data to my phone number and also sends data to users phone number
How these work we can sent anything
Mujhe ek Complete Tutorial Video Chahiye jisme aap pura bataye ki ek website banane ke piche kitna mahnat lagta hai aur kaise website banye aur uska Google me show ho aur kaise uske data ko save kare
here it is: czcams.com/video/oYRda7UtuhA/video.html
Source code please sir 🙏
I followwd your steps but icons and text are not in same line. Why???
😘😘😘😘
Kese pata kare ki kisne use kiyahe ke nayi batao
type = "email" has an error ?
How to add 3 or 4 slides in a header means " | slides| slides|slides| "
You didn't add the part about linking an email address to the submit button
how to make this rersponsive
How to send this form? Where is a code?