Contact us not working

I’m making a contact us site but i doesn’t work please help me this is my code:

HTML:

Contact Us

Contact Me!

<form action="#">
  <div class="input-box">
    <div class="input-field field">
      <input type="text" placeholder="Full Name" id="name" class="item" autocomplete="off">
      <div class="error-txt">Full Name can't be blank</div>
    </div>
    <div class="input-field field">
      <input type="text" placeholder="Email Address" id="email" class="item" autocomplete="off">
      <div class="error-txt email">Email Address can't be blank</div>
    </div>
  </div>

  <div class="input-box">
    <div class="input-field field">
      <input type="text" placeholder="Phone number" id="phone" class="item" autocomplete="off">
      <div class="error-txt">Phone Number can't be blank</div>
    </div>
    <div class="input-field field">
      <input type="text" placeholder="Subject" id="subject" class="item" autocomplete="off">
      <div class="error-txt">Subject can't be blank</div>
    </div>
  </div>

  <div class="textarea-field field">
    <textarea name="" id="message" cols="30" rows="10" placeholder="Your Message" class="item" autocomplete="off"></textarea>
    <div class="error-txt">Message can't be blank</div>
  </div>

  <button type="submit">Send Message</button>
</form>

CSS:

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap’);

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}

body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
background: #1f242d;
}

.contact h2{
font-size:40px;
color:#ededed;
text-align: center;
margin-bottom:10px;
}

.contact form{
width:600px;
text-align:center;
}

form .input-box{
display:flex;
justify-content: space-between;
}

.input-box .input-field{
width:48.5%;
}

.field .item{
width:100%;
padding:18px;
background: transparent;
border: 2px solid #00eeff;
outline:none;
border-radius: 6px;
font-size: 16px;
color: #ededed;
margin: 12px 0;
}

.field.error .item{
border-color: #d93025;
}

.field .item::placeholder{
color: rgba(255,255,255, .3);
}

.field.error .error-txt{
display: block;
}

form .textarea-field .item{
resize:none;
}

form .textarea-field .error-txt{
margin-top: -10px;
}

form button{
padding: 12px 32px;
background: #00eeff;
border: none;
outline: none;
border-radius: 6px;
box-shadow: 0 0 10px #00eeff;
font-size: 16px;
color: #333333;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
margin-top: 20px;
transition: .5s;
}

form button:hover{
box-shadow:none;
}

JS:

const form = document.querySelector(‘form’);
const fullName = document.getElementById(“name”);
const email = document.getElementById(“email”);
const phone = document.getElementById(“phone”);
const subject = document.getElementById(“subject”);
const mess = document.getElementById(“message”);

function sendEmail(){
const bodyMessage = ‘Full Name: ${fullName.value}
Email: ${email.value}
Phone Number: ${phone.value}
Message: ${mess.value}’;

Email.send({
  SecureToken: " 236b2d1f-414d-442b-8c81-cc174bb8406e",
  To : 'test@gmail.com',
  From : 'test@gmail.com',
  Subject : subject.value,
  Body : bodyMessage

}).then(
message => {
if (message == “OK”){
Swal.fire({
title: “Success!”,
text: “Message sent successfuly!”,
icon: “success”
});
}
}
);
}

function checkInputs(){
const items= document.querySelectorAll(“.item”);

for(const item of items){
if (item.value == “”){
item.classList.add(“error”);
item.parentElement.classList.add(“error”);
}

if (items[1].value !=""){
  checkEmail();
}

items[1].addEventListener("keyup", () =>{
  checkEmail();
});

item.addEventListener("keyup", () =>{
  if (item.value !="") {
    item.classList.remove("error");
    item.parentElement.classList.remove("error");
  }
  else{
    item.classList.add("error");
    item.parentElement.classList.add("error");
  }
})

}
}

function checkEmail(){
const emailRegex = /^([a-z\d.-]+)@([a-z\d-]+).([a-z]{2,3})(.[a-z]{2,3})?$/;
const errorTxtEmail = document.querySelector(“.error-txt email”)

if (!email.value.match(emailRegex)){
  email.classList.add("error");
  email.parentElement.classList.add("error");
  
  if(email.value !=""){
    errorTxtEmail.innerText="Enter a valid email address";
  }
  else{
    errorTxtEmail.innerText="Email address can't be  blank";
  }
}
else{
        email.classList.remove("error");
  email.parentElement.classList.remove("error");
}

}

form.addEventListener(“submit”, (e) => {
e.preventDefault();
checkInputs();

if(!fullName.classList.contains(“error”) && !email.classList.contains(“error”) && !phone.classList.contains(“error”) && !subject.classList.contains(“error”) && !mess.classList.contains(“error”)){
sendEmail();

form.reset();
return false;

}
});

May you please explain what is not working about this?

I tried folowing this vid: https://www.youtube.com/watch?v=IxziwuuaS3c&ab_channel=Codehal

Hmm… what is not working about this? That video was released in early 2020 so some things might have changed might have changed since then, but what is not working with your code?

I made it work

I am glad you got it working!