<div class="contact-form-container">
<div class="form-header">
<h2>Get In Touch</h2>
<p>We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
</div>
<form class="contact-form" id="contactForm">
<div class="form-row">
<div class="form-group">
<input type="text" id="firstName" name="firstName" required>
<label for="firstName">First Name</label>
<span class="form-line"></span>
</div>
<div class="form-group">
<input type="text" id="lastName" name="lastName" required>
<label for="lastName">Last Name</label>
<span class="form-line"></span>
</div>
</div>
<div class="form-group">
<input type="email" id="email" name="email" required>
<label for="email">Email Address</label>
<span class="form-line"></span>
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<input type="tel" id="phone" name="phone">
<label for="phone">Phone Number (Optional)</label>
<span class="form-line"></span>
</div>
<div class="form-group">
<select id="subject" name="subject" required>
<option value=""></option>
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="business">Business Partnership</option>
<option value="other">Other</option>
</select>
<label for="subject">Subject</label>
<span class="form-line"></span>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" required></textarea>
<label for="message">Message</label>
<span class="form-line"></span>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter" class="checkbox-label">
<span class="checkbox-custom"></span>
Subscribe to our newsletter for updates
</label>
</div>
<button type="submit" class="submit-btn">
<span class="btn-text">Send Message</span>
<span class="btn-loader">
<span class="spinner"></span>
</span>
</button>
</form>
</div>
.contact-form-container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-header h2 {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0 0 15px 0;
}
.form-header p {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
margin: 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 0 10px 0;
border: none;
border-bottom: 2px solid #e1e5e9;
background: transparent;
font-size: 16px;
color: #333;
transition: all 0.3s ease;
outline: none;
font-family: inherit;
}
.form-group label {
position: absolute;
top: 15px;
left: 0;
color: #999;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
.form-group input:focus + label,
.form-group input:valid + label,
.form-group select:focus + label,
.form-group select:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
top: -5px;
font-size: 12px;
color: #667eea;
font-weight: 600;
}
.form-line {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: width 0.3s ease;
}
.form-group input:focus ~ .form-line,
.form-group select:focus ~ .form-line,
.form-group textarea:focus ~ .form-line {
width: 100%;
}
.form-group select {
cursor: pointer;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 15px;
}
.checkbox-group input[type="checkbox"] {
display: none;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 14px;
color: #666;
position: static;
}
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
}
.checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: white;
font-size: 12px;
font-weight: bold;
transition: transform 0.2s ease;
}
.checkbox-group input[type="checkbox"]:checked + .checkbox-label .checkbox-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
.checkbox-group input[type="checkbox"]:checked + .checkbox-label .checkbox-custom::after {
transform: translate(-50%, -50%) scale(1);
}
.submit-btn {
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 18px 40px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
margin-top: 20px;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.btn-text {
transition: opacity 0.3s ease;
}
.btn-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.submit-btn.loading .btn-text {
opacity: 0;
}
.submit-btn.loading .btn-loader {
opacity: 1;
}
.error-message {
position: absolute;
bottom: -20px;
left: 0;
color: #e74c3c;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.form-group.error input {
border-bottom-color: #e74c3c;
}
.form-group.error .error-message {
opacity: 1;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Success state */
.form-success {
text-align: center;
padding: 40px;
color: #27ae60;
}
.form-success h3 {
font-size: 1.5rem;
margin: 0 0 15px 0;
}
.form-success p {
color: #666;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.contact-form-container {
padding: 30px 20px;
margin: 20px;
}
.form-row {
grid-template-columns: 1fr;
gap: 25px;
}
.form-header h2 {
font-size: 1.75rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contactForm');
const submitBtn = form.querySelector('.submit-btn');
const inputs = form.querySelectorAll('input, select, textarea');
// Form validation
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
function showError(input, message) {
const formGroup = input.closest('.form-group');
const errorElement = formGroup.querySelector('.error-message');
formGroup.classList.add('error');
if (errorElement) {
errorElement.textContent = message;
}
}
function clearError(input) {
const formGroup = input.closest('.form-group');
formGroup.classList.remove('error');
}
// Real-time validation
inputs.forEach(input => {
input.addEventListener('blur', function() {
validateField(this);
});
input.addEventListener('input', function() {
clearError(this);
});
});
function validateField(field) {
const value = field.value.trim();
if (field.hasAttribute('required') && !value) {
showError(field, 'This field is required');
return false;
}
if (field.type === 'email' && value && !validateEmail(value)) {
showError(field, 'Please enter a valid email address');
return false;
}
clearError(field);
return true;
}
// Form submission
form.addEventListener('submit', function(e) {
e.preventDefault();
// Validate all fields
let isValid = true;
inputs.forEach(input => {
if (!validateField(input)) {
isValid = false;
}
});
if (!isValid) {
return;
}
// Show loading state
submitBtn.classList.add('loading');
// Simulate form submission
setTimeout(() => {
submitBtn.classList.remove('loading');
showSuccessMessage();
}, 2000);
});
function showSuccessMessage() {
const container = document.querySelector('.contact-form-container');
container.innerHTML = `
<div class="form-success">
<div style="font-size: 4rem; margin-bottom: 20px;">✅</div>
<h3>Message Sent Successfully!</h3>
<p>Thank you for contacting us. We'll get back to you within 24 hours.</p>
<button onclick="location.reload()" style="
margin-top: 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
">Send Another Message</button>
</div>
`;
}
// Enhanced interactions
inputs.forEach(input => {
// Add focus animations
input.addEventListener('focus', function() {
this.closest('.form-group').classList.add('focused');
});
input.addEventListener('blur', function() {
this.closest('.form-group').classList.remove('focused');
});
});
// Add some CSS for focus state
const focusStyles = `
.form-group.focused {
transform: translateY(-2px);
}
.form-group {
transition: transform 0.2s ease;
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = focusStyles;
document.head.appendChild(styleSheet);
});