Contact Us - Blog
/* Animations for form elements */
.form-control:focus {
transition: all 0.3s ease-in-out;
transform: translateY(-2px);
}
/* Custom styling for input groups */
.input-group-text {
background-color: var(--bs-secondary-bg);
border-right: none;
}
.input-group .form-control {
border-left: none;
}
.input-group .form-control:focus {
border-left: none;
box-shadow: none;
}
/* Alert animations */
.alert {
animation: slideDown 0.3s ease-in-out;
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.card-body {
padding: 2rem !important;
}
}
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('contactForm');
const submitBtn = document.getElementById('submitBtn');
const spinner = submitBtn.querySelector('.spinner-border');
const alertContainer = document.getElementById('alert-container');
// Form validation configurations
const validationConfig = {
name: {
min: 2,
max: 50,
pattern: /^[a-zA-Z\s]*$/
},
email: {
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
},
subject: {
min: 5,
max: 100
},
message: {
min: 10,
max: 1000
}
};
// Show alert message
function showAlert(message, type) {
const alert = document.createElement('div');
alert.className = `alert alert-${type} alert-dismissible fade show`;
alert.innerHTML = `
${message}
`;
alertContainer.innerHTML = '';
alertContainer.appendChild(alert);
// Auto dismiss after 5 seconds
setTimeout(() => {
alert.classList.remove('show');
setTimeout(() => alert.remove(), 300);
}, 5000);
}
// Validate single field
function validateField(field) {
const value = field.value.trim();
const config = validationConfig[field.id];
// Required check
if (!value) {
field.classList.add('is-invalid');
return false;
}
// Length check
if (config.min && value.length < config.min) {
field.classList.add('is-invalid');
field.nextElementSibling.textContent = `Minimum ${config.min} characters required`;
return false;
}
if (config.max && value.length > config.max) {
field.classList.add('is-invalid');
field.nextElementSibling.textContent = `Maximum ${config.max} characters allowed`;
return false;
}
// Pattern check
if (config.pattern && !config.pattern.test(value)) {
field.classList.add('is-invalid');
field.nextElementSibling.textContent = `Please enter a valid ${field.id}`;
return false;
}
field.classList.remove('is-invalid');
field.classList.add('is-valid');
return true;
}
// Real-time validation
contactForm.querySelectorAll('.form-control').forEach(field => {
field.addEventListener('input', () => validateField(field));
field.addEventListener('blur', () => validateField(field));
});
// Form submission
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Validate all fields
let isValid = true;
contactForm.querySelectorAll('.form-control').forEach(field => {
if (!validateField(field)) {
isValid = false;
}
});
if (!isValid) {
showAlert('Please check the form for errors.', 'danger');
return;
}
// Show loading state
submitBtn.disabled = true;
spinner.classList.remove('d-none');
// Simulate form submission
setTimeout(() => {
// Reset form and show success message
contactForm.reset();
contactForm.querySelectorAll('.form-control').forEach(field => {
field.classList.remove('is-valid');
});
showAlert('Your message has been sent successfully!', 'success');
// Reset button state
submitBtn.disabled = false;
spinner.classList.add('d-none');
}, 1500);
});
// Reset form handler
contactForm.addEventListener('reset', function() {
contactForm.querySelectorAll('.form-control').forEach(field => {
field.classList.remove('is-invalid', 'is-valid');
});
alertContainer.innerHTML = '';
});
});
Comments
Post a Comment