Modern Contact Form UI with Validation | Soft Neumorphism Design using HTML, CSS & JavaScript
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Contact Form UI</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<div class="contact-container">
<h2>Contact Us</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>We'd love to hear from you! Fill out the form below to send us a message.</p>
<form id="contactForm">
<div class="input-group">
<input type="text" id="name" required />
<label for="name">Your Name</label>
</div>
<div class="input-group">
<input type="email" id="email" required />
<label for="email">Your Email</label>
</div>
<div class="input-group">
<textarea id="message" required></textarea>
<label for="message">Your Message</label>
</div>
<button type="submit">Send Message</button>
<p class="response-msg" id="responseMsg"></p>
</form>
</div>
</body>
</html>
CSS
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #e0e5ec;
font-family: 'Segoe UI', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-container {
background: #e0e5ec;
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 500px;
text-align: center;
box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
}
.contact-container h2 {
color: #333;
margin-bottom: 10px;
}
.contact-container p {
color: #666;
margin-bottom: 20px;
}
/* Input Fields */
.input-group {
position: relative;
margin-bottom: 25px;
}
.input-group input,
.input-group textarea {
width: 100%;
padding: 14px 12px;
border: none;
border-radius: 12px;
background: #e0e5ec;
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
font-size: 14px;
color: #333;
resize: none;
}
.input-group textarea {
height: 120px;
}
.input-group label {
position: absolute;
left: 12px;
top: 14px;
font-size: 14px;
color: #888;
pointer-events: none;
transition: 0.3s;
}
.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label {
top: -10px;
left: 10px;
font-size: 12px;
background: #e0e5ec;
padding: 0 6px;
color: #333;
border: 1px solid #aaa;
border-radius: 4px;
}
/* Button */
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: linear-gradient(to right, #5b0dba, #1e5ddd);
}
/* Response */
.response-msg {
margin-top: 15px;
font-size: 14px;
color: #333;
}
JavaScript
const form = document.getElementById('contactForm');
const responseMsg = document.getElementById('responseMsg');
form.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('message');
if (name.value && email.value && message.value) {
responseMsg.textContent = "Message sent successfully!";
responseMsg.style.color = "#388e3c";
form.reset();
} else {
responseMsg.textContent = "Please fill all fields.";
responseMsg.style.color = "#d32f2f";
}
});