Make a Simple contact Form With HTML and CSS

Make a Simple contact Form With HTML and CSS

To Create Contact Form It Takes Only Two Steps:-

  1. Make a HTML file and define markup
  2. Make a CSS file and define styling

Step 1.Make a HTML file and define markup

We make a HTML file and save it with a name contact_form.html 

<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>

In this step we create a contact form and add some text fields that almost every contact form contains. Step 2.Make a CSS file and define styling We make a CSS file and save it with a name style.css 

*{
  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 #E5E5E5 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;
}
.form-action input[type="submit"]:hover{
background-color: #114d4d;
}