Stylish Contact Us Form link to "GMAIL ID" with HTML and CSS @rayen-code

Rayen

In the digital landscape, a Contact Us form serves as the gateway for user interaction. Designing a visually appealing and functional form enhances the user experience and encourages engagement. This tutorial will guide you through creating an aesthetically pleasing Contact Us form using HTML and CSS. Elevate your website's contact page with a form that seamlessly blends style and functionality.




Step 1: HTML Markup:

Initiate the tutorial by defining the HTML structure for your Contact Us form. Include essential elements such as input fields for name and email, a textarea for the message, and a submit button.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us Form: HTML & CSS</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Contact Us</h1>

        <form action="https://api.web3forms.com/submit" method="POST" class="form">
            <input type="hidden" name="access_key" value="ba5443b6-3992-4661-bae7-59bd1bebca6d">


            <div class="wrapper">
                <input type="text" name="Name" id="text" class="input" required>
                <label for="text">Your Name</label>
            </div>
            <div class="wrapper">
                <input type="email" name="Email" id="mail" class="input" required>
                <label for="mail">Your Email</label>
            </div>
            <div class="wrapper">
                <textarea placeholder="Message" name="Message" id="message" rows="4" class="input"></textarea>
            </div>

            <div class="btns">
                <button type="submit" class="form-btn">Submit</button>
                <button type="reset" class="form-btn">Reset</button>
            </div>

        </form>

        
        <span class="bg-1"></span>
        <span class="bg-2"></span>
    </div>
</body>
</html>

Step 2: Styling with CSS:

Craft a dedicated CSS file (style.css) to style the Contact Us form. Consider colors, typography, and spacing to create an inviting and user-friendly design.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#008fb0, #00cfa2);
}

.container {
    width: 70%;
    min-height: 500px;
    max-width: 800px;
    position: relative;
    border: 1px solid white;
    border-radius: 15px;
    box-shadow: 0 0 30px #00000008;

    overflow: hidden;
    backdrop-filter: blur(20px);
    background: #ebebeb49;

}

.container h1 {
    font-size: 3rem;
    text-align: center;
    margin: 20px;
    color: white;
    font-weight: bold;
}


.form {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper {
    position: relative;
    width: 50%;
    min-width: 350px;
}

.input {
    width: 100%;
    border: 1px solid white;
    outline: none;
    border-radius: 8px;
    padding: 8px;
    margin: 15px 0;
    color: #425981;
    font-weight: 500;
    font-size: 1.1rem;
    box-shadow: inset 4px 4px 4px #a5a3a350,
    4px 4px 4px #dadada21;
}

label {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: gray;
    transition: 0.4s;
}

.input:focus + label,
.input:valid + label {
    transform: scale(0.9);
    top: -8px;
    background: white;
    padding: 2px 5px;
}

textarea {
    max-width: 100%;
}

textarea::placeholder {
    color: gray;
    font-size: 1rem;
    font-weight: 500;
    padding-left: 25px;
}

.btns {
    display: flex;
    gap: 20px;
}

.form-btn {
    width: 120px;
    height: 50px;
    background: #fcfcfd;
    border-radius: 4px;
    color: black;
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.form-btn:hover {
box-shadow: 0 4px 4px #14003f4d,
inset 0 -3px 0 #e4e4e4
}

.form-btn:active {
    box-shadow:  0 3px 7px inset #d6d6d6;
    transform: translateY(-2px);
}

.bg-1,
.bg-2 {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;

}
.bg-1 {
    background: #ff0;
    animation: anime1 10s linear infinite alternate-reverse;
}
.bg-2 {
    background: #ff1ae0;
    animation: anime2 10s linear infinite alternate-reverse;
}

@keyframes anime1 {
    0%, 100% {
        top: 25%;
        left: 25%;
    }
    25% {
        top: 78%;
        left: 35%;
    }
    55% {
        top: 76%;
        left: 14%;
    }
    75% {
        top: 38%;
        left: 76%;
    }
}
@keyframes anime2 {
    0%, 100% {
        top: 76%;
        left: 14%;
    }
    25% {
        top: 38%;
        left: 76%;
    }
    55% {
        top: 76%;
        left: 26%;
    }
    75% {
        top: 25%;
        left: 28%;
    }
}

Understand the importance of form layout and styling. Consistent spacing, clear labels, and contrasting colors contribute to an inviting and user-friendly design.

Personalize the Contact Us form by adjusting colors, fonts, and sizes to match your website's overall theme. Experiment with different button styles and hover effects.

0 Comments