Responsive Contact Us Form Using HTML And CSS | Free Source Code

Responsive Contact Us Form using HTML and CSS

March 31, 2021
HTML/CSS
responsive contact us form

Tutorial: How to Create a Responsive Contact Us Form using HTML and CSS with Source Code

About How to Create a Responsive Contact Us Form using HTML and CSS

Hello readers, Today in this blog you’ll learn how to create a Responsive Contact Us Form using HTML and CSS.

contact form is used to allow visitors to a website to contact the site owner or people responsible for its maintenance. A contact form with records where the visitor can fill in their name, subject, and message can send or reset.

 In this program, there is a linear gradient background on the web page and a contact us form. In each input field, there is a focus animation. This contact us form is fully responsive to any device (Tablet, Mobile, PC). This form changes their field according to the device width that means on the mobile version, these form fields will be aligned vertically, and on tablet and PC, this form field is aligned horizontally.

If you know JavaScript, then you can add some JavaScript codes and take this contact us form at the next level. And if you know backend languages like PHP/MySQL, then you can connect this form with the database. If you like this responsive contact us form and want to get source code then you can easily get from the below boxes or can download source files from the download link. You can use these form to show skills, projects, and many more.

Responsive Contact Us Form Source Code

To create this program, first, you need to create two Files, one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get the images of this program.

HTML FILE (index.html):

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Contact Us Form | CampCodes</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="text">Responsive Contact Us Form</div>
      <form action="#">
        <div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label for="">First Name</label>
          </div>
          <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label for="">Last Name</label>
          </div>
        </div>
        <div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label for="">Email Address</label>
          </div>
          <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label for="">Website Name</label>
          </div>
        </div>
        <div class="form-row">
          <div class="input-data textarea">
            <textarea rows="8" cols="80" required></textarea>
            <div class="underline"></div>
            <label for="">Write your message</label>
          </div>
        </div>
        <div class="form-row submit-btn">
          <div class="input-data">
            <div class="inner"></div>
            <input type="submit" value="submit">
          </div>
        </div>
      </form>
    </div>

  </body>
</html>

CSS FILE (style.css):

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px;
  background: linear-gradient(115deg, #e28743 10%, #1587b9 90%);
}
.container{
  max-width: 800px;
  background: #fff;
  width: 800px;
  padding: 25px 40px 10px 40px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container form{
  padding: 30px 0 0 0;
}
.container form .form-row{
  display: flex;
  margin: 32px 0;
}
form .form-row .input-data{
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}
form .form-row .textarea{
  height: 70px;
}
.input-data input,
.textarea textarea{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid rgba(0,0,0, 0.12);
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
  transform: translateY(-20px);
  font-size: 14px;
  color: #3498db;
}
.textarea textarea{
  resize: none;
  padding-top: 10px;
}
.input-data label{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
}
.textarea label{
  width: 100%;
  bottom: 40px;
  background: #fff;
}
.input-data .underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background: #3498db;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before{
  transform: scale(1);
}
.submit-btn .input-data{
  overflow: hidden;
  height: 45px!important;
  width: 25%!important;
}
.submit-btn .input-data .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
.submit-btn .input-data:hover .inner{
  left: 0;
}
.submit-btn .input-data input{
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) {
  .container .text{
    font-size: 30px;
  }
  .container form{
    padding: 10px 0 0 0;
  }
  .container form .form-row{
    display: block;
  }
  form .form-row .input-data{
    margin: 35px 0!important;
  }
  .submit-btn .input-data{
    width: 40%!important;
  }
}

Screenshot of Responsive Contact Us Form using HTML and CSS

responsive contact us form using html css

responsive contact us form using html css


Related Tutorials: Responsive Chat Box UI Design using HTML and CSS, Responsive Pricing Tables using only HTML & CSS, Responsive Accordion Menu using HTML and CSS, Responsive Circular Progress Bar using HTML CSS and JQuery

Download Here
Facebook Comments
Comments

Leave a Reply

Your email address will not be published.