Contact Form Style 2

HTML

<section class="cf-section">
    <div class="cf-container">
        <div class="cf-row">
            <div class="cf-col">
                <div class="cf-box">
                    <div class="cf-col-grid">
                        <h1 class="cf-title">
                            Get in <span class="cf-title-span">touch</span>
                        </h1>
                        <h3 class="cf-subtitle">
                            Enim tempor eget pharetra facilisis sed maecenas adipiscing.
 Eu leo molestie vel, ornare non id blandit netus.
                        </h3>
                        <form action="" class="cf-form">
                            <input class= "textbox" type="name" id="name" value="" placeholder="Your full name">

                            <input class= "textbox" type="email" id="email" value="" placeholder=" E-mail">

                            <input type="tel" id="telNo" class= "textbox" name="telNo"  required placeholder="Your contact Number" />

                            <textarea name="message" id="" cols="30" rows="10" width="100%" placeholder="let's talk about your requirements"></textarea>

                            
                            <div class="cf_checkbox">
                                <input type="checkbox" id="NDA" name="NDA_signed" value="NDA_signed">
                                <label for="NDA" class="terms_agreed"> I want to protect my data by signing an NDA</label><br>
                            </div>
                            <input type="submit" id="btn-submit" class="btn-style-1" value="Submit">
                        </form>
                        <div class="cf-media">
                            <div class="cf-contact-info">
                                <div class="admin-info">
                                    <i class="fa-solid fa-location-dot cf-font-icon"></i>
                                    <p class="cf-admin-info">
                                        <a class="btn-style-3" href="https://goo.gl/maps/yvURrzP2K41HvzDQ9">Akshya Nagar 1st Block 1st Cross, Rammurthy
     nagar, Bangalore-560016</a>
                                    </p>
                                </div>
                                    <div class="admin-info">
                                        <i class="fa-solid fa-envelope cf-font-icon"></i>
                                        <p class="cf-admin-info"><a class="btn-style-3" href="mailto:someone@example.com">somebody@example.com</a>
                                        </p>
                                    </div>
                                    <div class="admin-info">
                                        <i class="fa-solid fa-phone cf-font-icon"></i>
                                        <p class="cf-admin-info"><a class="btn-style-3" href="tel:+910000000000">+91 000 000 0000</a>
                                        </p>
                                    </div>
                            </div>
                            <div class="cf-social-media">
                                <a href="" class="btn-style-2">
                                    <i class="fa-brands fa-instagram cf-media-icon instagram"></i>
                                </a>
                                <a href="" class="btn-style-2">
                                    <i class="fa-brands fa-twitter cf-media-icon twitter"></i>
                                </a>
                                <a href="" class="btn-style-2">
                                    <i class="fa-brands fa-facebook cf-media-icon facebook"></i>
                                </a>
                                <a href="" class="btn-style-2">
                                    <i class="fa-brands fa-youtube cf-media-icon youtube"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="cf-col-map">
                        <div class="cf-rectangle-map">
                            <iframe class="cf-map-link" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3764.5378877169424!2d72.8469661!3d19.3458488!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7ae4d9465d77f%3A0x8cd6f6c00e3ee101!2sNUIT%20Solutions!5e0!3m2!1sen!2sin!4v1692602150094!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat';
}
.cf-box {
    display: grid;
    grid-template-columns: 70% 30%;
        padding-block: 40px;
}
.cf-form {
    display: grid;
    margin-block: 15px;
    width: fit-content;
}
.cf-col-grid {
    width: 100%;
    margin: auto;
    background: #f5f5f5;
    padding: 25px;
}
.cf-title {
    font-size: 54px;
    font-weight: 600;
    letter-spacing: 0.54px;
    margin-block: 20px;
    width: fit-content;
}
.cf-title-span{
    color: #005CBA;
}
.cf-subtitle{
    font-size: 17px; 
    font-weight: 400;
    letter-spacing: 0.16px;
    max-width: 510px;
    line-height: 1.6;
}
.cf-col-grid input, .cf-col-grid textarea{
    width: 501px;
    height: 55px;
    font-family: 'Montserrat';
    font-size: 16px;
    padding-inline: 1%;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    border-bottom: 3px solid #737B7D;
    outline: transparent;
    margin-bottom: 0px;
    background: transparent;
}
textarea {
    padding-block: 20px;
    overflow: hidden;
}
.cf_checkbox {
    margin-block: 10px;
    color: #383C3E;
    font-size: 14px;
    margin-inline: 1%;
    width: 501px;
    column-gap: 2%;
    display: flex;
    align-items: center;
}
.cf_checkbox input{
    width: fit-content;
    height: fit-content;
    transition: 0.5s;
}
.cf_checkbox input:hover{
    box-shadow: 0px 0px 5px 0px #005CBA; 
    transition: 0.5s;
}
.terms_agreed{
    margin-block: 5px;
    font-weight: 500;
}
.textbox::placeholder{
    color: #737B7D;
}
textarea::placeholder{
color: #737B7D;
}
.cf-form  #btn-submit.btn-style-1 {
    color: var(--primeraly-white, #FFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.5px;
    text-transform: uppercase;  
    border-radius: 10px;
    border: 1px solid transparent;
    background: #005CBA;
    display: flex;
    padding: 16px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    transition: 0.5s;
}
.cf-form  #btn-submit.btn-style-1:hover {
    background: white;
    border: 1px solid #005CBA;
    color: #005CBA;
    transition: 0.5s;
}
.cf-media{
    display: flex;
}
.cf-contact-info{
    margin-block: 20px;
}
.cf-admin-info, .cf-admin-info .btn-style-3{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-decoration: none;
    line-height: 1.4;
}
.cf-admin-info .btn-style-3:hover{
    color: #005CBA;
}
.admin-info{
    max-width: 380px;
    margin-block: 20px;
    display: flex;
    column-gap: 3%;
}
.cf-font-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #005CBA;
    font-size: 18px;
}
.cf-social-media .btn-style-2 {
    border: 2px solid transparent;
    background: transparent;
    margin-inline: 10px;
    padding: 5px;
    transition: 0.5s;
    width: 45px;
    text-align: center;
    display: flex;
    text-decoration: none;
    justify-content: center;
    height: 45px;
    align-content: center;
    flex-wrap: wrap;
}
.cf-social-media .btn-style-2:hover {
    border: 2px solid #005CBA;
    border-radius: 7px;
}
.cf-media-icon{
    font-size: 25px;
}
.cf-social-media {
    display: flex;
    justify-content: end;
    align-items: end;
    margin-block: 30px;
}
.instagram{
    color:  #d62976; 
}
.twitter{
    color: #1DA1F2;
}
.facebook{
    color: 	#1877F2;
}
.youtube{
    color: #CD201F;
}
.cf-rectangle-map {
    width: 500px;
    height: 600px;
    border-radius: 20px;
    border: transparent;
    position: relative;
    top: 80px;
    right: 240px;
    box-shadow: 0px 0px 10px 1px #1e1e1e;
}
.cf-map-link {
    object-fit: cover;
    border-radius: 15px;
}
.cf-col-map {
    background: #005CBA;
}
@media(max-width:1180px){
    .cf-box {
        grid-template-columns: 100%;
    }
    .cf-title, .cf-subtitle, .cf-form{
        margin: 20px auto;
    }
    .cf-media {
        display: grid;
        width: fit-content;
        margin: 0px 0px 110px 220px;
    }
    .cf-social-media{
        justify-self: start;
        margin-block: 0px;
    }
    .cf-col-map{
        height: revert;
    }
    .cf-rectangle-map {
        max-width: 900px;
        width: 100%;
        height: 390px;
        top: -70px;
        right: 0px;
        margin: auto;
    }
}
@media(max-width:912px){
    .cf-rectangle-map {
        max-width: 700px;
        width: 100%;
        margin: auto;
    
    }
}
@media(max-width:480px){
    .cf-title {
        font-size: 40px;
    }
    .cf-title, .cf-subtitle, .cf-form {
        margin: revert;
    }
    .cf-col-grid input, .cf-col-grid textarea, .btn-style-1, .cf_checkbox{
        width: 100%;
        font-size: 14px;
    }    
    .cf-media{
        margin: 0 0 110px 0;
    }
    .cf_checkbox input {
        width: 20px;
    }
    .cf-col-grid{
        padding: 5px;
    }
    .cf-social-media{
        margin-inline: auto;
    }
}

Links

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

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

Contact Form Style 2

Get in touch

Enim tempor eget pharetra facilisis sed maecenas adipiscing. Eu leo molestie vel, ornare non id blandit netus.

HTML

CSS

Links