Duration 19:51

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

150 607 watched
0
4 K
Published 29 Jun 2021

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/

Category

Show more

Comments - 161
  • @
    @zcoding83553 years ago Cool! Smart, clear, and concise. Excellent job! Just one thing, it should have been responsive. 12
  • @
    @meriemmery76482 years ago You are the most amazing designer i have ever seen. God willing, you will succeed. 2
  • @
    @Threenineswon20racks8 months ago Didnt work at first. Then i gave input and label a class worked nicely. Thank you sir.
  • @
    @abdikanin31963 years ago I love your channel very clear, simple and easy to follow amazing! 1
  • @
    @shohelmia61523 years ago The video is very helpful. Thanks. Keep making this kinds of video.
  • @
    @rozyrozy40923 years ago I am from bangladesh, now i am your big fan, thank you very much.
  • @
    @aswath23593 years ago 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
  • @
    @zachfenton6083 years ago Awesome, well organized and super userful.
  • @
    @challengeforcreating97683 years ago Liked all of your videos! Great fan of your!
  • @
    @fruitstew10094 months ago Awesome tutorial, exactly what i needed! Thank you so much!
  • @
    @devendranmoodley9176last year 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?
  • @
    @gopalparmar92303 years ago Very simple and innovative way u taught us sir! Thank you for this video tutorial! Thousand clapp*.
  • @
    @Svetkachalina2 years ago 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, . ...Expand 6
  • @
    @ritikprakash8023 years ago 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.
  • @
    @georgetomeh88983 years ago 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
  • @
    @mx4danx8 months ago 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?
  • @
    @larrabellbuar9742 years ago Hello, i would like to ask what kind of software do u use for this one.
  • @
    @rimjhimpatel11593 years ago Thank you so much sir this video is very helpful for me.
  • @
    @MrJingd2 years ago 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-lf4fdlast year 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, . ...Expand 1
  • @
    @chuanhsieh60218 months ago 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 and it won't change or move in the center. Where did I went wrong here? .. ...Expand
  • @
    @Mahesh7172 years ago 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
  • @
    @msbaloch98543 years ago Amazing sir also add functionality on submit button. 1
  • @
    @meriemmery76482 years ago I need this coded where can i find it. I opened all the pages in the description and did not find it. 1
  • @
    @latika70403 years ago He should have 100k likes at this video. 1
  • @
    @riddlesplus41472 years ago 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.
  • @
    @MuradHasanAlvee3 years ago Sir html css and javascript use karke video upload karo bohut help hoga.
  • @
    @XanimationXlast year For some reason, after adding theand the transition code, nothing happens. I ahve tried using different browsers but the result is the same. 1
  • @
    @robiulhasan95533 years ago 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" for label text(your name) not working on input. What is the reason sir? From bangladesh. ...Expand
  • @
    @marjiaafifaprithibi2093 years ago Input: focus~label isn' t working for me? What can be the reasons? 2
  • @
    @ALBDev3 years ago Can you make a video on how to send message from this form? I' d appretiate it. Magnificent video btw. 1
  • @
    @evelinlopez6195last year Hi thank you for this video why do you put the star on css at the beginning?
  • @
    @sankisolder17672 years ago 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?
  • @
    @thomasleo79213 years ago Please make a tutorial how to make a website like youtube.
  • @
    @giridharanjeyanthgiri5684last year Plz make video how to a announcement section in website using html and css. I have summit my project next week. Plz.
  • @
    @marcoalbin76175 months ago Thanks boss
    transition is not doing the job
    added to label as you did but no effect.
  • @
    @creativeamay3 years ago I want video complete tutorial of website creating mean using html css js and database management sql server and more.
  • @
    @Uvelt3 years ago I followed the " make working contact form with php" tutorial but i ended up getting errors in the. Php file and nothing working.
  • @
    @SanaUllah-qm6wv3 years ago Sir g jo head section me meta tag as k kia matlb hai?
  • @
    @mysticrimeai3 years ago Hi
    this is great btw i am making this as my project for college part of my web and i am having some trouble aboutso 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.
    ...Expand
  • @
    @davya.76792 years ago 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
  • @
    @ayenijonathan3273 years ago When some puts information does it go to your email as in like the owner of the website.
  • @
    @ishusirohi48842 years ago How to achieve this animation without using required please help me sir.
  • @
    @khaza09163 years ago 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.
  • @
    @xtylishali70803 years ago Sir kindly jo picture use karye vo be nechye de deya karye.
  • @
    @riceeeee00last year The form overlaps when i scroll up how do i fix that?
  • @
    @nkunzijoseph2 years ago How can i create a form that sends data to my phone number and also sends data to users phone number.
  • @
    @ligerwatt53242 years ago I followwd your steps but icons and text are not in same line. Why?
  • @
    @firashdelawar16713 years ago Textarea only worked as required field. Why?
  • @
    @creativeamay3 years ago 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
  • @
    @nisahilham88902 years ago From where i' ll find the source code?
  • @
    @steve-sm6ic11 months ago Textarea label keep staying on top opf the box when it is blank.
  • @
    @manahilshah8863 years ago How to add 3 or 4 slides in a header means " | slides| slides|slides| "
  • @
    @rohitsinghrawat6391last year There is bug that if email is not of correct format the email label will still come down.
  • @
    @parthdhanani37203 years ago Kese pata kare ki kisne use kiyahe ke nayi batao. 1
  • @
    @andrewilson3722last year Everything work, except; it stays on top of the input field and not going back in the input field.