Hello Friends, Today, I will share a simple snippet based on creating a Contact form with floating label CSS animation. I have created another contact form that I made using bootstrap. Check that out whether you haven't already.
In this contact form UI card design, I have used three input elements with a label underneath it. Now initially, the label will be inside the input elements. Whenever someone clicks on those input elements to write their pieces of information, the label will move to that input element's top with a smooth transition effect.
To create this snippet, I have plain HTML and CSS and didn't use any javascript or jquery code. You can use this contact form in your project instead of using a traditional way of UI design.
In the HTML markup, I have taken a div element named 'wrapper' and placed all the content inside it. I have also taken three div elements named 'box' and provided an input element and a label inside it. Underneath all the 'box' div element, I have placed a submit button and forgot password text.
You May Also Like:
In the CSS part, I have used basic styling to put all the elements in the right place. I have used CSS margin padding, position, size, and CSS focus and valid selectors to create the animation of the floating label.
Instead of explaining any further, I am providing you with the code. Please make one HTML and one CSS file and copy and paste the following code and save. Run the project in the browser and modify it according to your needs by changing the value of elements used here.
HTML
CSS
I hope it helps. Please follow our social profiles to keep updated. Thank you.
Post a Comment
Please do not enter any spam link in the comment box.