Contact us Window in Pure CSS

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a custom Contact Us form window in Pure CSS. Contact us is a very important aspect of every website which allow users to get in touch with the organisation through mails or such forms. So Contact Us form should be attractive and interactive at the same time easy to understand and use without much complexities.

Here's a preview

New Project.png

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Contact Us Tab</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="background">
  <div class="container">
    <div class="screen">
      <div class="screen-header">
        <div class="screen-header-left">
          <div class="screen-header-button close"></div>
          <div class="screen-header-button maximize"></div>
          <div class="screen-header-button minimize"></div>
        </div>
        <div class="screen-header-right">
          <div class="screen-header-ellipsis"></div>
          <div class="screen-header-ellipsis"></div>
          <div class="screen-header-ellipsis"></div>
        </div>
      </div>
      <div class="screen-body">
        <div class="screen-body-item left">
          <div class="app-title">
            <span>CONTACT</span>
            <span>US</span>
          </div>
          <div class="app-contact">CONTACT INFO : +91 1234 567 890</div>
        </div>
        <div class="screen-body-item">
          <div class="app-form">
            <div class="app-form-group">
              <input class="app-form-control" placeholder="NAME" value="Creo Codigo">
            </div>
            <div class="app-form-group">
              <input class="app-form-control" placeholder="EMAIL">
            </div>
            <div class="app-form-group">
              <input class="app-form-control" placeholder="CONTACT NO">
            </div>
            <div class="app-form-group message">
              <input class="app-form-control" placeholder="MESSAGE">
            </div>
            <div class="app-form-group buttons">
              <button class="app-form-button">CANCEL</button>
              <button class="app-form-button">SEND</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #f6f7fc;
  font-size: 12px;
}
body, button, input {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.background {
  display: flex;
  min-height: 100vh;
}
.container {
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
}
.screen {
  position: relative;
  background: #3e3e3e;
  border-radius: 15px;
}
.screen:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: -1;
}
.screen-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #4d4d4f;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.screen-header-left {
  margin-right: auto;
}
.screen-header-button {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 8px;
  background: white;
}
.screen-header-button.close {
  background: #ed1c6f;
}
.screen-header-button.maximize {
  background: #e8e925;
}
.screen-header-button.minimize {
  background: #74c54f;
}
.screen-header-right {
  display: flex;
}
.screen-header-ellipsis {
  width: 3px;
  height: 3px;
  margin-left: 2px;
  border-radius: 8px;
  background: #999;
}

.screen-body {
  display: flex;
}
.screen-body-item {
  flex: 1;
  padding: 50px;
}
.screen-body-item.left {
  display: flex;
  flex-direction: column;
}
.app-title {
  display: flex;
  flex-direction: column;
  position: relative;
  color: #ea1d6f;
  font-size: 26px;
}
.app-title:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 25px;
  height: 4px;
  background: #ea1d6f;
}
.app-contact {
  margin-top: auto;
  font-size: 8px;
  color: #888;
}
.app-form-group {
  margin-bottom: 15px;
}
.app-form-group.message {
  margin-top: 40px;
}
.app-form-group.buttons {
  margin-bottom: 0;
  text-align: right;
}
.app-form-control {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #ddd;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s;
}
.app-form-control::-moz-placeholder {
  color: #666;
}
.app-form-control:-ms-input-placeholder {
  color: #666;
}
.app-form-control::placeholder {
  color: #666;
}
.app-form-control:focus {
  border-bottom-color: #ddd;
}
.app-form-button {
  background: none;
  border: none;
  color: #ea1d6f;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
.app-form-button:hover {
  color: #b9134f;
}


@media screen and (max-width: 520px) {
  .screen-body {
    flex-direction: column;
  }

  .screen-body-item.left {
    margin-bottom: 30px;
  }

  .app-title {
    flex-direction: row;
  }

  .app-title span {
    margin-right: 12px;
  }

  .app-title:after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .screen-body {
    padding: 40px;
  }

  .screen-body-item {
    padding: 0;
  }
}