Build a Transparent Contact Form with HTML & CSS

Author - Maketechstuff
April 01, 2023
0
In this post you'll learn how to create a simple transparent contact form with HTML and CSS. This tutorial guide you to be able to create a attractive contact form in no time. This is just the design. Their is no backend functionality added here in this form.


contact form using html and css


Contact form is useful for your user to contact you. However, this is only the design there is nothing in backend. 

This form has basic Validation for just input fields, that it should not be empty. If user click on submit button, it checks for input fields, if it is filled or not. If filled only then form is submitted, otherwise it shows message to fill the input field.


In this contact form, I have added:
  • Form (Form is transparent)
  • Three input field (name, email id and message).
  • Button for submit the form.
  • Image for background image.
  • Placeholder, which move upward when user focus on input fields.

Video Tutorial on Transparent Contact Form Using HTML and CSS:




TransparentContact Form

Creating transparent contact form is not a rocket science. You just have to set background color to transparent.


File structure:
  • index.html
  • index.css

Let's create transparent contact form using HTML and CSS step by step.

Step 1: Create basic structure of html and create boxes.

First of all, we'll create a basic html structure and add two elements. one for full width with  background image (class="container"). Another element (class="box") is for contact form in which we add a title tag.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="container">
        <div class="box">
            <h2>Contact Us</h2>

        </div>
    </div>

</body>
</html>

CSS


*{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(#000000b8 , rgb(65 12 255 / 60%)), url(image/image.jpg);
    background-size: cover;
    position: relative;
}
.container .box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: transparent;
    padding: 20px 30px;
    width: 350px;
    box-shadow: 0px 9px 40px -8px rgb(0 0 0);
    border: 1px solid #f1f1f1;
    border-radius: 8px;
}
.box h2{
    text-align: center;
    font-size: 40px;
    color: #fff;
}

Output : 


contact form


Step 2: Adding input fields

Now let's add input fields. So below I have added just one input field (for name) inside form tag. First, we going to style this input field and then simply copy and paste this first input field html to form another input field for email id. 


HTML


<form action="#">
    
    <div class="input_box">
        <input type="text" required>
        <label>Name</label>
    </div>
    <div class="input_box">
        <input type="text" required>
        <label>Email id</label>
    </div>


</form>

CSS


.box form{
    width: 100%;
    text-align: center;
}
.box form .input_box{
    width: 100%;
    margin-top: 35px;
    position: relative;
}
.box form .input_box input{
    width: 90%;
    padding: 8px 10px;
    font-size: 25px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    outline: none;
    background-color: transparent;
}
.box form .input_box label{
    position: absolute;
    left: 15px;
    top: 10px;
    color: #fff;
    font-size: 25px;
    pointer-events: none;
    transition: 0.3s;
}

Output:


contact form input field


Making placeholder floats up when user focus on input fields.

As you can see above code that we have use label tag as a placeholder. We'll float it up when user focus on input field. and also make it float up when input field has valid value according to input field type.


For float up placeholder on focus we'll use :focus selector of CSS. For let the placeholder stay up when input field has a valid value according to its define type we'll use :valid selector of CSS. To make this word it require to add required attribute to input fields.

 

CSS


.box form .input_box input:focus + label,
.box form .input_box input:valid + label{
    top: -25px;
    font-size: 18px;
}

Output : 


contact form input fields with floating placeholder


Step 3: Adding text area in contact form.

Now after input fields we'll add a textarea for users to insert their message. Here also we'll add a floating placeholder (label tag). For styling teatarea we'll add same styling as input field.


HTML


<div class="input_box">
    <textarea rows="5" required></textarea>
    <label>Your Message</label>
</div>

CSS


.box form .input_box input,
.box form .input_box textarea{
    width: 90%;
    padding: 8px 10px;
    font-size: 25px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    outline: none;
    background-color: transparent;
}

Output : 


contact form using html and css

Creating floating placeholder for text area.


CSS


.box form .input_box input:focus + label,
.box form .input_box input:valid + label,
.box form .input_box textarea:focus + label,
.box form .input_box textarea:valid + label{
    top: -25px;
    font-size: 18px;
}

Output : 


making contact form submit button


Step 4:  Adding submit button to contact form.

So now let's add submit button to contact form. By click on it form will be submit.


HTML


<button class="button" type="submit">Submit</button>

CSS


.box .button{
    font-size: 25px;
    padding: 8px 10px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    float: right;
}

Output : 


contact form using html and css


So that's how you can create a simple transparent contact form using HTML and CSS.

You may like:

  1. How to create simple login and registration form using HTML and CSS.
  2. How to create sliding login and registration form using HTML, CSS and JavaScript.
  3. How to create 4-digit OTP input fields using JavaScript.
  4. How to create login page with one side image and other side login form.
  5. How to create simple web page with light and dark theme using HTML, CSS and JavaScript.

 

Final code :



That's it, This is how you can make transparent contact form using html and css. If you have any question or suggestion you can write in comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top