Create Responsive Contact Us Form Page HTML & CSS

Want to see this Responsive Contact Us Form come to life?

Check out the accompanying video tutorial below for a step-by-step guide on building this Responsive Contact Us Form using HTML, CSS. The video will walk you through the code at your own pace, making it easy to learn and follow along.

Bonus Tip:While you're watching, consider subscribing to my YouTube channel for more coding tutorials and web development tips! I regularly upload new content to help you on your coding journey.

Here's what you'll learn in the video:

The HTML structure for building the Create Responsive Contact Us Form.
How to style the Responsive Contact Us Form with CSS for a clean and professional look.
Tips and tricks for customizing your Responsive Contact Us Form Page.

Ready to Get Coding?

This code is your playground! We've provided the building blocks to create this Create Responsive Contact Us Form, but the fun part is making it your own. Click the button and get hands-on with the code. Here are some ideas to spark your creativity:

edit & experiment

<!DOCTYPE html>
<html lang="en">

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">

<title>🚀 Create a Contact Form | </ZonetoCode /> 💻</title>
</head>

<body>
    <div class="wrapper">
        <div class="row-1">
            <ul>
                <li>
                    <div class="icons">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="M12 12q.825 0 1.413-.588T14 10q0-.825-.588-1.413T12 8q-.825 0-1.413.588T10 10q0 .825.588 1.413T12 12Zm0 10q-4.025-3.425-6.012-6.362T4 10.2q0-3.75 2.413-5.975T12 2q3.175 0 5.588 2.225T20 10.2q0 2.5-1.988 5.438T12 22Z" />
                        </svg>
                    </div>
                    <p>
                        <span>address:</span>
                        <span>198 West 21th Street, Suite 721 New York NY 10016</span>
                    </p>
                </li>
                <li>
                    <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="M19.95 21q-3.125 0-6.175-1.363t-5.55-3.862q-2.5-2.5-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.338t.712-.062l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3Z" />
                        </svg></div>
                    <p>
                        <span>phone:</span>
                        <span>+ 1235 2355 98</span>
                    </p>
                </li>
                <li>
                    <div class="icons">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <g fill="none">
                                <path
                                    d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
                                <path fill="#f8f9fa"
                                    d="m21.433 4.861l-6 15.5a1 1 0 0 1-1.624.362l-3.382-3.235l-2.074 2.073a.5.5 0 0 1-.853-.354v-4.519L2.309 9.723a1 1 0 0 1 .442-1.691l17.5-4.5a1 1 0 0 1 1.181 1.329ZM19 6.001L8.032 13.152l1.735 1.66L19 6Z" />
                            </g>
                        </svg>
                    </div>
                    <p>
                        <span>email:</span>
                        <span>info@yoursite.com</span>
                    </p>
                </li>
                <li>
                    <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="m11.8 20.025l.15-4.225l3.05-3h1.95v1.85l2.275.35q.275-.7.438-1.45t.162-1.55q0-2.225-1.112-4.063T15.8 5.05V8h-3v3h-2v3H8.775L6.8 11h-1v1l-1.775 1.975q.65 2.6 2.813 4.325t4.962 1.725Zm4-6.025h-3v-2h3v2Zm0-6h2.025l-1 3h-2.05L15.8 8Zm-4 14q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T1.8 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T11.8 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T21.8 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T11.8 22Z" />
                        </svg></div>
                    <p>
                        <span>website:</span>
                        <span>yoursite.com</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="row-2">
            <div class="col-1">
                <h1>contact us</h1>
                <form action="">
                    <div class="input-field-row-1">
                        <div class="input-field">
                            <label for="name">full name</label>
                            <input type="text" placeholder="Name">
                        </div>
                        <div class="input-field">
                            <label for="email">email address</label>
                            <input type="email" placeholder="Email">
                        </div>
                    </div>
                    <div class="input-field">
                        <label for="subject">subject</label>
                        <input type="text" placeholder="Subject">
                    </div>
                    <div class="input-field">
                        <label for="message">message</label>
                        <textarea name="w3review" rows="4" cols="30"></textarea>
                    </div>

</html>

@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;
}

:root {
    --primary-color: #46b5d1;
}

body {
    background-color: #f8f9fa;
}

.wrapper {
    padding: 7rem 0rem;
    width: 73%;
    margin: auto;
}

.row-1 ul {
    display: flex;
    list-style: none;
}

ul li {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul li .icons {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-bottom: 20px;
}

ul li .icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

ul li p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

ul li p span:first-child {
    text-transform: capitalize;
}

ul li p span:last-child {
    padding-left: 5px;
}

ul li + li p span:last-child {
    color: var(--primary-color);
}

ul li:first-child p span:last-child {
    color: #666666;
}

.row-2 {
    display: flex;
    margin-top: 4.5rem;
}

.row-2 .col-1 {
    width: 100%;
    padding: 3rem;
}

.row-2 .col-1 h1 {
    text-transform: capitalize;
    font-size: 1.75rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: black;
}

form .input-field-row-1 {
    display: flex;
    gap: 1.8rem;
}

form .input-field-row-1 .input-field {
    width: 100%;
}

form .input-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

form .input-field label {
    color: black;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

form .input-field input,
form .input-field textarea {
    width: 100%;
    line-height: 1.5rem;
    outline: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    font-size: 16px;
    color: #666666;
    transition: all 0.2s linear;
}

form .input-field input {
    height: 36px;
}

form .input-field textarea {
    resize: none;
}

form .input-field input:focus,
form .input-field textarea:focus {
    background-color: white;
    border-color: var(--primary-color);
}

form .input-field input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

form input[type="submit"] {
    outline: none;
    border: none;
    border-width: 1px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 16px;
    text-transform: capitalize;
    background-color: var(--primary-color);
    box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    color: #f8f9fa;
}

form input[type="submit"]:hover,
form input[type="submit"]:focus {
    border-color: #2d9bb7 !important;
    background: #2d9bb7 !important;
}

.row-2 .col-2 figure {
    width: 28.9rem;
    height: 35.2rem;
}

.col-2 figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1280px) {
    .wrapper {
        width: 90%;
    }
}

@media (max-width: 1024px) {
    .row-2 .col-2 figure {
        width: 23.9rem;
        height: 29.2rem;
    }
}

@media (max-width: 768px) {
    .row-1 ul {
        flex-wrap: wrap;
    }
    ul li {
        width: 50%;
    }
    .row-2 {
        flex-direction: column;
    }
    .row-2 .col-2 {
        display: none;
    }
}

Don't be afraid to experiment!

The beauty of coding is that there's usually more than one way to achieve something. Feel free to break things and try again. That's the best way to learn and become a confident coder.

Get your custom static website starting at just ₹5000!

follow uS

share on

Create Responsive Contact Us Form Page HTML & CSS

Want to see this Responsive Contact Us Form come to life?

Here's what you'll learn in the video:

Ready to Get Coding?

Don't be afraid to experiment!

similar articles

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

leave a comment

check it out!

The Future of Neuralink

follow uS

share on

Want to see this Responsive Contact Us Form come to life?

Here's what you'll learn in the video:

Ready to Get Coding?

**Don't be afraid to experiment! **

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

The Future of Neuralink

Don't be afraid to experiment!