1. Neumorphic Design:
The contact form features a modern Neumorphism style with soft shadows, rounded corners, and a pastel color scheme, creating an elegant, 3D-like appearance with subtle hover and active effects for enhanced user interaction.
2. Responsive & Accessible:
Fully responsive layout adapts seamlessly from mobile to desktop, with a stacked design on smaller screens and side-by-side fields on larger ones. Includes ARIA labels and focus styles for accessibility compliance.
3.Client-Side Validation & Feedback:
JavaScript-powered validation ensures accurate input for all fields, displaying clear error messages for invalid entries and a success message upon submission, with a form reset for a smooth user experience.
4.Interactive Features:
Incorporates floating labels, a character counter for the message field, and a subtle slide-in animation on load, enhancing usability and visual appeal without relying on external libraries.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f3;
padding: 20px;
}
.container {
max-width: 700px;
width: 100%;
background: #f0f0f3;
padding: 40px;
border-radius: 20px;
box-shadow: 10px 10px 20px #d1d1d6, -10px -10px 20px #ffffff;
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.contact-form h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
font-size: 24px;
font-weight: 600;
}
.form-group {
position: relative;
margin-bottom: 25px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
background: #f0f0f3;
box-shadow: inset 5px 5px 10px #d1d1d6, inset -5px -5px 10px #ffffff;
font-size: 16px;
color: #333;
outline: none;
transition: all 0.3s ease;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-group label {
position: absolute;
top: 15px;
left: 15px;
font-size: 16px;
color: #666;
pointer-events: none;
transition: all 0.3s ease;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
top: -10px;
left: 10px;
font-size: 12px;
color: #555;
background: #f0f0f3;
padding: 0 5px;
}
.form-group input:focus,
.form-group textarea:focus {
box-shadow: 5px 5px 10px #d1d1d6, -5px -5px 10px #ffffff;
}
.error {
color: #e74c3c;
font-size: 12px;
margin-top: 5px;
display: none;
}
.error.show {
display: block;
}
.char-counter {
font-size: 12px;
color: #666;
text-align: right;
margin-top: 5px;
}
.submit-btn {
display: block;
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
background: #f0f0f3;
box-shadow: 5px 5px 10px #d1d1d6, -5px -5px 10px #ffffff;
font-size: 16px;
font-weight: 600;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
box-shadow: 3px 3px 8px #d1d1d6, -3px -3px 8px #ffffff;
}
.submit-btn:active {
box-shadow: inset 5px 5px 10px #d1d1d6, inset -5px -5px 10px #ffffff;
}
.success-message {
display: none;
text-align: center;
color: #2ecc71;
font-size: 16px;
margin-top: 20px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.success-message.show {
display: block;
}
@media (min-width: 768px) {
.form-row {
display: flex;
gap: 20px;
}
.form-row .form-group {
flex: 1;
}
}
/* Accessibility */
input:focus,
textarea:focus,
.submit-btn:focus {
outline: 2px solid #666;
outline-offset: 2px;
}
const form = document.getElementById('contactForm');
const fullName = document.getElementById('fullName');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const message = document.getElementById('message');
const charCounter = document.getElementById('charCounter');
const successMessage = document.getElementById('successMessage');
const showError = (element, message) => {
element.classList.add('show');
element.textContent = message;
};
const clearErrors = () => {
document.querySelectorAll('.error').forEach(error => {
error.classList.remove('show');
});
};
const validateEmail = (email) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};
message.addEventListener('input', () => {
charCounter.textContent = `${message.value.length}/500`;
});
form.addEventListener('submit', (e) => {
e.preventDefault();
clearErrors();
let isValid = true;
if (!fullName.value.trim()) {
showError(fullNameError, 'Please enter your full name');
isValid = false;
}
if (!email.value.trim() || !validateEmail(email.value)) {
showError(emailError, 'Please enter a valid email address');
isValid = false;
}
if (!subject.value.trim()) {
showError(subjectError, 'Please enter a subject');
isValid = false;
}
if (!message.value.trim()) {
showError(messageError, 'Please enter your message');
isValid = false;
}
if (isValid) {
successMessage.classList.add('show');
form.reset();
charCounter.textContent = '0/500';
setTimeout(() => {
successMessage.classList.remove('show');
}, 3000);
}
});
إرسال تعليق
Thank you
Learning robo team