How to Create Animation registration form in HTML with CSS Source Code

Kunjan Koiri
January 14, 2021

How to Create Animation registration form in HTML with CSS Source Code | Animations form validation CSS

How to Create Animation registration form in HTML with CSS Source Code


Hello friends, we are ready to create a registration form in HTML with CSS. We will know to create input animations form validation in very simple methods.


On this webpage, there is a register/contact form animation, on the page at the top an h1 tag only. We will discuss all steps while getting ready, will provide source code that helps you. Without just waiting let's get started.


We are to explain to you in some steps clearly with source code.

Steps: 1 I’ve taken a one div which class is a container with style width & height background-color along with display: flex; property.

You have a question in your mind why am I use display property because it’s just a simple method to take a three div in a single row, without display flex property we will get with using float property.


Steps: 2 have taken again div which class is main in its - h1, form elements using for decoration in h1 text, margin & fonts property in form elements position, margin, fonts values which is for setting up so that is looking well.


Steps: 3 in the form element we’ve five divs which all class is form-group which helps to design input boxes perfectly, let come into your mind one question why have I taken ids?


You haven’t taken ids in all divs because ID must be unique. So you have taken new ids in all divs, it’s a wrong method to design such as it's not mean that you cannot design well but your code is very unprofessional. Let's come to the point.


Steps:4 on our page one is the submit button with animation which will make an awesome effect with using CSS. Button style is very important because anyone gets a cursor on it will be awesome when you will create then u will fill the moment.


Now all method will be described how to structure the all form element it will be awesome.


Here we will provide a source code that helps you to understand all methods. I praise you all to modify my code & tag me on social media. Thank you for keep visiting...


 HTML Code:

<!DOCTYPE html>

<html lang="en">


<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Contact Form</title>

  <link rel="stylesheet" href="contact.css" />

  <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&family=Roboto&family=Ubuntu&display=swap"

    rel="stylesheet" />

</head>


<body>

  <div class="container">

    <div class="main">

      <h1>ContactUs</h1>

      <form method="POST" action="contact.php">

        <div class="form-group">

          <input type="text" name="name" required />

          <div class="underline"></div>

          <label for="">Name</label>

        </div>

        <div class="form-group">

          <input type="email" name="email" required autocomplete="off" />

          <div class="underline"></div>

          <label for="">Email</label>

        </div>

        <div class="form-group">

          <input type="password" name="password" required autocomplete="off" />

          <div class="underline"></div>

          <label for="">Password</label>

        </div>

        <div class="form-group">

          <input type="number" name="phonenumber" value="+91" required />

          <div class="underline"></div>

          <label for="">Phone Number</label>

        </div>

        <input type="checkbox" id="check" required><label for="check" id=""> I agree with all terms and

          conditions</label>

        <div class="form-group">

          <button type="submit">Submit</button>

        </div>

      </form>

</body>

</html>

CSS Code:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: sans-serif; */
}
.container {
  width: 100vw;
  height: 100vh;
  background: rgb(131, 58, 180);
  background: linear-gradient(
    241deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  width: 25vw;
  height: 62vh;
  background-color: #2f3542;
  color: white;
  font-family: "Baloo Bhai 2", cursive;
  border-radius: 20px;
  /* box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); */
  box-shadow: -3px 7px 54px 8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: -3px 7px 54px 8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -3px 7px 54px 8px rgba(0, 0, 0, 0.75);
}

h1 {
  text-align: center;
  margin: 0px;
  font-family: "Ubuntu", sans-serif;
}
.form-group {
  position: relative;
  margin: 10px 20px 25px;
  font-size: 20px;
}
.form-group input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px;
  font-size: 18px;
  color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.774);
  transition: border 0.5s;
}
.form-group label {
  position: absolute;
  color: #0984e3;
  top: 0px;
  left: 0;
  pointer-events: none;
  transition: top 0.3s;
}
.form-group input:focus ~ label,
.form-group input:valid ~ label {
  top: -20px;
  left: 0;
}
.form-group .underline {
  position: absolute;
  height: 2px;
  width: 0%;
  bottom: 3px;
  background-color: chartreuse;
  transition: width 0.5s linear;
}
.form-group input:focus ~ .underline,
.form-group input:valid ~ .underline {
  /* transform: scaleX(1); */
  width: 100%;
}
.form-group input:invalid ~ .underline {
  background-color: rgba(255, 30, 0, 0.877);
}
button {
  font-size: 20px;
  width: 100%;
  padding: 5px;
  border: 2px solid #0984e3;
  outline: none;
  color: #0984e3;
  background: transparent;
  border-radius: 23px;
  cursor: pointer;
}
#check {
  /* width: auto; */
  margin-left: 18px;
  /* color: #0984e3 ; */
}
label {
  color: #0984e3;
}
button:hover {
  color: white;
  background-color: #0984e3;
}