How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design
Вставка
- Опубліковано 17 жов 2024
- 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...
-----------------------------------------
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
👉 easytutorialsp...
-------------------------------------
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)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ 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:
◼️ UA-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
You are the most amazing designer I have ever seen..God willing, you will succeed 🤲
Didn’t work at first…. Then I gave input and label a class… worked nicely.. thank you sir
Cool!😎 Smart, clear, and concise... excellent job! Just one thing, it should have been responsive.
I am from Bangladesh, now i am your big fan, thank you very much
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.
Hello, this is responsive webpage?
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: ua-cam.com/video/oYRda7UtuhA/v-deo.html
Hi, very good video! But I have a question: where will I be able to see received messages?
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
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
awesome tutorial, exactly what i needed! thank you so much!
Glad it helped!
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?
hi thank you for this video why do you put the star on css at the beginning?
I want Video Complete Tutorial Of Website Creating mean using html css js and database management SQL server and more
He should have 100K Likes at this video
I need this coded Where can I find it .. I opened all the pages in the description and did not find it
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...
🙋🙋
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
Thank u very much sir, God Bless
Plz make video how to a announcement section in website using html and css .I have summit my project next week .plzzz
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?...
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?
Liked all of your videos! Great fan of your!
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?
badhiya hai..
Amazing sir also add functionality on submit button
yes that would be so helpful
@@nicksharman1886 yeah
Sir i love From Bangladesh
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, bro!
God bless you!!!
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
Keep going.
We love you
very helpful
Thank you so much sir this video is very helpful for me.
thank you sir
Sir html CSS and JavaScript use Karke video upload Karo bohut help hoga
Excellent thank you...
nice video.. helpful thanks
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: ua-cam.com/video/sGQSz22U8VM/v-deo.html
2. send form data using PHP: ua-cam.com/video/Iv93yjdvkWI/v-deo.html
follow any of the above tutorial
input:focus~label isn't working for me? what can be the reasons?
Sir g jo head section me meta tag as k kia matlb hai?
very nice
Thanks brother 👨👦🙂
I love Your channel very clear, simple and easy to follow Amazing!
You deserve my subscription 👍
thank you
Really It's great
Hello, i would like to ask what kind of software do u use for this one
brackets editor, you can use any code editor
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.
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
Such a livesaver. Thanks man
thanks boss
transition is not doing the job
added to label as you did but no effect
thank you
very helpful.
easy explained
Great video keep them coming !!
Awesome! Thanks.
Thanks to you Saud bro
The video is very helpful. Thanks. Keep making this kinds of video.
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
It worked
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??
cool
Thanks you !!!
What dose required do. Please help
Very helpful for me
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"
Invaluable!
Please make a tutorial How to make a website like youtube.
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
Thank you 😊
can you make scroll/ reveal animation , ? it will be a big help in my project .
What's your project sis?
@@msbaloch9854 website
@@remarlynbravo2838 great sis I m also working on website
@@msbaloch9854 its that so, good luck to you. im working this website for my final project.
@@remarlynbravo2838 good luck you too and I m working that website for vision
Awesome 👍
awesome, well organized and super userful
This is great! Thank you
This is so helpful 👍👍
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.
Can i use this coding? I want your permission before :)
Ok, You can use it..
@@GreatStackDev Thank you so much :)
Excellent Tutorial ❤️
how to achieve this animation without using required please help me sir
😍😍😍👍👍👍
Thank you!
You're welcome!
Nice broo, keep up the good work🔥
Thanks 🔥
awesome tutorial, but I do have one error, when I enter something on the email ID box then move to the next box the text on the Email ID doesn't stay up, thanks!
have you added 'required' in input box HTML tag
@@GreatStackDev yes I did added 'required' in the input box
CSS:
input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label{
top: -35px;
font-size: 14px;
}
@@GreatStackDev thus is exactly what I have on my css, can I send you my css and html files so you can check them? 🙏
@@josuesalomon20 sure
please can explain???
input : focus~label ,
Input:valid~label
General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a specified element.
Круто!
I followed the "Make Working Contact Form With PHP" tutorial but I ended up getting errors in the .php file and nothing working.
Is this applicable if I will use sublime text?
yes you can make in any code editor
Sir kindly Jo picture use karye vo be nechye de deya karye
The form overlaps when I scroll up how do I fix that ?
Textarea only worked as required field. why?
How these work we can sent anything
I followwd your steps but icons and text are not in same line. Why???
How to add 3 or 4 slides in a header means " | slides| slides|slides| "
Textarea label keep staying on top opf the box when it is blank
How to share this to another person
plz help when i give input:valid~label it does'nt work, it will still up
wow, now i will done
How can i create a form that sends data to my phone number and also sends data to users phone number
You didn't add the part about linking an email address to the submit button
Kese pata kare ki kisne use kiyahe ke nayi batao
Pls background img download link in video description.
just added image link in the description, please check
same problem here, the icons from font awesome appear like empty crossed boxes
very strange, i have to put fas before fa-user, even tho Font Awesome itself does not show that , the code for user icon is ' ' , but i have to do '', and on that case , everything works