Features Implemented
Form Fields:
- Full Name (required)
- Email Address (required)
- Phone Number (optional)
- Subject dropdown (required)
- Message textarea (required)
- Submit button
Styling:
- Clean, professional layout with padding, borders, and soft shadows
- Centered container with max-width
- Poppins Google Font
- Fully responsive for all screen sizes
- Subtle gradient background with glassmorphism effect
JavaScript Features:
- Client-side validation for all required fields
- Email format validation using regex
- Clear error messages for invalid fields
- Success message display on submission
- Error state clearing when user corrects mistakes
Additional Features:
- Smooth hover effects and transitions
- Mobile-friendly design with media queries
- Clean, well-commented code structure
- No external libraries used
The form provides immediate feedback to users when they make errors and gives positive confirmation when submission is successful. The design is modern and professional while remaining accessible and easy to use.
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/* Form Container */
.form-container {
width: 100%;
max-width: 600px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
transition: all 0.3s ease;
}
.form-container:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Form Header */
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h2 {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.form-header p {
color: #7f8c8d;
font-size: 16px;
}
/* Form Elements */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
transition: all 0.3s ease;
background-color: rgba(255, 255, 255, 0.8);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
/* Error Messages */
.error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
}
.form-group.invalid .error {
display: block;
}
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid select {
border-color: #e74c3c;
}
.form-group.invalid input:focus,
.form-group.invalid textarea:focus,
.form-group.invalid select:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}
/* Submit Button */
.submit-btn {
width: 100%;
padding: 14px;
background: linear-gradient(to right, #3498db, #2980b9);
border: none;
border-radius: 6px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.submit-btn:hover {
background: linear-gradient(to right, #2980b9, #3498db);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.submit-btn:active {
transform: translateY(0);
}
/* Success Message */
.success-message {
display: none;
text-align: center;
padding: 20px;
background-color: #2ecc71;
color: white;
border-radius: 6px;
margin-top: 20px;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
.form-header h2 {
font-size: 24px;
}
.form-header p {
font-size: 14px;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.form-container {
padding: 15px;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 10px 12px;
font-size: 14px;
}
.submit-btn {
padding: 12px;
font-size: 14px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contactForm');
const successMessage = document.getElementById('successMessage');
// Regular expression for email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
form.addEventListener('submit', function(e) {
e.preventDefault();
// Reset all error states
resetErrors();
// Validate form fields
let isValid = true;
// Validate Full Name
const fullName = document.getElementById('fullName').value.trim();
if (fullName === '') {
showError('nameError', 'fullName');
isValid = false;
}
// Validate Email
const email = document.getElementById('email').value.trim();
if (email === '') {
showError('emailError', 'email', 'Please enter your email address');
isValid = false;
} else if (!emailRegex.test(email)) {
showError('emailError', 'email', 'Please enter a valid email address');
isValid = false;
}
// Validate Subject
const subject = document.getElementById('subject').value;
if (!subject) {
showError('subjectError', 'subject');
isValid = false;
}
// Validate Message
const message = document.getElementById('message').value.trim();
if (message === '') {
showError('messageError', 'message');
isValid = false;
}
// If form is valid, show success message
if (isValid) {
form.reset();
successMessage.style.display = 'block';
// Hide success message after 5 seconds
setTimeout(() => {
successMessage.style.display = 'none';
}, 5000);
}
});
// Helper function to show error
function showError(errorId, inputId, customMessage = null) {
const errorElement = document.getElementById(errorId);
const inputElement = document.getElementById(inputId).parentNode;
if (customMessage) {
errorElement.textContent = customMessage;
}
errorElement.style.display = 'block';
inputElement.classList.add('invalid');
}
// Helper function to reset all errors
function resetErrors() {
const errors = document.querySelectorAll('.error');
const formGroups = document.querySelectorAll('.form-group');
errors.forEach(error => {
error.style.display = 'none';
});
formGroups.forEach(group => {
group.classList.remove('invalid');
});
successMessage.style.display = 'none';
}
// Add input event listeners to remove error when user starts typing
document.getElementById('fullName').addEventListener('input', function() {
if (this.value.trim() !== '') {
resetFieldError('nameError', 'fullName');
}
});
document.getElementById('email').addEventListener('input', function() {
if (this.value.trim() !== '' && emailRegex.test(this.value.trim())) {
resetFieldError('emailError', 'email');
}
});
document.getElementById('subject').addEventListener('change', function() {
if (this.value) {
resetFieldError('subjectError', 'subject');
}
});
document.getElementById('message').addEventListener('input', function() {
if (this.value.trim() !== '') {
resetFieldError('messageError', 'message');
}
});
// Helper function to reset individual field error
function resetFieldError(errorId, inputId) {
const errorElement = document.getElementById(errorId);
const inputElement = document.getElementById(inputId).parentNode;
errorElement.style.display = 'none';
inputElement.classList.remove('invalid');
}
});
Post a Comment
Thank you
Learning robo team