I’m making a contact us site but i doesn’t work please help me this is my code:
HTML:
Contact UsContact 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 : '[email protected]',
From : '[email protected]',
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;
}
});