CSS
.contact-container {
max-width: 700px;
margin: 32px auto;
font-family: "Roboto", sans-serif;
color: #023047;
padding: 0 32px;
}
.contact-container,
.contact-container * {
box-sizing: border-box;
}
.contact-container svg {
height: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 8px;
}
.contact-container h2 {
font-size: 48px;
margin: 0;
margin-bottom: 24px
}
.contact-container .sub-heading {
font-size: 16px;
margin-top: 8px;
line-height: 1.8;
position: relative;
}
.contact-container .sub-heading::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;
height: 1px;
width: 50px;
background: #0096c7;
}
.contact-container form {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 32px;
}
.contact-container form input,
.contact-container form textarea {
width: 100%;
padding: 10px 16px;
font-size: 16px;
border: 0;
border-radius: 4px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
font-family: "Roboto", sans-serif;
padding-left: 36px;
}
.contact-container form input:focus,
.contact-container form textarea:focus {
outline: 1px solid #0096c7;
}
.contact-container form textarea {
height: 140px;
padding-left: 16px;
}
.contact-container .input-container,
.contact-container .btn-container {
position: relative;
}
.contact-container .btn-container {
width: 160px;
margin-top: 8px;
transition: all 300ms ease;
}
.contact-container .btn-container:hover {
transform: scale(1.03);
}
.contact-container .btn-container svg {
left: unset;
right: 8px;
color: #fff;
pointer-events: none;
}
.contact-container input[type="submit"] {
background: #023047;
color: #fff;
text-align: left;
cursor: pointer;
}
.contact-container .top-section {
display: flex;
gap: 16px;
margin-bottom: 12px;
}
.contact-container .group {
flex: 1;
display: flex;
gap: 8px;
flex-direction: column;
}
.contact-container .error-message {
color: red;
margin-top: 8px;
}
@media (max-width: 600px) {
.contact-container .top-section {
flex-direction: column;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="contact-container">
<h2>Get In Touch</h2>
<p class="sub-heading">
Have a question, comment, or feedback? We'd love to hear from you!
</p>
<form action="">
<div class="top-section">
<div class="group">
<label for="fullname">Your Name</label>
<div class="input-container">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
<input type="text" id="fullname" />
</div>
</div>
<div class="group">
<label for="email">Your Email</label>
<div class="input-container">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
<input type="text" id="email" />
</div>
</div>
</div>
<div class="group">
<label for="message">Message</label>
<textarea name="" id="message"></textarea>
</div>
<div class="btn-container">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
/>
</svg>
<input type="submit" value="Send" />
</div>
<div class="error-message"></div>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
JAVASCRIPT
const nameField = document.querySelector(".contact-container #fullname");
const emailField = document.querySelector(".contact-container #email");
const messageField = document.querySelector(".contact-container #message");
const sendBtn = document.querySelector(".contact-container .btn-container");
const errorMessage = document.querySelector(
".contact-container .error-message"
);
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
sendBtn.addEventListener("click", (e) => {
if (
nameField.value.trim() === "" ||
emailField.value.trim() === "" ||
messageField.value.trim() === ""
) {
e.preventDefault();
errorMessage.textContent = "All fields are necessary";
} else if (!emailRegex.test(emailField.value)) {
e.preventDefault();
errorMessage.textContent = "Please enter a valid email";
} else {
errorMessage.textContent = "";
}
});
nameField.addEventListener("focus", () => {
errorMessage.textContent = "";
});
emailField.addEventListener("focus", () => {
errorMessage.textContent = "";
});
messageField.addEventListener("focus", () => {
errorMessage.textContent = "";
});
https://www.youtube.com/watch?v=LmtEqjum9SQ
Comments
Post a Comment