المدة الزمنية 19:51

How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design

بواسطة GreatStack

150 600 مشاهدة

4 K

تم نشره في 2021/06/29

Learn How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design Tutorial Step By Step For Beginners ❤️ SUBSCRIBE: https://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: /watch/IWkvdjy39vI3v Image Download: https://www.pexels.com/photo/time-lapse-photography-of-river-2150347/ ----------------------------------------- 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 👉 https://easytutorialspro.com/go/course/ ------------------------------------- Recommended Videos: Learn Complete HTML and CSS from basics: ► /playlist/PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU Make A Complete Website for college using HTML & CSS: ► /playlist/PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5 How to make a Business website step by step: ► /watch/oK0F6_HHv99HF How to make personal resume website step by step: ► /watch/IGbjuE8NFCqNj How to make fitness website design using HTML CSS: ► /watch/okOj-XBAPb4Aj How to make an Ecommerce Website Design: ► /playlist/PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g How to make a Job Portal website design with HTML & CSS: ► /watch/QDBe-a8xgHcxe How to make travel website design with HTML CSS Bootstrap: ► /watch/8fMU9cqEaiAEU ------------------------------------- Affordable web hosting (coupon- EASYTUTORIALS) 👉 https://easytutorialspro.com/hosting/ My recommended tools and tutorials 👉 https://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: ► /channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join ------------------------------------- Like - Follow & Subscribe us: ◼️ YouTube: https://goo.gl/tTFmPb ◼️ Facebook: https://goo.gl/qv7tEQ ◼️ Twitter: https://twitter.com/ItsAvinashKr ◼️ Instagram: https://instagram.com/iamavinashkr/

الفئة

الكلمات

How to make contact form

Html contact form

Contact form design

Create contact form using html css

Html css contact form design

Contact form for website

Contact form in website design

HTML form design

Contact form UI design

Contact form design tutorial

Make a contact form step by step

عرض المزيد

تعليقات - 161

@

@zcoding8355منذ 3 سنوات Cool! Smart, clear, and concise. excellent job! Just one thing, it should have been responsive. 12
@

@meriemmery7648منذ 2 سنوات You are the most amazing designer I have ever seen..God willing, you will succeed 2
@

@Threenineswon20racksقبل 8 أشهر Didn’t work at first…. Then I gave input and label a class… worked nicely.. thank you sir
@

@abdikanin3196منذ 3 سنوات I love Your channel very clear, simple and easy to follow Amazing! 1
@

@shohelmia6152منذ 3 سنوات The video is very helpful. Thanks. Keep making this kinds of video.
@

@rozyrozy4092منذ 3 سنوات I am from Bangladesh, now i am your big fan, thank you very much
@

@aswath2359منذ 3 سنوات 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?. 3
@

@zachfenton608منذ 3 سنوات awesome, well organized and super userful
@

@challengeforcreating9768منذ 3 سنوات Liked all of your videos! Great fan of your!
@

@fruitstew1009قبل 4 أشهر awesome tutorial, exactly what i needed! thank you so much!
@

@devendranmoodley9176العام الماضي 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?
@

@gopalparmar9230منذ 3 سنوات very simple and innovative way u taught us sir!!! thank you for this video tutorial !!thousand clapppppp***
@

@Svetkachalinaمنذ 2 سنوات 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, id="hidden2" class="buttons"> the icon and the text "Your Email" are falling down again, not staying up as the others. What could go wrong? ....وسعت 6
@

@ritikprakash802منذ 3 سنوات 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
@

@georgetomeh8898منذ 3 سنوات 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. 6
@

@mx4danxقبل 8 أشهر 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?
@

@larrabellbuar974منذ 2 سنوات Hello, i would like to ask what kind of software do u use for this one
@

@rimjhimpatel1159منذ 3 سنوات Thank you so much sir this video is very helpful for me.
@

@MrJingdمنذ 2 سنوات 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. 3
@

@LewisJones-lf4fdالعام الماضي 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, id="hidden5" class="buttons"> the other forms on the site have been effected is there any way around this? ....وسعت 1
@

@chuanhsieh6021قبل 8 أشهر 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 id="hidden6" class="buttons"> the page like and it won't change or move in the center. Where did I went wrong here? ....وسعت
@

@Mahesh717منذ 2 سنوات 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.
1
@

@msbaloch9854منذ 3 سنوات Amazing sir also add functionality on submit button 1
@

@meriemmery7648منذ 2 سنوات I need this coded Where can I find it .. I opened all the pages in the description and did not find it 1
@

@latika7040منذ 3 سنوات He should have 100K Likes at this video 1
@

@riddlesplus4147منذ 2 سنوات 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.
@

@MuradHasanAlveeمنذ 3 سنوات Sir html CSS and JavaScript use Karke video upload Karo bohut help hoga
@

@XanimationXالعام الماضي 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 1
@

@robiulhasan9553منذ 3 سنوات 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 id="hidden10" class="buttons"> for label text(Your name) not working on input. what is the reason sir?? From Bangladesh ....وسعت
@

@marjiaafifaprithibi209منذ 3 سنوات input:focus~label isn't working for me? what can be the reasons? 2
@

@ALBDevمنذ 3 سنوات Can you make a video on how to send message from this form? I'd appretiate it. Magnificent video btw. 1
@

@evelinlopez6195العام الماضي hi thank you for this video why do you put the star on css at the beginning?
@

@sankisolder1767منذ 2 سنوات 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??
@

@thomasleo7921منذ 3 سنوات Please make a tutorial How to make a website like youtube.
@

@giridharanjeyanthgiri5684العام الماضي Plz make video how to a announcement section in website using html and css .I have summit my project next week .plzzz
@

@marcoalbin7617قبل 5 أشهر thanks boss
transition is not doing the job
added to label as you did but no effect
@

@creativeamayمنذ 3 سنوات I want Video Complete Tutorial Of Website Creating mean using html css js and database management SQL server and more
@

@Uveltمنذ 3 سنوات I followed the "Make Working Contact Form With PHP" tutorial but I ended up getting errors in the .php file and nothing working.
@

@SanaUllah-qm6wvمنذ 3 سنوات Sir g jo head section me meta tag as k kia matlb hai?
@

@mysticrimeaiمنذ 3 سنوات 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 id="hidden12" class="buttons"> 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. ....وسعت
@

@davya.7679منذ 2 سنوات 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 ?? 1
@

@ayenijonathan327منذ 3 سنوات When some puts information does it go to your email as in like the owner of the website
@

@ishusirohi4884منذ 2 سنوات how to achieve this animation without using required please help me sir
@

@khaza0916منذ 3 سنوات 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
@

@xtylishali7080منذ 3 سنوات Sir kindly Jo picture use karye vo be nechye de deya karye
@

@riceeeee00العام الماضي The form overlaps when I scroll up how do I fix that ?
@

@nkunzijosephمنذ 2 سنوات How can i create a form that sends data to my phone number and also sends data to users phone number
@

@ligerwatt5324منذ 2 سنوات I followwd your steps but icons and text are not in same line. Why???
@

@firashdelawar1671منذ 3 سنوات Textarea only worked as required field. why?
@

@creativeamayمنذ 3 سنوات 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 1
@

@nisahilham8890منذ 2 سنوات From where I'll find the source code?
@

@steve-sm6icقبل 11 أشهر Textarea label keep staying on top opf the box when it is blank
@

@manahilshah886منذ 3 سنوات How to add 3 or 4 slides in a header means " | slides| slides|slides| "
@

@rohitsinghrawat6391العام الماضي there is bug that if email is not of correct format the email label will still come down
@

@parthdhanani3720منذ 3 سنوات Kese pata kare ki kisne use kiyahe ke nayi batao 1
@

@andrewilson3722العام الماضي Everything work, except; input:vaild~label, it stays on top of the input field and not going back in the input field