Coder Wrap provides free to use snippets

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
ul.steplist {
    margin: 40px auto;
    max-width: 800px;
    color: #fff;
    font-size: 20px;
}

ul.steplist {
    line-height: 2;
}
.preview-mode-scn {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  margin: 0px;
}
.form-fix {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 800px;
  margin:30px auto;
}
.form-fix h3 {
  font-size: 24px;
  color: #000;
  margin: 0px;
}
.formmessage {
    text-align: center;
    margin: 0px 0px 10px 0px;
    color: #ffffff;
    background-color: #009b04;
    padding: 8px;
    display: none;
}
.successform {
  display: block;
}
.contactform {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: auto;
  justify-content: space-between;
}

.contactform label {
  margin-top: 10px;
}

.form-control {
  width: 100%;
  padding: 10px 15px;
  outline: none;
  border: #ccc 1px solid;
  font-size: 17px;
  font-family: 'Poppins';
  transition: 0.5s all;
}

select.form-control {
  appearance: none;
  padding: 12px;
  background-image: url(https://coderwrap.com/wp-content/uploads/2023/01/slt-arrow-down.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) 20px;
}

.form-control:focus {
  border-color: #ff6200;
}

.form-control::-webkit-input-placeholder {
  color: #000;
}

.form-control:-ms-input-placeholder {
  color: #000;
}

.form-control::placeholder {
  color: #000;
}



textarea.form-control {
  height: 150px;
}

.submit-btn {
  padding: 10px 40px;
  border: none;
  outline: none;
  font-family: 'Poppins';
  font-size: 20px;
  text-transform: uppercase;
  background-color: #ff6200;
  color: #fff;
  cursor: pointer;
  transition: 0.5s all;
  margin-top: 15px;
}

.submit-btn:hover {
  opacity: 0.8;
}

function Mail(){
 let firstName = document.querySelector('#fname').value;
 let lastName = document.querySelector('#lname').value;
 let email = document.querySelector('#email').value;
 let country = document.querySelector('#country').value;
 let subject = document.querySelector('#subject').value;
//STMPJS Code Website: https://smtpjs.com
	Email.send({
  Host : "smtp.elasticemail.com",
  Username : "coderwrap@gmail.com",
  Password : "DAF0717199F3D29142DF86247E0623F32A17", 
  To : 'itqasolution@gmail.com', //Set your get email here
  From : "coderwrap@gmail.com", //Set Added same created account SMTPJS
  Subject : "Contact Form | coderwrap.com", // Here Mail Subject
  Body : "First Name: " + firstName + "
 Last Name: " +  lastName + "
 Email: " + email + "
 Country: " + country + "
 Subject: " + subject 
}).then(
  message => document.querySelector('#form-message').innerHTML = "This has been form is submitted",
  setTimeout(() => {
    document.querySelector('#form-message').classList.add('successform')
  }, "2000"),
  setTimeout(() => {
    document.querySelector('#form-message').classList.remove('successform')
  }, "5000")
);
}