Contact Us Form

Posted by admin at September 10, 2019

This is the simple attractive animated contact us form

Refresh the page to see the effect.

Contact Us Form

RS Chauhan Web Portal

R.S.Chauhan

Contact Us

Step 1 : Create HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css"
    />
    <title>Contact Us Form</title>
  </head>
  <body>
    <div class="container">
      <h1><span class="rs">RS Chauhan</span> Web Portal</h1>
      <div class="wrapper animated bounceInLeft slow">
        <div class="info">
          <h1>R.S.Chauhan</h1>
          <ul>
            <li>xxxxxxxxxxxx</li>
            <li>1911252525215</li>
            <li>srs0447@gmail.com</li>
            <li>rschauhan.in</li>
          </ul>
        </div>
        <div class="contact">
          <h1>Contact Us</h1>
          <form action="#">
            <div>
              <label for="#">Name: </label> <input type="text" name="name" />
            </div>
            <div>
              <label for="#">Company: </label>
              <input type="text" name="company" />
            </div>
            <div>
              <label for="#">E-Mail Address: </label>
              <input type="email" name="email" />
            </div>
            <div>
              <label for="#">Phone number: </label>
              <input type="text" name="number" />
            </div>
            <div class="full">
              <label for="#">Message: </label>
              <textarea name="message" id="#" rows="5"></textarea>
            </div>
            <div class="full">
              <input type="submit" name="submit" value="Send" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Step 2 : Create CSS file.

* {
  box-sizing: border-box;
}

body {
  background: #5f87d1;
  color: rgb(11, 50, 224);
  line-height: 1.6;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 1em;
}
.container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}
ul {
  list-style: none;
  padding: 0;
}
.wrapper {
  box-shadow: 0 0 20px 0 rgba(40, 41, 44, 0.7);
}
.wrapper > * {
  padding: 1em;
}
.info {
  color: #c9e6ff;
}
.rs {
  color: #eeb312;
}
.info h1,
.info ul {
  text-align: center;
  padding: 0 0 1rem 0;
}
.contact {
  background: #f9feff;
}
.contact form {
  display: block;
}
.contact form label {
  display: block;
  font-size: 20px;
  padding: 10px 0;
}
.contact form div {
  margin: 0;
}
.contact form .full {
  grid-column: 1 / 3;
}
.contact form input[type="submit"],
.contact form input,
.contact form textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #63a3db;
}
.contact form input,
.contact form textarea {
  font-size: 20px;
  color: #1b35c9;
}
.contact form input[type="submit"] {
  background: #51e0b1;
  border: 0;
  text-transform: uppercase;
}
.contact form input[type="submit"]:hover,
.contact form input[type="submit"]:focus {
  background: #5f87d1;
  color: #fff;
  outline: 0;

  transition: background-color 2s ease-out;
}

@media (min-width: 700px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .wrapper > * {
    padding: 2em;
  }
  .info h1,
  .info ul {
    text-align: left;
  }
  .contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *