Responsive Contact us Form using HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Responsive Contact us Form using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Login Form Design. And now I'm going to create a Fully Responsive Contact us Form using CSS Flexbox.

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

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

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Contact us Form).

Video Tutorial of Responsive Contact us Form Design

In the video, you have the responsive version of this program and I hope you love this as well have understood the basic codes behind creating this form. As you already know on video, This form is created only for design purposes. So on this form, there is no action and this form won't submit your entered details anywhere.

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 program (Responsive Contact us Form) and want to get source codes.

Responsive Contact us Form [Source Codes]

To create this program (Responsive Contact us Form). 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. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Responsive Contact us Form | CodingNepal</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">
<!-- Due to more textarea tag I got an error.. SO I changed the name of texarea tag into changeit. Replace the changeit text/tag to textarea-->
            <changeit rows="8" cols="80" required></changeit> 
            <br />
<div class="underline">
</div>
<label for="">Write your message</label>
          
        
        <br />
<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:

@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, #56d8e4 10%, #9f01ea 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;
  }
}

Thanks for visiting, Keep visiting.

18 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Healthy TipsJuly 17, 2020 at 11:55 AM
thanks
CodingNepalJuly 19, 2020 at 10:19 AM
Thank you...Keep visiting!
UnknownJuly 22, 2020 at 7:51 PM
Can I use it in my web page?
UnknownJuly 23, 2020 at 12:10 AM
Can you please make a video how to make this work
UnknownJuly 23, 2020 at 8:18 AM
Hello, thank you for the code. I was wondering how could I take out the 'website' text area without messing up the form.
pempekQQJuly 31, 2020 at 7:02 AM
can i us it
pempekQQJuly 31, 2020 at 7:03 AM
can i us it
Bhadresh TandelAugust 31, 2020 at 11:44 AM
Which template you are using?
UnknownOctober 21, 2020 at 3:16 PM
there's a problem, after I copied the code in my files and I go check my browser, the button of the form is little bit down I mean it is out of the form
Samir Khanal (Admin)December 28, 2020 at 10:15 PM
hello, can you tell me what should i do to get the message in my email. I have such contact form in my website written using html and css but i do not know how to make it such way that the message comes to my email. Hope you will help.

Video Tutorial of Responsive Contact us Form Design

You might like this:

Responsive Contact us Form [Source Codes]

Thanks for visiting, Keep visiting.

18 Comments

Post a Comment

About Us

Contact Form