Make a simple Contact Form with HTML and CSS

HTML (Hypertext Markup Language) is the standard code used to make most of the websites and apps on the internet. And as with any language, except for the language of love, it’s not something you can just learn in one night.

HTML Code:

<div class="container">
  <h2>Contact Form</h2>
  <p>Contact us today, and get reply with in 24 hours!</p>
  <form action="">
    <div class="form-action">
      <input type="text" name="" placeholder="Your Name" required autofocus>
    </div>
    <div class="form-action">
      <input type="email" name="" placeholder=”Your Email” required autofocus>
    </div>
    <div class="form-action">
      <input type="tel" name="" placeholder="Telephone" required autofocus>
    </div>
    <div class="form-action">
      <input type="url" name="" placeholder="Your Website With http:// Or https://" required autofocus>
    </div>
    <div class="form-action">
      <select class="" name="””">
        <option value="">Whats Yout name</option>
        <option value="">Your favurite Pat</option>
        <option value="">Your favurite parson</option>
        <option value="">Your favurite book</option>

      </select>
    </div>
    <div class="form-action">
      <textarea name="name" placeholder="Your Masege Here"></textarea>
    </div>
    <div class="form-action">
      <input type="submit" name="" value="Submit">
    </div>
  </form>
</div>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #f1f1f1;
  font-family: sans-serif;
}
a{
  text-decoration: none;
  color: #114d4d;
}
.container{
  box-shadow: 0 0 5px 2px rgba(0,0,0,.5);
  width: 410px;
  position:relative;
  z-index:100;
  padding:30px;
  margin:50px auto;
  min-height:200px;
  border:1px solid #383838;
  background: #D1D1D1;
  background: repeating-linear-gradient(-45deg, #A4E8F6 , #A4E8F6 30px, #F2F2F2 30px, #F2F2F2 40px, #FC76AB 40px, #FC76AB 70px,#F2F2F2 70px, #F2F2F2 80px);
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  -o-border-radius:8px;
}
.container:after{
  background:#F9F9F9;
  margin:10px;
  position: absolute;
  content : "";
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  border:1px #f5f5f5 solid;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  box-shadow:inset 0px 0px 6px #3f3f3f;
  -moz-box-shadow:inset 0px 0px 6px #3f3f3f;
  -webkit-box-shadow:inset 0px 0px 6px #3f3f3f;
  -o-box-shadow:inset 0px 0px 6px #3F3F3F;
}

.form-action{
  margin: 20px 0 20px 0;
  width: 100%;
  position: relative;
}
h2, p{
  width: 100%;
  text-align: center;
}
.form-action label{
  position: absolute;
  top: 10px;
  left: 10px;
  transition: .6s;
}
.form-action input:focus{
  outline: none;
}

.form-action input,
.form-action textarea,
.form-action select{
  position: relative;
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  outline: none;
}
.form-action select {
  background: url(‘https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png’) no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
}
.form-action textarea{
  height: 100px;
}
.form-action input[type="submit"]{
  width: 30%;
  float: right;
  margin-right: 10px;
  background-color: #298;
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  cursor:pointer;
}
.form-action input[type="submit"]:hover{
  background-color: #114d4d;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply