Contact Form Style 1

HTML

<section id="style-1">
	<div class="s4-container">
		<div class="s4-row">
			<div class="s4-col1">
				<div class="s4-heading">
					<h1>Get in touch</h1>
				</div>
				<form>
                <div class="user-box">
                    <input type="text" name="" required="">
                        <label>Username</label>
                </div>                
                <div class="user-box">
                    <input id="telNo" name="telNo" type="tel" required=""/>
                        <label>Telephone</label>
                </div>
                <div class="user-box">
                    <input type="email" id="email" size="30" required />
                        <label>Email</label>
                </div>
                <div class="user-box">
                    <textarea id='txtid' rows="5" cols="33"></textarea>
                    <label class="unq-lb">Message</label>
                </div>
                <div class="check-news">
                	<div class="checkbox-wrapper-19">
  <input type="checkbox" id="cbtest-19" />
  <label for="cbtest-19" class="check-box">
      </div> 
                 <label>I would like to receive the newsletter.</label>
                </div>
                 <!-- <div class="submit">
                 	<input type="submit" value="Submit">
                 </div> -->
                 <div class="button">
                    <input type="submit" value="Submit">
                        <div class="btnTwo">
                           <p class="btnText2">X</p>
                        </div>
                 </div>
           </form>
			</div>
			<div class="s4-col2">
				<div class="col2-para">
					<p>Borem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.</p>
				</div>
				<div class="col-2-map">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2546.0641698067716!2d73.24572025576134!3d22.820586072541804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e3d18adf07c85%3A0x87d004fd56200a80!2sKosam%2C%20Gujarat%20388250!5e0!3m2!1sen!2sin!4v1692357118500!5m2!1sen!2sin" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				</div>
				<div class="cordinates">
					<div><i class="fas fa-map-marker-alt"></i><p><a href="https://goo.gl/maps/yvURrzP2K41HvzDQ9">NYC, United States</a></p></div>
					<div><i class="fas fa-phone-alt"></i><p><a href="tel:000111222333">000111222333</a></p></div>
					<div><i class="far fa-envelope"></i><p><a href="mailto:someone@example.com">somebody@example.com</a></p></div>
				</div>
				<div class="col2-socials">
					<i class="fab fa-instagram"></i>
					<i class="fab fa-twitter"></i>
					<i class="fab fa-facebook"></i>
					<i class="fab fa-youtube"></i>
				</div>
			</div>
		</div>
	</div>
</section>

CSS

*{
	margin: 0px;
	padding: 0px;
}

.s4-row .s4-col1{
     width: 39%;
    background: #303030;
    padding: 58px 92px;

}
.s4-row .s4-col2 {
    width: 38%;
    padding: 35px 90px;
}

.s4-row{
	display: flex;
	height: 100vh;
}
textarea{
color:#fff;
padding:10px 0px;
}

.s4-heading h1{
color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 61.999px;
font-style: normal;
font-weight: 600;
line-height: normal;
position: relative;
}
.s4-heading h1:after{
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 80%;
height: 5px;
background: #DE6E4B;

}
.s4-col1 form{
	padding: 70px 0px;
}
.s4-col1 label{
	color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.s4-col1 label:nth-child(6){
color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

#style-1 .user-box {
  position: relative;
}

#style-1 .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
#style-1 .user-box textarea {
  width: 100%;
  background: transparent;
}
#style-1 .user-box textarea:focus {
  width: 100%;
  background: transparent !important;
    border-color:#fff;
    color:#fff;
    padding:10px 0px;
}
.user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff !important;
  pointer-events: none;
  transition: .5s;
}

#style-1 .user-box input:focus ~ label,
#style-1 .user-box input:valid ~ label,
#style-1 .user-box input:active ~ label{
  top: -20px;
  left: 0;
  color: #DE6E4B;
  font-size: 12px;
    background-color:transparent;
}
#style-1 .user-box textarea:focus ~ label {
top:-20px;
}
#style-1 .user-box textarea:active ~ label{
top:-20px;
}
#style-1 .s4-container .user-box input[type="text"]:focus{
 background-color:transparent !important;   
}

#style-1 .s4-container .user-box input[type="tel"]{
background-color:transparent !important;
}

#style-1 .s4-container .user-box input[type="email"]{
background-color:transparent !important;
}

.s4-col1 label:nth-child(5){
color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.check-news{
	padding: 10px 0px;
    display:flex;
}

#style-1 .button {
  background: #DE6E4B;
  width : 30%;
  height : 50px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  border-radius: 19px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}

#style-1 .btnTwo {
    position: relative;
    width: 200px;
    height: 100px;
    margin-top: -60px;
    padding-top: 2px;
    background: #4f5154;
    left: -202px;
    transition: .3s;
}
#style-1 .button input {
  color : white;
  transition : .3s;
  border: aliceblue;
    margin: auto 0px;
    height: 100%;
    background: transparent;
    color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding:0px;
}
.btnText2 {
  margin-top : 63px;
  margin-right : -130px;
  color : #FFF;
}
#style-1 .button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/
  left: -150px;
}
#style-1 .button:hover input{ /*When hovering over .button change .btnText*/
  margin-left : 50px;
}
#style-1 .button:active { /*Clicked and held*/
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

.s4-col2 .col2-para{
	color: #000;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding: 0px 0px 10px 0px;
}

.cordinates div{
	display: flex;
	padding: 5px 0px;
}
#style-1 .cordinates{
	padding: 5px 0px;
}
.cordinates div i{
	font-size: 27px;
	color: #ea6239;
	padding-inline: 10px;
}
.cordinates div p{
	color: #000;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.cordinates a{
color: #000;
    text-decoration: none
}
.col2-socials i{
 font-size: 29px;
 padding-inline: 10px;
 animation: 0.7s;
 transition: 0.7s;
}
.col2-socials .fa-instagram{
color: #ea6239;

}
.fa-twitter{
	color: #ea6239;
}
.fa-facebook{
	color: #ea6239;
}
.fa-youtube{
	color: #ea6239;
}

.col2-socials i:hover{
scale: 1.2;
}



@media screen and (max-width: 1080px) and (min-width: 601px){
.s4-row .s4-col2{
  padding: 59px 46px;
}
.s4-row .s4-col1{
  padding: 58px 45px;
}
.button:hover input{
      margin-left: 34px;
}
.button input{
      font-size: 15px;
}
.button:hover .btnTwo {
    left: -168px;
}
    .s4-row{
	display: flex;
	height: 80vh;
}
}

@media screen and (max-width: 600px){
  .s4-row .s4-col1{
    width: 100%;
  }
  .s4-row .s4-col2{
    width: 100%;
  }
  .s4-row{
    display: block;
      height:unset;
  }
  .s4-row .s4-col1{
    padding: 5px 5px;
  }
  .s4-row .s4-col2{
        padding: 50px 5px;
  }
  .s4-heading h1{
    font-size: 57.999px;
  }
    #style-1 .s4-heading{
    padding:10px 18px;
    }
  .button:hover input{
    margin-left: 46px;
  }
  .button input{
    font-size: 15px;
  }
  .button:hover .btnTwo{
    left: -163px;
  }
    .s4-col1 form {
    padding: 28px 18px;
}
}
.checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 25px;
  }

  @-moz-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @-webkit-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-webkit-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-moz-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  .checkbox-wrapper-19 input[type=checkbox] {
    display: none;
  }

  .checkbox-wrapper-19 .check-box {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #fff;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
          margin-top: 4px;
    margin-right: 8px;
  }
  .checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: #34b93d;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
  }
  .checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper-19 .check-box.checked {
    border-color: #34b93d;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
  }
  .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
  }

JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery("#txtid").click(function() { changeDiv(); });
                
            });
            function changeDiv() {
            
                jQuery('.unq-lb').css("top","-20px");
                jQuery('.unq-lb').css("font-size","12px");
            }
        </script>

Links

<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

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