Contact Form Style 4

HTML

  <section id="cf" class="cf-section">
        <div class="cf-wrapper">
            <div class="cf-header">
                <h2>Contact Us</h2>
                <p>Any question or remarks? Just write us a message!</p>
            </div>

            <div class="cf-form-wrap">
                   <div class="info-left cf-col-40 cf-col-100">
                    <div class="info">
                        <h4>Contact Information</h4>
                        <div class="infos">
                            <a href="#"><span><i class="fa-solid fa-phone"></i></span>+91 32548 48756</a>
                            <a href="#"><span><i class="fa-solid fa-envelope"></i></span>EMAIL123@gmail.com</a>
                            <a href="#"><span><i class="fa-solid fa-location-dot"></i></span>132 Dartmouth Street Boston,
                                Massachusetts 02156 United States</a>
                        </div>
                        <div class="cf-map">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2948.8012604667038!2d-71.07869312437134!3d42.34676037119411!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e37a0d715622b3%3A0x5b2af19970952585!2s132%20Dartmouth%20St%2C%20Boston%2C%20MA%2002116%2C%20USA!5e0!3m2!1sen!2sin!4v1692695311592!5m2!1sen!2sin"
                                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                        <div class="socail-icons">
                            <a href="#"><span><i class="fa-brands fa-twitter"></i></span></a>
                            <a href="#"><span><i class="fa-brands fa-instagram"></i></span></a>
                            <a href="#"><span><i class="fa-brands fa-facebook-f"></i></span></a>
                        </div>
                    </div>
                   </div>
                   <div class="info-right cf-col-60 cf-col-100">
                    <div class="form-right">
                        <form action="">
                            <div class="form-inner-container">
                                <div class="input-details">
                                    <div class="details">
                                        <input type="text"  name="first-name" required>
                                        <label class="control-label" for="name">First Name</label>
                                    </div>
                                    <div class="details">
                                        <input type="text" name="last-name" required>
                                        <label class="control-label" for="last-name">Last Name</label>
                                    </div>
                                    <div class="details" >
                                        <input type="email" placeholder="example@gmail.com" name="email" required>
                                        <label class="control-label" for="email">Email*</label>
                                    </div>
                                    <div class="details">
                                        <input type="number" name="phone-number" required>
                                        <label class="control-label" for="number">Phone Number</label>
                                    </div>
                                </div>
                                <div class="cf-dropdown">
                                    <select class="dropdown-select" name="select">
                                        <option value="">Select</option>
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="fiat">Fiat</option>
                                        <option value="audi">Audi</option>
                                    </select>
                                    <label class="control-label" for="select-service">Select Service</label>
                                    </div>
                                    <div class="cf-message"> Message
                                        <textarea name="message" class="cf-textarea" data-gramm="false"   placeholder="Write your message.."></textarea>
                                        <!-- <label class="details" for="forMsg">Message</label> -->
                                    </div>

                                    <div class="submit-btn-container">
                                        <input  type="reset" class="reset" value="Reset" readonly>
                                        <input type="submit" class="submit-btn" value="Send Message">
                                    </div>
                            </div>
                        </form>
                    </div>
                    <!-- <div class="success-container">
                        <p class="success-text">Test</p>
                    </div> -->
                  </div>

            </div>
        </div>
    </section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&display=swap');

.cf-wrapper {
    --form-wrap-border-radius: 30px;
    --form-wrap-bg-color: #fff;
    --font-poppins: 'Poppins', sans-serif;
    --header-color: #011C2B;
    --text-color-black: #000;
    --text-error-color: #E51D1D;
    --button-border-radius: 16px;
    --card-backgound-color: #011C2B;
    --icons-color: #fff;
    --social-icon-backgound-color: #F6AF03;
    --social-icon-color: #Fff;
    --socail-icon-active-bg-color: #fff;
    --socail-icon-active-color: #000;
    --map-border-radius: 20px;
    --input-underline-color: #011C2A;
    --submit-btn-backgound-color: #F6AF03;
    --submit-btn-color: #Fff;
    -submit-btn-hover-bg-color: #fff;
    --submit-btn-hover-color: #000;
    --submit-btn-border: 2px solid #F6AF03;
}

a {
    text-decoration: none;
    color: inherit;
}

.cf-wrapper {
    padding-inline: 10px;
    margin: 0 auto;
}

.cf-section {
    padding-block: 20px;
    background-color: #E6EFF4;
}

.cf-form-wrap {
    border-radius: var(--form-wrap-border-radius);
    padding: 32px;
    max-width: 100%;
    display: flex;
    background-color: var(--form-wrap-bg-color);
    margin-block: 20px;
}

.cf-col-40 {
    width: 40%;
}

.cf-col-60 {
    width: 60%;
}

.cf-header {
    text-align: center;
}

.cf-header h2 {
    font: 800 40px var(--font-poppins);
    color: var(--header-color);
}

.cf-header p {
    font: 600 18px var(--font-poppins);
    color: #717171;
}
.info-left{
    height: 100%;
}
.info {
    background-color: var(--card-backgound-color);
    padding: 25px;
    border-radius: 20px 20px 20px 20px;
    display: grid;
    gap: 35px;
    height: 100%;
    align-content: start;
    padding-bottom: 50px;
}

.info h4 {
    font: 600 25px var(--font-poppins);
    color: #fff;
}

.infos {
    display: grid;
    gap: 30px;
}

.infos a {
    font: 400 16px var(--font-poppins);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    align-items: start;
}

.info .cf-map {
    max-width: 100%;
    height: 250px;
}

.cf-map iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--map-border-radius);
}

.socail-icons {
    display: inline-flex;
    gap: 30px;
}

.socail-icons a {
    height: 25px;
    width: 25px;
    color: inherit;
}

.socail-icons span i {
    color: var(--social-icon-color);
    background: var(--social-icon-backgound-color);
    padding: 10px;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: color 0.2s linear;
}

.socail-icons span i:hover {
    color: var(--socail-icon-active-color);
    background: var(--socail-icon-active-bg-color);
}

.info-right {
    position: relative;
    overflow: hidden;
}

.form-right {
    padding: 20px;
    padding-left: 30px;
}

.form-submited .form-right {
    transform: translateX(100%);
}

.form-inner-container {
    display: grid;
    gap: 60px;
}

.input-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

.input-details .details,
.cf-dropdown,
.cf-message {
    display: grid;
    font: 500 20px var(--font-poppins);
    position: relative;
}

.details {
    height: 70px;
    align-items: end;
}

.details input {
    border: none;
    border-bottom: 2px solid var(--input-underline-color);
    background: transparent;
    padding-top: 40px;
    padding-bottom: 0;
    font: 500 15px var(--font-poppins);
    z-index: 2;
    height: 100%;
}
.control-label {
    position: absolute;
    top: 0;
    color: #606060a8;
    z-index: 2;
    font-weight: 500;
}

.details input:focus+.control-label {
    color: #000;
}

.input-details input:focus {
    outline: none;
    background: transparent;
}

.input-details input::placeholder {
    color: var(--text-color-black);
    font: 600 15px var(--font-poppins);
    opacity: 0.5;
}

.input-details input::-webkit-outer-spin-button,
.input-details input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-details input[type=number] {
    -moz-appearance: textfield;
}

.cf-message textarea {
    border: none;
    border-bottom: 2px solid var(--input-underline-color);
    background: transparent;
}

.cf-dropdown {
    align-items: end;
    height: 80px;
}

.cf-dropdown select {
    border: none;
    border-bottom: 2px solid var(--input-underline-color);
    /* padding: 10px; */
    background: transparent;
    font: 600 15px var(--font-poppins);
    opacity: 0.5;
    padding-left: 0;
    width: 100%;
}

.cf-dropdown select:focus {
    outline: none;
}

.cf-dropdown select option {
    font: 500 18px var(--font-poppins);
    color: var(--text-color-black);
}

.cf-message textarea {
    font: 600 15px var(--font-poppins);
    color: #606060a8;
    resize: none;
    min-height: 70px;
    padding-top: 10px;
    width: 100%;
}

.cf-message textarea::placeholder {
    outline: none;
    font: 600 15px var(--font-poppins);
    opacity: 0.5;
}

.cf-message textarea:focus {
    outline: none;
}

.submit-btn-container {
    display: flex;
    justify-content: space-between;
}

.submit-btn-container .reset,
.submit-btn-container .submit-btn {
    /* display: inline-block; */
    background: var(--submit-btn-backgound-color);
    border-radius: var(--button-border-radius);
    font: 500 18px var(--font-poppins);
    color: var(--submit-btn-color);
    padding: 10px 25px;
    border: var(--submit-btn-border);
    transition: 0.3s linear;
    cursor: pointer;
}

.submit-btn-container .reset {
    background: #E51D1D;
    border: none;
    cursor: auto;
    width: 20%;
    text-align: center;
}

.submit-btn-container .reset:focus {
    outline: none;
}

.submit-btn-container .submit-btn:hover {
    background: var(--submit-btn-hover-bg-color);
    color: var(--submit-btn-hover-color);
}


.success-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
    background: red;
    right: 0;
    display: grid;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s linear;
    transform: translateX(-100%);
}

.form-submited .success-container {
    transform: translateX(0);
}

.success-text {
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 400;
}

/* breakPoint  */
@media only screen and (min-width:1921px) {
    .cf-wrapper {
        max-width: 1600px;
    }
}

@media only screen and (max-width:1920px) {
    .cf-wrapper {
        max-width: 1300px;
    }
}

@media only screen and (max-width:1366px) {
    .cf-wrapper {
        max-width: 900px;
    }
}

/* tab media query  */
@media only screen and (max-width:1024px) {
    .cf-wrapper {
        max-width: 700px;
    }

    .cf-form-wrap {
        flex-direction: column-reverse;
    }

    .cf-col-100 {
        width: 100%;
    }
}

/* mobile media query  */
@media only screen and (max-width:480px) {
    .cf-form-wrap {
        padding: 10px;
    }

    .form-right {
        padding-left: 20px;
    }

    .input-details {
        grid-template-columns: repeat(1, 1fr);
    }

    .info {
        border-radius: 8px 8px 20px 20px;
    }

    .submit-btn-container {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .submit-btn-container .reset {
        width: 100%;
    }

    .socail-icons {
        justify-content: center;
    }
}

JS

// Get the email input field
// let input = document.querySelectorAll('input');
let emailElement = document.querySelector('input[type="email"]');
let label = document.querySelector('label[for="email"]')


emailElement.addEventListener("input", function () {
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (!emailPattern.test(emailElement.value)) {
        label.style.color = "red";
    } else {
        label.style.color = ""; 
    }
});

Links

<!-- font awosome  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>