Contact Forms, Form

Contact us page design in Html code with CSS and js

Today we are going to build a contact us page design in Html and CSS. In the previous post, we created a Transparent Contact us page design . So, follow me for creating it properly using Html and CSS.

Contact us for page design in Html and CSS:

It helps the company to understand the needs and questions of the users so, that company can solve them and modify its policies according to user requirements.

Content of contact us page design in Html:

Fields are used with the input method and with the help of fields you can enter the data into the fields. First, we have the field of name. Then it has the field of the email. After that, it has a message field. In this field, you can completely write your problem or issue in the message field. In the message field, it has a button on the right side. By clicking on this button you can expand the size of the field and write a complete story.

Therefore, we have created a button to submit the information to the website. This button has an outline that looks quite attractive. Then we used the hover effect on this button. We will create it using Html and CSS only. So, follow us in creating it.

How to create a contact us page design in Html?

It is easy and simple to create and we are going to create this contact us page for our website in three steps.

Download an IDE:

Code editors are helpful. Some of them are:

Notepad ++

VS CODE(recommended)

Brackets

Source code of Html:

Its code is given below so, copy and paste this code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Contact Form - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>

    <div class="contact-section">
      <div class="inner-width">
        <h1>Get in touch with us</h1>
        <input type="text" class="name" placeholder="Your Name">
        <input type="email" class="email" placeholder="Your Email">
        <textarea rows="1" placeholder="Message" class="message"></textarea>
        <button>Get in touch</button>
      </div>
        </div>
        <div class="first">
        </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Contact Form - FantacyDesigns</title>

</head>

<body>

<h1>Get in touch with us</h1>

<button>Get in touch</button>

</div>

</div>

</body>

</html>

Source code of CSS for contact us page:

CSS source code is given below.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
 font-family: "montserrat",sans-serif;
}
body{
  background:#FF8066;

}

.contact-section{
  background: #fff;
  padding: 80px 0;
  text-align: center;
  width: 50%;
  margin: auto;
  margin-top: 150px;
  border-top-right-radius: 300px;
  border-bottom-left-radius: 300px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.8) 0px 3px 7px -3px;
  
}
.contact-section:hover{
  border-top-left-radius: 300px;
  border-bottom-right-radius: 300px;
  transition: .5s;
}

.inner-width{
  max-width: 600px;
  margin: auto;
  padding: 0 20px;

}

.contact-section h1{
  font-size: 22px;
  color: #FF8066;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 500;
}

.name,.email,.message{
  background: none;
  border:none;
  outline: none;
  border-bottom: 1px solid #FF8066;
  color: #888;
  padding: 10px 6px;
  font-size: 14px;
  margin-bottom: 40px;
}

.name{
  float: left;
  width: 270px;
}

.email{
  float: right;
  width: 270px;
}

.message{
  min-width: 100%;
  max-width: 100%;
}


.contact-section button{
  background: none;
  color: #fff;
  border: 1px solid #FF8066;
  padding: 12px 40px;
  border-radius: 8px;
  background: #FF8066;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.4s linear;
  cursor: pointer;
}

.contact-section button:hover{
  background: #fff;
  color: #FF8066;
}


@media screen and (max-width:600px){
  .name,.email{
    width: 100%;
  }
}

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "montserrat",sans-serif;

}

body{

background:#FF8066;

}

.contact-section{

background: #fff;

padding: 80px 0;

text-align: center;

width: 50%;

margin: auto;

margin-top: 150px;

border-top-right-radius: 300px;

border-bottom-left-radius: 300px;

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.8) 0px 3px 7px -3px;

}

.contact-section:hover{

border-top-left-radius: 300px;

border-bottom-right-radius: 300px;

transition: .5s;

}

.inner-width{

max-width: 600px;

margin: auto;

padding: 0 20px;

}

.contact-section h1{

font-size: 22px;

color: #FF8066;

margin-bottom: 40px;

text-transform: uppercase;

letter-spacing: 4px;

font-weight: 500;

}

.name,.email,.message{

background: none;

border:none;

outline: none;

border-bottom: 1px solid #FF8066;

color: #888;

padding: 10px 6px;

font-size: 14px;

margin-bottom: 40px;

}

.name{

float: left;

width: 270px;

}

.email{

float: right;

width: 270px;

}

.message{

min-width: 100%;

max-width: 100%;

}

.contact-section button{

background: none;

color: #fff;

border: 1px solid #FF8066;

padding: 12px 40px;

border-radius: 8px;

background: #FF8066;

text-transform: uppercase;

font-size: 14px;

transition: 0.4s linear;

cursor: pointer;

}

.contact-section button:hover{

background: #fff;

color: #FF8066;

}

@media screen and (max-width:600px){

.name,.email{

width: 100%;

}

Download source code:

So, we have also created a source code file. It is present in the below link. Click the download button and then you will get the file.

Task:

You have seen how to create a contact us form using Html and CSS. This contacts us form is easy to modify. I am assigning you some tasks related to this contact us form. Implement these tasks on this contact us form. It is a simple form with a solid background. There can be different colors and you have to use hex format for coloring it. Radius is provided for four sides of the box. Just remove that and left the simple box. The get in Touch button is filled with color. Change the color to white and provide borders to color.

Thanks for your time.

Go to top

Download Source CodeClick to Download