Create Responsive Contact Us Form In HTML & CSS

Hello Readers, today in this blog we will create Responsive Contact Us Form In HTML & CSS.

Earlier blog I have shared How To Create Responsive Glass effect website, now it's time to make responsive contact us page.

In simple language, contact us form means the medium to contact or connect specific owner of a website. In this form, users have to fill their some personal details like email address, name, phone number, message, and other information as required on the form.

As you can see on the given image of this program [Contact Us Page or Form] on the webpage, There is one image on the background. Also use one Spiritual Code logo. All the contact forms are like this, designs may different but the main motive is the same. This given image of a contact form is in image form, actually, I have added various animations on that input field and button, and this contact form is fully responsive.

If you have basic knowledge of HTML & CSS then you can easily build this program [Contact Us Page Design], Those friends who are feeling difficult to make this contact form design, don't worry I have provided the full source of this program below.

You Might Like This:

Glass Effect Website using HTML and CSS

Responsive Contact Us Form [Source Code]

To copy-paste the given code of this program [Contact Form Design], first of all, you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your document. You can also download all source code from the given

"Download Button" directly.

Document

HTML CODE:

        <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
       </head>
    <body>
      <div class="container">
        <div class="content">
          <div class="image-box">
         <img src="2.png" alt="">
          </div>
        <form action="#">
          <div class="topic">Contact Us</div>
          <div class="input-box">
            <input type="text" required>
            <label>Enter your name</label>
          </div>
          <div class="input-box">
            <input type="text" required>
            <label>Enter your email</label>
          </div>
          <div class="message-box">
            <label>Enter your message</label>
          </div>
          <div class="input-box">
            <input type="submit" value="Send Message">
          </div>
        </form>
      </div>
      </div>
    </body>
    </html>

CSS CODE:

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins',sans-serif;
        }
        body{
          height: 100vh;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: url(1.jpg);
          background-size: 100% 100%;
          position: relative;
        }
        .container{
          z-index: 12;
          max-width: 1050px;
          width: 100%;
          height: 80%;
          background: rgba(78, 74, 74, 0.747);
          border-radius: 12px;
          margin: 0 20px;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
        }
        .container .content{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 25px 20px;
        }
        .content .image-box{
          max-width: 55%;
        }
        .content .image-box img{
          width: 100%;
        }
        .content .topic{
          font-size: 22px;
          font-weight: 500;
          color: #ffffff;
        }
        .content form{
          width: 40%;
          margin-right: 30px;
        }
        .content .input-box{
          height: 50px;
          width: 100%;
          margin: 16px 0;
          position: relative;
        }
        .content .input-box input{
          position: absolute;
          height: 100%;
          width: 100%;
          border-radius: 6px;
          font-size: 16px;
          outline: none;
          padding-left: 16px;
          color: white;
          background: transparent;
          border: 2px solid transparent;
          transition: all 0.3s ease;
          border-bottom: 2px solid red;
        }
        .content .input-box input:focus,
        .content .input-box input:valid{
         
          background-color: transparent;
        }
        .content .input-box label{
          position: absolute;
          left: 18px;
          top: 50%;
          color: #d7dee2;
          font-size: 15px;
          pointer-events: none;
          transform: translateY(-50%);
          transition: all 0.3s ease;
        }
        .content .input-box input:focus ~ label,
        .content .input-box input:valid ~ label{
          top: 0;
          left: 12px;
          display: 14px;
          color: #ffffff;
          background: transparent;
        }
        .content .message-box{
          min-height: 100px;
          position: relative;
        }
        .content .message-box textarea{
          position: absolute;
          height: 100%;
          width: 100%;
          resize: none;
          background: transparent;
          border: 2px solid transparent;
          border-radius: 6px;
          outline: none;
          color: white;
          margin-top: 15px;
          border-bottom: 2px solid red;
          transition all 0.3s ease;
        }
        .content .message-box textarea:focus{
         
          background-color: transparent;
        }
        .content .message-box label{
          position: absolute;
          font-size: 16px;
          color: rgb(236, 236, 236);
          left: 18px;
          top: 6px;
          pointer-events: none;
          transition: all 0.3s ease;
        }
        .content .message-box textarea:focus ~ label{
          left: 12px;
          top: -10px;
          color: #ffffff;
          font-size: 14px;
          background: transparent;
        }
        .content .input-box input[type="submit"]{
          color: #fff;
          outline: none;
          border: none;
          padding-left: 0;
          font-size: 18px;
          font-weight: 500;
          cursor: pointer;
          letter-spacing: 1px;
          background-color: rgba(0, 0, 0, 0.205);
          border: 2px solid red;
          margin-top: 30px;
          transition: all 0.3s ease;
        }
        .content .input-box input[type="submit"]:hover{
          background-color: black;
        }
        @media (max-width:1000px) {
          .content .image-box{
            max-width: 70%;
          }
          .content{
            padding: 10px 0;
          }
        }
        @media (max-width:900px) {
          .content .image-box{
            display: none;
          }
          .content form{
            width: 100%;
            margin-left: 30px;
          }
        }

Tags: Contact Form HTML & CSS

Create Responsive Contact Us Form In HTML & CSS

Post a Comment

Contact Form