Responsive Contact Us Form using HTML and CSS - lokendrarajput
demo-image
  • Home

    • Post Top Ad

    demo-image
    Home HTML source ocde Responsive Contact Us Form using HTML and CSS

    Responsive Contact Us Form using HTML and CSS

    Share This
    Responsive Ads Here

     BY LOKENDRA RAJPUT

    Responsive Contact Us Form using HTML and CSS


    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.

    A 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

    Tags
    Responsive Ads Here
    Share This
    IMG_20190623_103948_607

    About einsteinr
    Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.

    Newer Article Online Quiz System Project using PHP MySQL-2021 Older Article Create a Simple Search Box in PHP MySQL-2021
    By at icon18_edit_allbkg
    Labels: ,
    Subscribe to: Post Comments (Atom)
    Comment Using!!

    No comments:

    Post a Comment

    Post Bottom Ad

    Author Details

    Pages