Contact Forms, Form

Transparent Contact us page design in Html free code

Today, we will learn how to create a transparent contact us page in Html and CSS for any website. In the last post, we discussed how to create a Footer design in Html and CSS. So, let’s jump into the topic.

Contact us page:

The contact page is used for providing the contact facility to customers on the website and application. It may be different purposes of contact. When you use this form then the message is sent to the relevant person/admin and they solve your problem. As a result website administration take a look into your problem and then try to solve the issue you have.

It can be name, email, birth date password, etc. Then we have used a button that should be there in any form. It stores the data into the database of the website for future records and for action. We are developing it from scratch.

How to create a contact us page?

It is pretty much simple to accomplish it using Html and CSS. These are two frontend languages that we are gonna use in our project. Follow us for creating it.

Download a code editor for the contact us page:

It is a necessary part of the coding because it helps us to write the code for our project. Without it, we can build it easily.

Source code of Html:

It has different materials like text, fields, buttons, heading, etc.

<!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">
  </head>
  <body>

<div class="contact-section">

  <h1>Contact Us</h1>
  <div class="border"></div>
  <form class="contact-form" action="index.html" method="post">
    <input type="text" class="contact-form-text" placeholder="Your name">
    <input type="email" class="contact-form-text" placeholder="Your email">
    <input type="text" class="contact-form-text" placeholder="Your phone">
    <textarea class="contact-form-text" placeholder="Your message"></textarea>
    <input type="submit" class="contact-form-btn" value="Send">
  </form>
</div>


  </body>
</html>

<!DOCTYPE html>

<head>

<title>Contact Form - FantacyDesigns</title>

</head>

<body>

<h1>Contact Us</h1>

</form>

</div>

</body>

</html>

Source code of CSS:

It is a markup language and helps the developers to design the content of the web pages. This form is a part of web pages so, we will also design it using CSS.

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
body{
  background: url(bg.jpg) no-repeat center;
  background-size: cover;
 opacity: 0.9;
}
.contact-section{
margin-top: 50px;
  padding: 40px 0;

}
.contact-section h1{
  text-align: center;
  color: #ddd;
}
.border{
  width: 100px;
  height: 10px;
  background: #34495e;
  background: none;
  margin: 40px auto;
}

.contact-form{
  max-width: 600px;
  margin: auto;
  padding: 0 10px;
  overflow: hidden;
background: none;
}

.contact-form-text{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0;
  border:none;
  border: 1px solid #ccc;
  background: none;
  padding: 20px 40px;
  outline: none;ss
  color: #ddd;
  transition: 0.5s;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;x;
}
.contact-form-text:focus{
  box-shadow: 0 0 10px 4px #34495e;
  background: #fff;
  color: #262626;
  font-size: 14px;
}
textarea.contact-form-text{
  resize: none;
  height: 120px;
}
.contact-form-btn{
  float: right;
  border: 0;
  background: #34495e;
  color: #fff;
  padding: 12px 50px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.5s;
}
.contact-form-btn:hover{
  background: #2980b9;
}

margin: 0;

padding: 0;

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

}

body{

background: url(bg.jpg) no-repeat center;

background-size: cover;

opacity: 0.9;

}

.contact-section{

margin-top: 50px;

padding: 40px 0;

}

.contact-section h1{

text-align: center;

color: #ddd;

}

.border{

width: 100px;

height: 10px;

background: #34495e;

background: none;

margin: 40px auto;

}

.contact-form{

max-width: 600px;

margin: auto;

padding: 0 10px;

overflow: hidden;

background: none;

}

.contact-form-text{

display: block;

width: 100%;

box-sizing: border-box;

margin: 16px 0;

border:none;

border: 1px solid #ccc;

background: none;

padding: 20px 40px;

outline: none;ss

color: #ddd;

transition: 0.5s;

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;x;

}

.contact-form-text:focus{

box-shadow: 0 0 10px 4px #34495e;

background: #fff;

color: #262626;

font-size: 14px;

}

textarea.contact-form-text{

resize: none;

height: 120px;

}

.contact-form-btn{

float: right;

border: 0;

background: #34495e;

color: #fff;

padding: 12px 50px;

border-radius: 20px;

cursor: pointer;

transition: 0.5s;

}

.contact-form-btn:hover{

background: #2980b9;

}

We have a solution for the problem of such people.

Download source code:

So, the code is given below, just click on the download source code button for downloading the code.

Task:

This contacts us page is transparent. It has an image in the background. After placing the image in the background then created a form. All the content is provided. Now remove the transparency of the form and provide solid or gradient colors to it. In the background remove the image and use video instead of an image.

I hope you like the post.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download