How to create Contact Form using HTML CSS using animation

  • Post category:CSS

Get the code of Contact Form using HTML CSS and watch video tutorials. You can practice using our code editor. Our practical guide will make your learning journey much easier. You can explore the tutorial and learn.

<h2>Contact Form</h2>
<div>
<form action="#">
  <input type="text" placeholder="Enter Name"><br>
  <input type="text" placeholder="Enter Subject"><br>
  <textarea rows="5" placeholder="Message..."></textarea><br>
  <input type="submit" value="SEND">
</form>
</div>
h2 {
  text-align: center;
  background: pink;
  padding: 5px;
}
input[type="submit"] {
  background: black;
  color: white;
  border: none;
  padding: 5px 20px;
  margin-top: 20px;
  border-radius: 50px;
}
div {
  display: flex;
  justify-content: center;
}
form {
  background: lightgreen;
  padding: 20px;
  border: 1px solid;
  border-radius: 10px;
  animation-name: formanimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes formanimation {
  from {
    background: lightgreen;
  }
  to {
    background: yellow;
  }
}
input {
  margin-bottom: 15px;
}