Are you a beginner in web development?Well you might have come across HTML and CSS.HTML stands for Hypertext Markup Language.HTML forms the basic structure of a webpage.CSS stands for Cascading Style Sheets and is used to style the HTML markup.In this post,I will create a basic contact form using HTML and style it with CSS.If you need to learn more on HTML,CSS and all about web design and web development then headover to freecodecamp.org or w3schools.com.These are the two best schools where you can learn web development as well as programming.

Firstly, i will create the input fields,icons,textarea and submit button using HTML.

Later,i will style all the elements above using CSS.

The HTML Markup

<h1>Responsive Contact Form</h1><h1>
<div class="form-container">
 <form>
  <div class="input-frm">
   <i class="material-icons">person</i><input type="text" placeholder="Name" name="name">
  </div>
 <div class="input-frm">
   <i class="material-icons">email</i><input type="email" placeholder="Email" name="email">
  </div>
<div class="input-frm">
   <i class="material-icons textarea-icon">message</i>
  <textarea name="message" placeholder="Your message here..."></textarea>
</div>
<div>
 <input type="submit">
</div>
         

The HTML section contains a h1 for the heading “Contact Form”.Next,we create a div with a class of form-container.In the div ,we create a form using the form tag.The form tag will have no “action or method “attribute as we are not creating a form that actually submits.Inside the form we create a div with class of input-frm.Inside the div we add an icon from material-icons showing a person’s icon.Next to the icon we add a text field using the input tag.We now paste this div three more times while changing the input types to email,add a textarea and a submit button.

When you finish writing the HTML the page should look like the one below.Pretty ugly right?

Form using HTML

The CSS Part


 *{
  box-sizing:border-box;
}
html,body{
margin:0;
padding:0;
}
h1{
color:black;
background-color:blue;
margin:5px;
}
h1:hover{
background-color:rgb(12,149,235);
color:white;
}
.form-container{
margin:20px;
padding:20px;
background-color:rgb(9,51,80);
color:white;
box-shadow:0 5px 15px 0 burlywood;
 }
.input-frm{
display:flex;
margin-bottom:20px;
justify-content:center;
}
.input-frm:last-child{
margin-bottom:0;
}
.input-frm i{
min-width:40px;
padding:15px;
text-align:center;
background-color:lightslategray;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
border-left:1px solid gray;
}
.input-frm i:hover{
background-color:rgb(12,149,235);
color:white;
}
.input-frm input[type="text"],input[type="email"],.input-frm textarea{
outline:none;
border:none;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border:1px solid grey;
width:60%;
}
.textarea-icon{
padding:60px 10px;
}
.input-frm input[type="submit"]{
margin:0 auto;
border:none;
border-radius:20px;
font-size:30px;
width:60%;
transition-duration:0.5s;
padding:7px;
color:rgb(0,132,255);
background-color:white;
margin-top:20px;
}
.input-frm input[type="submit"]:hover{
color:white;
background-color:rgb(0,132,255);
}

When you finish styling your Contact form will look like the one below.Looks better right!!

Contact form after styling with CSS.