Contact Us Page in HTML & CSS with Cool Animations

Hello readers, Today in this blog you’ll learn how to create a contact us page using HTML & CSS. Earlier, you learned to Create a responsive navigation bar using HTML & CSS. I have also created a blog on other cool stuff about web designing.

The contact us page is a web page containing all the contact information regarding the organization or company to whom the particular website belongs to. It is one of the very essential pages for every website.

What Contact Us page includes?

Social media links and contact number/email.
Contact Form.
Company Address (either on google Maps or in text format).

3 Tips to make Contact Us page better

Make user-friendly neat and simple designs.
Add some animations.
Do not make the google map’s width 100%.

Today I will show you how you can create your own contact us page using HTML & CSS with awesome animation. On this page, I haven’t used any plugin or library to animate it. It is animated with pure CSS. I have created a ‘main’ div at first and then a ‘container’ div inside the ‘main’ div. All the information/contents are inside the ‘container’ div. Inside the container, I have used other two div_s, one for images and another for contact forms and social media links.

As you can see in the above image, the ‘container’ div has a box shadow which makes its design look much better. The whole page is completely responsive i.e. it can be used on each and every device with different screen widths. I have also added the entrance animation on the page load with pure CSS. When you reload the page the container will slide down from the top to its exact position and the contact form will slide left from right to its exact position.

I have given the official color of each social media icon. The round-shaped blue background at the top left of the screen is created with the “before” pseudo-element and the arrow typed shape at the background of the image is created with a CSS clip-path. If you are going to use the pseudo-element without writing any content be sure that you have included the “position” property in both parent and child div.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Contact Us page in HTML & CSS).

You Might Also Like

Video Tutorial of Contact Us page in HTML & CSS

All this page design and animation are based on CSS. If you’re a beginner you can also create this type of contact us page. If you like this program (Contact Us page in HTML & CSS) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Contact Us page in HTML & CSS [Source Codes]

To create this program (Contact Us page in HTML & CSS). First, you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. Remember, you have to download the image yourself. I have used the SVG image but you can use images of other formats too. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

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">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
    <title>Contact US</title>
</head>
<body>
    <div class="main">
        <div class="container">
            <div class="image">
                <img src="contact.svg" alt="">
            </div>
            <div class="form-area">
                <h2>Contact US</h2>
                <form action="">
                    <input type="text" placeholder="Full Name">
                    <input type="email" placeholder="Email">
                    <removethis-textarea cols="30" rows="3" placeholder="Your Message">
                  </removethis-textarea>
                    <button  type="submit">Send Message</button>
                </form>
                <div class="social-icons">
                    <i class="facebook fab fa-facebook-f"></i>
                    <i class="instagram fab fa-instagram"></i>
                    <i class="linkedin fab fa-linkedin-in"></i>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Note: In the <textarea></textarea> tag, i have added some unnecessary text. So, remove that after pasting the code.

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
body::before{
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: linear-gradient(51deg,#62c3fc 0%, #dff0fa 80%);
    clip-path: circle(68.4% at 26% 31%);
    animation: circle .8s;
}
@keyframes circle {
    0%{
        margin-top: -100%;
    }
    100%{
        margin-top: 0;
    }
}
.container{
    width: 80%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 2px 15px -4px #9e9e9e;
    border-radius: 5px;
    animation: container 1.5s ease;
}
@keyframes container {
    0%{
        margin-top: -100%;
    }
    100%{
        top: 0;
    }
}
.container .image{
    width: 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}
.container .image::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #f0f6ff;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.container .image img{
    margin-left: 100px;
    height: 200px;
    z-index: 1;
}
.container .form-area{
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: form 1.8s ease;
}
@keyframes form {
    0%{
        margin-left: 500px;
    }
    100%{
        left: 0;
    }
}
.container .form-area h2{
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}
.container .form-area form{
    width: 60%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}
.container .form-area form input{
    padding: 15px 5px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
}
.container .form-area form input::placeholder{
    color: #999;
    letter-spacing: 1px;
}
.container .form-area form input:hover::placeholder,
.container .form-area form textarea:hover::placeholder{
    padding-left: 10px;
    transition: .3s all ease-in-out;
}
.container .form-area form input:focus,
.container .form-area form textarea:focus{
    border-bottom: 1px solid #62c3fc;
    animation: border .5s ease;
}
@keyframes border {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
.container .form-area form textarea{
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    resize: none;
    padding: 0px 5px;
}
.container .form-area form textarea::placeholder{
    font-size: 14px;
    color: #999;
}
.container .form-area form button{
    margin-top: 10px;
    border: none;
    padding: 10px 0px;
    border-radius: 30px;
    background-color: #62c3fc;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: .3s all ease-in-out;
}
.container .form-area form button:hover{
    background-color: #2fa5e9;
}
.container .form-area .social-icons{
    margin-top: 50px;
    display: flex;
}
.container .form-area .social-icons i{
    margin-right:  10px;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.container .form-area .social-icons .facebook{
    background-color: #3b5998;
    color: #fff;
}
.container .form-area .social-icons .instagram{
    background: linear-gradient(167deg, #0085fc 0%, #f700da 30%, #f7ed00 90%);
    color: #fff;
}
.container .form-area .social-icons .linkedin{
    background-color: #0e76a8;
    color: #fff;
}

@media (min-width:1200px){
    .main .container{
        height: 85vh;
    }
}
@media (max-width:1200px) and (min-width:900px){
    body::before{
        height: 200px;
        width: 200px;
    }
    .main .container{
        height: 85vh;
    }
    .main .container .image img{
        margin-left: 30px;
    }
    .main .container .form-area h2{
        font-size: 25px;
    }
}

@media (max-width:900px) and (min-width:600px){
    body::before{
        height: 150px;
        width: 150px;
    }
    .main .container{
        width: 95%;
        height: 85vh;
    }
    .main .container .image img{
        height: 150px;
        margin-left: 30px;
    }
    .main .container .form-area form{
        width: 90%;
    }
}
@media (max-width:600px){
    body{
        height: auto;
    }
    body::before{
        height: 100px;
        width: 100px;
    }
    .main .container{
        width: 98%;
        height: auto;
        flex-direction: column;
        margin: 20px 0px;
        box-shadow: none;
    }
    .main .container .image{
        height: 200px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .main .container .image::before{
        height: 200px;
        clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
    }
    .main .container .image img{
        height: 150px;
        margin-left: 0px;
        margin-top: -40px;
    }
    .main .container .form-area{
        width: 100%;
    }
    .main .container .form-area h2{
        font-size: 25px;
    }
    .main .container .form-area form{
        width: 90%;
        margin-top: 10px;
    }
    .main .container .social-icons{
        margin: 20px 0px;
    }
}

That’s all, now you’ve successfully created a contact us page using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

What Contact Us page includes?

3 Tips to make Contact Us page better

Video Tutorial of Contact Us page in HTML & CSS

Contact Us page in HTML & CSS [Source Codes]

HTML

CSS

Post a Comment

Post a Comment

About Us

Contact Form