Contact forms are essential tools for any website, facilitating seamless communication between users and site owners. They come in various designs and functionalities, each tailored to specific needs.
In this article, we will explore ten exemplary contact forms that stand out for their usability, aesthetics, and effectiveness. These examples will inspire you to create or refine your own contact forms.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your contact forms with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Ready to transform your designs? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs, including contact forms, with unmatched efficiency. Our drag-and-drop editor ensures pixel-perfect results instantly.
Ready to elevate your designs? Start for free and create beautiful, responsive interfaces right away!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Innovatech Contact Form</title> <style> /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #0a0a0a; --secondary: #f2f2f2; --accent: #3a3a3a; --error: #ff3b30; --success: #34c759; --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body { background-color: var(--secondary); color: var(--primary); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 650px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); background-color: white; overflow: hidden; position: relative; transition: var(--transition); } .container:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .header { padding: 35px 40px 25px; background-color: var(--primary); color: white; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%); background-size: 20px 20px; opacity: 0.1; } .logo { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 10px; display: flex; align-items: center; } .logo-icon { width: 28px; height: 28px; border: 2px solid white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; position: relative; overflow: hidden; } .logo-icon::after { content: ''; position: absolute; width: 14px; height: 14px; background-color: white; border-radius: 50%; transform: scale(0); transition: var(--transition); } .container:hover .logo-icon::after { transform: scale(1); } .subtitle { font-size: 15px; line-height: 1.5; opacity: 0.8; max-width: 90%; } .form-container { padding: 35px 40px 40px; } .form-group { margin-bottom: 22px; position: relative; } .form-group.half { width: 48%; } .form-row { display: flex; justify-content: space-between; } label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--accent); transition: var(--transition); } input, textarea, select { width: 100%; padding: 12px 15px; background-color: var(--secondary); border: 2px solid transparent; border-radius: 8px; font-size: 15px; color: var(--primary); transition: var(--transition); outline: none; resize: none; } input:focus, textarea:focus, select:focus { border-color: var(--primary); background-color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .filled { border-left: 2px solid var(--success); } .error { border-color: var(--error); } .error-message { color: var(--error); font-size: 12px; margin-top: 5px; display: none; opacity: 0; transform: translateY(-5px); transition: var(--transition); } .error-message.show { display: block; opacity: 1; transform: translateY(0); } textarea { min-height: 120px; } button { background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 14px 28px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } button:hover { background-color: #1a1a1a; } button::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } button:hover::after { left: 100%; } .submission-status { position: fixed; top: 20px; right: 20px; padding: 15px 20px; border-radius: 8px; background-color: var(--primary); color: white; font-size: 14px; font-weight: 500; display: flex; align-items: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); transform: translateX(calc(100% + 40px)); transition: var(--transition); z-index: 1000; } .submission-status.show { transform: translateX(0); } .status-icon { width: 20px; height: 20px; margin-right: 12px; position: relative; } .status-icon.success::before { content: ''; position: absolute; width: 6px; height: 12px; border-right: 2px solid white; border-bottom: 2px solid white; transform: rotate(45deg); top: 2px; left: 7px; } .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .field-indicator { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: var(--primary); transition: var(--transition); } input:focus ~ .field-indicator, textarea:focus ~ .field-indicator { width: 100%; } .typing-cursor { display: inline-block; width: 2px; height: 20px; background-color: white; margin-left: 5px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .interest-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; } .interest-tag { background-color: var(--secondary); border: 2px solid transparent; padding: 8px 15px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: var(--transition); } .interest-tag:hover { background-color: white; border-color: var(--secondary); } .interest-tag.selected { background-color: var(--primary); color: white; } @media (max-width: 600px) { .form-row { flex-direction: column; } .form-group.half { width: 100%; } .header, .form-container { padding: 30px 25px; } .interest-tags { gap: 8px; } .interest-tag { padding: 6px 12px; font-size: 13px; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="logo-icon"><span class="typing-cursor"></span></div> InnovaTech </div> <p class="subtitle">Have a question about our AI-powered solutions or want to schedule a demo? We're here to accelerate your digital transformation.</p> </div> <div class="form-container"> <div class="form-group"> <label for="interest">What brings you to InnovaTech?</label> <div class="interest-tags"> <div class="interest-tag" data-value="product-info">Product Information</div> <div class="interest-tag" data-value="demo">Request a Demo</div> <div class="interest-tag" data-value="pricing">Pricing Details</div> <div class="interest-tag" data-value="support">Technical Support</div> <div class="interest-tag" data-value="partnership">Partnership Opportunity</div> </div> <input type="hidden" id="interest" name="interest"> </div> <div class="form-row"> <div class="form-group half"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Jane Doe" required> <div class="field-indicator"></div> <div class="error-message">Please enter your name</div> </div> <div class="form-group half"> <label for="company">Company</label> <input type="text" id="company" placeholder="Acme Corp"> <div class="field-indicator"></div> </div> </div> <div class="form-row"> <div class="form-group half"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="[email protected]" required> <div class="field-indicator"></div> <div class="error-message">Please enter a valid email address</div> </div> <div class="form-group half"> <label for="role">Your Role</label> <select id="role"> <option value="" disabled selected>Select your role</option> <option value="executive">Executive/C-Level</option> <option value="manager">Department Manager</option> <option value="professional">IT Professional</option> <option value="developer">Developer</option> <option value="other">Other</option> </select> <div class="field-indicator"></div> </div> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" placeholder="Tell us about your needs or questions regarding our solutions..."></textarea> <div class="field-indicator"></div> </div> <button type="submit" id="submit-button">Send Message</button> </div> </div> <div class="submission-status"> <div class="status-icon success"></div> <span>Your message has been sent successfully!</span> </div> <script> // Select all elements we need to interact with const form = document.querySelector('.form-container'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const messageInput = document.getElementById('message'); const submitButton = document.getElementById('submit-button'); const submissionStatus = document.querySelector('.submission-status'); const interestTags = document.querySelectorAll('.interest-tag'); const interestInput = document.getElementById('interest'); // Interest tag selection interestTags.forEach(tag => { tag.addEventListener('click', () => { interestTags.forEach(t => t.classList.remove('selected')); tag.classList.add('selected'); interestInput.value = tag.dataset.value; // Add pulse animation to submit button submitButton.classList.add('pulse'); setTimeout(() => { submitButton.classList.remove('pulse'); }, 1500); }); }); // Input validation functions function validateEmail(email) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } function showError(input, message) { const errorMessage = input.nextElementSibling.nextElementSibling; input.classList.add('error'); errorMessage.textContent = message; errorMessage.classList.add('show'); } function clearError(input) { const errorMessage = input.nextElementSibling.nextElementSibling; input.classList.remove('error'); errorMessage.classList.remove('show'); } // Dynamic validation on input nameInput.addEventListener('input', () => { if (nameInput.value.trim() !== '') { nameInput.classList.add('filled'); clearError(nameInput); } else { nameInput.classList.remove('filled'); } }); emailInput.addEventListener('input', () => { if (emailInput.value.trim() !== '') { if (validateEmail(emailInput.value)) { emailInput.classList.add('filled'); clearError(emailInput); } else { emailInput.classList.remove('filled'); showError(emailInput, 'Please enter a valid email address'); } } else { emailInput.classList.remove('filled'); clearError(emailInput); } }); messageInput.addEventListener('input', () => { if (messageInput.value.trim() !== '') { messageInput.classList.add('filled'); } else { messageInput.classList.remove('filled'); } }); // Form submission submitButton.addEventListener('click', (e) => { e.preventDefault(); let isValid = true; // Validate name if (nameInput.value.trim() === '') { showError(nameInput, 'Please enter your name'); isValid = false; } // Validate email if (emailInput.value.trim() === '') { showError(emailInput, 'Please enter your email address'); isValid = false; } else if (!validateEmail(emailInput.value)) { showError(emailInput, 'Please enter a valid email address'); isValid = false; } if (isValid) { // Simulate form submission submitButton.textContent = 'Sending...'; submitButton.disabled = true; setTimeout(() => { // Show success message submissionStatus.classList.add('show'); // Reset form nameInput.value = ''; emailInput.value = ''; messageInput.value = ''; document.getElementById('company').value = ''; document.getElementById('role').selectedIndex = 0; interestTags.forEach(tag => tag.classList.remove('selected')); interestInput.value = ''; // Remove filled classes document.querySelectorAll('input, textarea').forEach(input => { input.classList.remove('filled'); }); // Reset button submitButton.textContent = 'Send Message'; submitButton.disabled = false; // Hide success message after 3 seconds setTimeout(() => { submissionStatus.classList.remove('show'); }, 3000); }, 1500); } }); // Logo animation const logoIcon = document.querySelector('.logo-icon'); logoIcon.addEventListener('mouseenter', () => { logoIcon.querySelector('.typing-cursor').style.animation = 'none'; setTimeout(() => { logoIcon.querySelector('.typing-cursor').style.animation = 'blink 1s infinite'; }, 50); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Premium Real Estate Contact</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Poppins:wght@300;400;500;600&display=swap'); :root { --primary: #1a2e44; --secondary: #c8a97e; --light: #f4f4f4; --dark: #333; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--dark); background-color: #fff; height: 100vh; overflow: hidden; } .container { width: 100%; height: 100vh; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; display: flex; overflow: hidden; } .background-container { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .background-slider { display: flex; width: 300%; height: 100%; transition: transform 10s ease-in-out; } .bg-slide { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; } .bg-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 46, 68, 0.65); } .bg-slide:nth-child(1) { background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80'); } .bg-slide:nth-child(2) { background-image: url('https://images.unsplash.com/photo-1600573472550-8090b5e0745e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); } .bg-slide:nth-child(3) { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); } .form-container { width: 100%; height: 100%; padding: 40px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; } .branding { position: absolute; top: 30px; left: 40px; z-index: 10; } .branding h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 24px; color: white; margin: 0; } .branding span { font-weight: 300; color: var(--secondary); } h1 { font-family: 'Playfair Display', serif; font-size: 32px; color: white; margin-bottom: 10px; position: relative; } h1::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 3px; background-color: var(--secondary); } p { font-size: 15px; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; max-width: 500px; } .form-steps { display: flex; justify-content: space-between; width: 100%; margin-bottom: 25px; } .step { flex: 1; height: 3px; background-color: rgba(255, 255, 255, 0.3); position: relative; margin: 0 5px; } .step.active { background-color: var(--secondary); } .step-title { position: absolute; top: -25px; left: 0; font-size: 12px; color: white; opacity: 0.7; transition: var(--transition); } .step.active .step-title { opacity: 1; font-weight: 500; color: var(--secondary); } .form-section { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .form-section.active { display: block; opacity: 1; transform: translateY(0); } .form-field { margin-bottom: 20px; position: relative; } .form-field label { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; } input, select, textarea { width: 100%; padding: 14px 15px; font-size: 15px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 4px; outline: none; transition: var(--transition); font-family: 'Poppins', sans-serif; } input:focus, select:focus, textarea:focus { background-color: rgba(255, 255, 255, 0.15); border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.2); } textarea { height: 120px; resize: none; } input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.5); } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; } select option { background-color: var(--primary); color: white; } .radio-group { display: flex; gap: 20px; margin-top: 5px; } .radio-option { display: flex; align-items: center; cursor: pointer; } .radio-option input { position: absolute; opacity: 0; width: 0; height: 0; } .radio-checkmark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); display: inline-block; margin-right: 8px; position: relative; transition: var(--transition); } .radio-option input:checked + .radio-checkmark { border-color: var(--secondary); } .radio-option input:checked + .radio-checkmark:after { content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--secondary); } .radio-option span { color: white; font-size: 14px; } .btn-container { display: flex; justify-content: space-between; margin-top: 30px; } .btn { padding: 12px 28px; background: none; border: none; font-size: 15px; font-weight: 500; cursor: pointer; border-radius: 4px; transition: var(--transition); font-family: 'Poppins', sans-serif; } .btn-prev { color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); } .btn-prev:hover { background-color: rgba(255, 255, 255, 0.1); color: white; } .btn-next, .btn-submit { background-color: var(--secondary); color: var(--dark); position: relative; overflow: hidden; } .btn-next:after, .btn-submit:after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease-out; } .btn-next:hover:after, .btn-submit:hover:after { transform: translate(-50%, -50%) scale(1); } .success-message { display: none; text-align: center; color: white; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .success-message.active { display: block; opacity: 1; transform: translateY(0); } .success-icon { width: 80px; height: 80px; margin: 0 auto 20px; position: relative; } .success-icon svg { width: 100%; height: 100%; } .success-icon .checkmark { stroke-dasharray: 210; stroke-dashoffset: 210; stroke-width: 5; stroke: var(--secondary); stroke-linecap: round; animation: drawCheck 1s forwards; } .success-icon .circle { stroke-dasharray: 265; stroke-dashoffset: 265; stroke-width: 5; stroke: var(--secondary); fill: none; opacity: 0.3; animation: drawCircle 1s forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } @keyframes drawCircle { to { stroke-dashoffset: 0; } } .success-message h2 { font-family: 'Playfair Display', serif; font-size: 28px; margin-bottom: 15px; color: white; } .success-message p { margin-bottom: 30px; } .btn-new-inquiry { display: inline-block; padding: 12px 28px; background-color: transparent; border: 1px solid var(--secondary); color: var(--secondary); text-decoration: none; border-radius: 4px; transition: var(--transition); font-weight: 500; } .btn-new-inquiry:hover { background-color: var(--secondary); color: var(--dark); } /* Custom checkbox styles */ .checkbox-container { display: flex; align-items: flex-start; margin-top: 15px; position: relative; cursor: pointer; } .checkbox-container input { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-checkmark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.4); display: inline-block; margin-right: 12px; margin-top: 2px; position: relative; transition: var(--transition); } .checkbox-container input:checked + .checkbox-checkmark { border-color: var(--secondary); background-color: var(--secondary); } .checkbox-container input:checked + .checkbox-checkmark:after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--dark); border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-container span { color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 1.5; } /* Agent selection styles */ .agent-select { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; } .agent-option { flex-basis: calc(50% - 8px); padding: 15px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 12px; } .agent-option:hover { background-color: rgba(255, 255, 255, 0.1); } .agent-option.selected { border-color: var(--secondary); background-color: rgba(200, 169, 126, 0.1); } .agent-photo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2); transition: var(--transition); } .agent-option.selected .agent-photo { border-color: var(--secondary); } .agent-info { flex: 1; } .agent-name { font-size: 15px; font-weight: 500; color: white; margin-bottom: 2px; } .agent-specialty { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .required-mark { color: var(--secondary); } /* Media Queries */ @media (max-width: 600px) { .form-container { padding: 25px; } .branding { top: 20px; left: 25px; } h1 { font-size: 26px; } .agent-option { flex-basis: 100%; } .radio-group { flex-direction: column; gap: 10px; } .btn { padding: 10px 20px; font-size: 14px; } } @media (max-height: 700px) { .form-container { padding-top: 70px; justify-content: flex-start; } } /* Animation for form field focus */ .form-field label { transition: var(--transition); } .form-field input:focus + label, .form-field select:focus + label, .form-field textarea:focus + label { color: var(--secondary); } /* Custom floating label effect */ .floating-input { position: relative; } .floating-input input, .floating-input textarea { padding: 18px 15px 10px; } .floating-input label { position: absolute; left: 15px; top: 16px; font-size: 15px; color: rgba(255, 255, 255, 0.5); pointer-events: none; transition: all 0.2s ease; } .floating-input input:focus ~ label, .floating-input input:not(:placeholder-shown) ~ label, .floating-input textarea:focus ~ label, .floating-input textarea:not(:placeholder-shown) ~ label { top: 8px; left: 15px; font-size: 11px; opacity: 1; color: var(--secondary); } /* Hover states for buttons */ .btn { position: relative; z-index: 1; } /* Input validation styling */ .form-field.error input, .form-field.error select, .form-field.error textarea { border-color: #e53935; } .error-message { color: #e53935; font-size: 12px; margin-top: 5px; display: none; } .form-field.error .error-message { display: block; } /* Fancy background effect */ .bg-overlay { position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(26, 46, 68, 0) 0%, rgba(26, 46, 68, 0.8) 80%); z-index: 0; } /* Shimmering effect on form submit */ @keyframes shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } .btn-submit.shimmer { background-image: linear-gradient(90deg, var(--secondary) 0%, var(--secondary) 45%, #e0c9a6 50%, var(--secondary) 55%, var(--secondary) 100%); background-size: 200% 100%; animation: shimmer 2s infinite; background-repeat: no-repeat; } </style> </head> <body> <div class="container"> <div class="background-container"> <div class="background-slider"> <div class="bg-slide"></div> <div class="bg-slide"></div> <div class="bg-slide"></div> </div> <div class="bg-overlay"></div> </div> <div class="branding"> <h2>Luxe<span>Estate</span></h2> </div> <div class="form-container"> <div class="form-steps"> <div class="step step-1 active"> <span class="step-title">Your Information</span> </div> <div class="step step-2"> <span class="step-title">Property Interest</span> </div> <div class="step step-3"> <span class="step-title">Requirements</span> </div> <div class="step step-4"> <span class="step-title">Finalize</span> </div> </div> <form id="real-estate-form"> <!-- Step 1: Personal Information --> <div class="form-section section-1 active"> <h1>Connect With Our Experts</h1> <p>Begin your journey to finding your dream property by sharing a few details with us.</p> <div class="form-field"> <label for="name">Full Name <span class="required-mark">*</span></label> <input type="text" id="name" name="name" required> <div class="error-message">Please enter your name</div> </div> <div class="form-field"> <label for="email">Email Address <span class="required-mark">*</span></label> <input type="email" id="email" name="email" required> <div class="error-message">Please enter a valid email address</div> </div> <div class="form-field"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone"> </div> <div class="form-field"> <label>I am a: <span class="required-mark">*</span></label> <div class="radio-group"> <label class="radio-option"> <input type="radio" name="client-type" value="buyer" checked> <span class="radio-checkmark"></span> <span>Buyer</span> </label> <label class="radio-option"> <input type="radio" name="client-type" value="seller"> <span class="radio-checkmark"></span> <span>Seller</span> </label> <label class="radio-option"> <input type="radio" name="client-type" value="investor"> <span class="radio-checkmark"></span> <span>Investor</span> </label> </div> </div> <div class="btn-container"> <div></div> <!-- Empty div for flex spacing --> <button type="button" class="btn btn-next" id="step1-next">Continue</button> </div> </div> <!-- Step 2: Property Interest --> <div class="form-section section-2"> <h1>Your Property Preferences</h1> <p>Help us understand what you're looking for in your next property.</p> <div class="form-field"> <label for="property-type">Property Type <span class="required-mark">*</span></label> <select id="property-type" name="property-type" required> <option value="" disabled selected>Select property type</option> <option value="residential">Residential Home</option> <option value="apartment">Apartment/Condo</option> <option value="townhouse">Townhouse</option> <option value="land">Vacant Land</option> <option value="commercial">Commercial Property</option> <option value="luxury">Luxury Estate</option> </select> <div class="error-message">Please select a property type</div> </div> <div class="form-field"> <label for="location">Preferred Location</label> <input type="text" id="location" name="location" placeholder="City, neighborhood, or area"> </div> <div class="form-field"> <label for="budget">Budget Range (USD) <span class="required-mark">*</span></label> <select id="budget" name="budget" required> <option value="" disabled selected>Select your budget range</option> <option value="under-300k">Under $300,000</option> <option value="300k-500k">$300,000 - $500,000</option> <option value="500k-750k">$500,000 - $750,000</option> <option value="750k-1m">$750,000 - $1,000,000</option> <option value="1m-2m">$1,000,000 - $2,000,000</option> <option value="2m-5m">$2,000,000 - $5,000,000</option> <option value="over-5m">Over $5,000,000</option> </select> <div class="error-message">Please select your budget range</div> </div> <div class="form-field"> <label for="timeframe">Timeframe</label> <select id="timeframe" name="timeframe"> <option value="" disabled selected>When are you looking to buy/sell?</option> <option value="immediately">Immediately</option> <option value="1-3-months">1-3 months</option> <option value="3-6-months">3-6 months</option> <option value="6-12-months">6-12 months</option> <option value="just-browsing">Just browsing</option> </select> </div> <div class="btn-container"> <button type="button" class="btn btn-prev" id="step2-prev">Back</button> <button type="button" class="btn btn-next" id="step2-next">Continue</button> </div> </div> <!-- Step 3: Specific Requirements --> <div class="form-section section-3"> <h1>Property Specifications</h1> <p>Tell us about the features that matter most to you.</p> <div class="form-field"> <label for="bedrooms">Bedrooms</label> <select id="bedrooms" name="bedrooms"> <option value="" disabled selected>Number of bedrooms</option> <option value="studio">Studio</option> <option value="1">1 Bedroom</option> <option value="2">2 Bedrooms</option> <option value="3">3 Bedrooms</option> <option value="4">4 Bedrooms</option> <option value="5-plus">5+ Bedrooms</option> </select> </div> <div class="form-field"> <label for="bathrooms">Bathrooms</label> <select id="bathrooms" name="bathrooms"> <option value="" disabled selected>Number of bathrooms</option> <option value="1">1 Bathroom</option> <option value="1.5">1.5 Bathrooms</option> <option value="2">2 Bathrooms</option> <option value="2.5">2.5 Bathrooms</option> <option value="3">3 Bathrooms</option> <option value="3.5">3.5 Bathrooms</option> <option value="4-plus">4+ Bathrooms</option> </select> </div> <div class="form-field"> <label>Must-Have Features:</label> <div class="checkbox-container"> <input type="checkbox" id="feature-garden" name="features" value="garden"> <span class="checkbox-checkmark"></span> <span>Garden/Outdoor Space</span> </div> <div class="checkbox-container"> <input type="checkbox" id="feature-parking" name="features" value="parking"> <span class="checkbox-checkmark"></span> <span>Parking/Garage</span> </div> <div class="checkbox-container"> <input type="checkbox" id="feature-pool" name="features" value="pool"> <span class="checkbox-checkmark"></span> <span>Swimming Pool</span> </div> <div class="checkbox-container"> <input type="checkbox" id="feature-renovation" name="features" value="renovation"> <span class="checkbox-checkmark"></span> <span>Newly Renovated</span> </div> <div class="checkbox-container"> <input type="checkbox" id="feature-views" name="features" value="views"> <span class="checkbox-checkmark"></span> <span>Scenic Views</span> </div> </div> <div class="btn-container"> <button type="button" class="btn btn-prev" id="step3-prev">Back</button> <button type="button" class="btn btn-next" id="step3-next">Continue</button> </div> </div> <!-- Step 4: Select Agent and Additional Info --> <div class="form-section section-4"> <h1>Finalize Your Inquiry</h1> <p>Select an agent and provide any additional details to complete your inquiry.</p> <div class="form-field"> <label>Select a Luxury Property Specialist:</label> <div class="agent-select"> <div class="agent-option" data-agent="sophia"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophia Reynolds" class="agent-photo"> <div class="agent-info"> <div class="agent-name">Sophia Reynolds</div> <div class="agent-specialty">Luxury Homes</div> </div> </div> <div class="agent-option" data-agent="marcus"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Marcus Chen" class="agent-photo"> <div class="agent-info"> <div class="agent-name">Marcus Chen</div> <div class="agent-specialty">Commercial</div> </div> </div> <div class="agent-option" data-agent="olivia"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Olivia Bennett" class="agent-photo"> <div class="agent-info"> <div class="agent-name">Olivia Bennett</div> <div class="agent-specialty">Waterfront</div> </div> </div> <div class="agent-option" data-agent="james"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James Wilson" class="agent-photo"> <div class="agent-info"> <div class="agent-name">James Wilson</div> <div class="agent-specialty">Investment</div> </div> </div> </div> </div> <div class="form-field"> <label for="message">Additional Information</label> <textarea id="message" name="message" placeholder="Share any specific requirements or questions you have..."></textarea> </div> <div class="form-field"> <div class="checkbox-container"> <input type="checkbox" id="consent" name="consent" required> <span class="checkbox-checkmark"></span> <span>I agree to be contacted by LuxeEstate and the selected agent regarding my property inquiry. <span class="required-mark">*</span></span> </div> <div class="error-message">You must agree to be contacted</div> </div> <div class="btn-container"> <button type="button" class="btn btn-prev" id="step4-prev">Back</button> <button type="button" class="btn btn-submit" id="submit-form">Submit Inquiry</button> </div> </div> </form> <!-- Success Message --> <div class="success-message"> <div class="success-icon"> <svg viewBox="0 0 100 100"> <circle class="circle" cx="50" cy="50" r="45"></circle> <polyline class="checkmark" points="30 50 45 65 70 35"></polyline> </svg> </div> <h2>Thank You!</h2> <p>Your inquiry has been successfully submitted. One of our luxury property specialists will contact you within 24 hours to discuss your requirements in detail.</p> <button type="button" class="btn-new-inquiry" id="new-inquiry">Submit New Inquiry</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // DOM elements const form = document.getElementById('real-estate-form'); const steps = document.querySelectorAll('.step'); const formSections = document.querySelectorAll('.form-section'); const successMessage = document.querySelector('.success-message'); // Navigation buttons const step1Next = document.getElementById('step1-next'); const step2Prev = document.getElementById('step2-prev'); const step2Next = document.getElementById('step2-next'); const step3Prev = document.getElementById('step3-prev'); const step3Next = document.getElementById('step3-next'); const step4Prev = document.getElementById('step4-prev'); const submitBtn = document.getElementById('submit-form'); const newInquiryBtn = document.getElementById('new-inquiry'); // Current step tracking let currentStep = 1; // Background slider const backgroundSlider = document.querySelector('.background-slider'); let bgSlideIndex = 0; // Rotate background images function rotateBackground() { bgSlideIndex = (bgSlideIndex + 1) % 3; backgroundSlider.style.transform = `translateX(-${bgSlideIndex * 33.333}%)`; } // Start background rotation setInterval(rotateBackground, 8000); // Form validation function validateStep(stepNumber) { let isValid = true; if (stepNumber === 1) { const name = document.getElementById('name'); const email = document.getElementById('email'); // Name validation if (!name.value.trim()) { markAsError(name); isValid = false; } else { clearError(name); } // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email.value.trim() || !emailRegex.test(email.value)) { markAsError(email); isValid = false; } else { clearError(email); } } if (stepNumber === 2) { const propertyType = document.getElementById('property-type'); const budget = document.getElementById('budget'); if (propertyType.value === "") { markAsError(propertyType); isValid = false; } else { clearError(propertyType); } if (budget.value === "") { markAsError(budget); isValid = false; } else { clearError(budget); } } if (stepNumber === 4) { const consent = document.getElementById('consent'); if (!consent.checked) { markAsError(consent); isValid = false; } else { clearError(consent); } } return isValid; } // Mark field as error function markAsError(inputElement) { inputElement.closest('.form-field').classList.add('error'); } // Clear error marking function clearError(inputElement) { inputElement.closest('.form-field').classList.remove('error'); } // Go to specific step function goToStep(
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EarthCare Alliance Contact Form</title> <style> @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap'); :root { --leaf-green: #5c8d76; --moss-green: #7ea172; --soil-brown: #8e6c4e; --sand: #e6dbc9; --clay: #bb7b5b; --soft-black: #333; --cream: #f7f3eb; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Quicksand', sans-serif; background-color: var(--cream); color: var(--soft-black); display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; } .container { width: 100%; max-width: 650px; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(142, 108, 78, 0.1); overflow: hidden; position: relative; } .pattern-top { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(to right, var(--moss-green), var(--leaf-green), var(--clay), var(--soil-brown)); z-index: 2; } .form-header { text-align: center; padding: 30px 25px 10px; position: relative; } .form-header::after { content: ""; display: block; width: 130px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg width='130' height='6' viewBox='0 0 130 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3C2 3 31 -1 65 3C99 7 128 3 128 3' stroke='%238e6c4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; margin: 15px auto 0; } h1 { font-weight: 700; font-size: 1.8rem; margin-bottom: 8px; color: var(--leaf-green); } .handwritten { font-family: 'Caveat', cursive; color: var(--clay); font-size: 1.4rem; margin-bottom: 10px; } .form-content { padding: 10px 30px 30px; } .form-message { margin-bottom: 25px; font-size: 0.95rem; line-height: 1.5; color: var(--soft-black); } .input-group { margin-bottom: 22px; position: relative; } .input-icon { position: absolute; left: 12px; top: 38px; width: 20px; height: 20px; transition: transform 0.3s ease; } label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--soil-brown); transition: color 0.3s ease; } input, textarea, select { width: 100%; padding: 12px 12px 12px 40px; border: 2px solid var(--sand); border-radius: 8px; font-family: 'Quicksand', sans-serif; font-size: 0.95rem; transition: all 0.3s ease; background-color: white; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--moss-green); box-shadow: 0 0 0 3px rgba(126, 161, 114, 0.2); } textarea { min-height: 120px; resize: vertical; } input::placeholder, textarea::placeholder, select::placeholder { color: #bbb; font-style: italic; } .hint { display: block; margin-top: 6px; font-size: 0.8rem; color: #999; font-style: italic; } .checkbox-group { margin-bottom: 25px; } .checkbox-title { font-weight: 600; margin-bottom: 10px; font-size: 0.9rem; color: var(--soil-brown); } .checkbox-container { display: flex; flex-wrap: wrap; gap: 10px; } .checkbox-item { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 6px 12px; border-radius: 20px; background-color: var(--sand); transition: all 0.2s ease; } .checkbox-item:hover { background-color: #dfd3bc; } .checkbox-item.selected { background-color: var(--leaf-green); color: white; } .checkbox-item input { display: none; } .checkbox-item span { font-size: 0.9rem; padding-left: 5px; } .submit-btn { display: block; width: 100%; padding: 14px; background-color: var(--leaf-green); color: white; border: none; border-radius: 8px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .submit-btn::before { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.7s ease; } .submit-btn:hover { background-color: #4d7561; } .submit-btn:hover::before { left: 100%; } .response-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 100; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-width: 90%; text-align: center; } .response-message.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .response-icon { width: 60px; height: 60px; margin: 0 auto 20px; stroke: var(--leaf-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .response-title { font-size: 1.4rem; margin-bottom: 10px; color: var(--leaf-green); } .response-text { margin-bottom: 20px; line-height: 1.5; } .close-btn { display: inline-block; padding: 10px 20px; background-color: var(--sand); border: none; border-radius: 6px; font-family: 'Quicksand', sans-serif; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; } .close-btn:hover { background-color: #dfd3bc; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .overlay.show { opacity: 1; visibility: visible; } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s ease-in-out infinite; margin-left: 10px; vertical-align: middle; opacity: 0; } @keyframes spin { to { transform: rotate(360deg); } } .input-group:focus-within .input-icon { transform: translateY(-3px); } .input-group:focus-within label { color: var(--leaf-green); } @media (max-width: 500px) { .form-content { padding: 10px 20px 20px; } h1 { font-size: 1.6rem; } .handwritten { font-size: 1.2rem; } .checkbox-container { gap: 8px; } .input-group { margin-bottom: 18px; } } </style> </head> <body> <div class="container"> <div class="pattern-top"></div> <div class="form-header"> <h1>EarthCare Alliance</h1> <div class="handwritten">Nurturing our planet, one community at a time</div> </div> <div class="form-content"> <p class="form-message">Thank you for your interest in our work! Whether you want to volunteer, donate, or simply learn more about our local conservation projects, we'd love to hear from you.</p> <form id="contact-form"> <div class="input-group"> <label for="name">Your Name</label> <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="#8e6c4e" stroke-width="2" stroke-linecap="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <input type="text" id="name" name="name" placeholder="First & Last Name" required> </div> <div class="input-group"> <label for="email">Email Address</label> <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="#8e6c4e" stroke-width="2" stroke-linecap="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <input type="email" id="email" name="email" placeholder="[email protected]" required> </div> <div class="input-group"> <label for="phone">Phone Number (Optional)</label> <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="#8e6c4e" stroke-width="2" stroke-linecap="round"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path> </svg> <input type="tel" id="phone" name="phone" placeholder="(555) 123-4567"> </div> <div class="checkbox-group"> <div class="checkbox-title">I'm interested in:</div> <div class="checkbox-container"> <label class="checkbox-item"> <input type="checkbox" name="interest" value="volunteer"> <span>Volunteering</span> </label> <label class="checkbox-item"> <input type="checkbox" name="interest" value="donate"> <span>Donating</span> </label> <label class="checkbox-item"> <input type="checkbox" name="interest" value="partnership"> <span>Partnering</span> </label> <label class="checkbox-item"> <input type="checkbox" name="interest" value="events"> <span>Community Events</span> </label> <label class="checkbox-item"> <input type="checkbox" name="interest" value="newsletter"> <span>Newsletter</span> </label> </div> </div> <div class="input-group"> <label for="message">Your Message</label> <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="#8e6c4e" stroke-width="2" stroke-linecap="round" style="top: 15px;"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> </svg> <textarea id="message" name="message" placeholder="Tell us how you'd like to get involved or any questions you might have..." required></textarea> <span class="hint">Let us know your skills, availability, or specific projects you're interested in.</span> </div> <button type="submit" class="submit-btn"> Connect With Us <span class="loading" id="loading-spinner"></span> </button> </form> </div> </div> <div class="overlay" id="overlay"></div> <div class="response-message" id="response-message"> <svg class="response-icon" viewBox="0 0 24 24"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> <h2 class="response-title">Thank You!</h2> <p class="response-text">Your message has been received. We'll get back to you within 1-2 business days. In the meantime, check out our upcoming volunteer opportunities on our events page.</p> <button class="close-btn" id="close-btn">Close</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Checkbox selection styling const checkboxItems = document.querySelectorAll('.checkbox-item'); checkboxItems.forEach(item => { item.addEventListener('click', function() { const checkbox = this.querySelector('input[type="checkbox"]'); checkbox.checked = !checkbox.checked; this.classList.toggle('selected', checkbox.checked); }); }); // Form submission with animation const form = document.getElementById('contact-form'); const loadingSpinner = document.getElementById('loading-spinner'); const responseMessage = document.getElementById('response-message'); const overlay = document.getElementById('overlay'); const closeBtn = document.getElementById('close-btn'); form.addEventListener('submit', function(e) { e.preventDefault(); // Show loading spinner loadingSpinner.style.opacity = '1'; // Simulate form submission setTimeout(() => { loadingSpinner.style.opacity = '0'; overlay.classList.add('show'); responseMessage.classList.add('show'); // Reset form form.reset(); checkboxItems.forEach(item => { item.classList.remove('selected'); }); }, 1500); }); // Close response message closeBtn.addEventListener('click', function() { overlay.classList.remove('show'); responseMessage.classList.remove('show'); }); // Close on overlay click overlay.addEventListener('click', function() { overlay.classList.remove('show'); responseMessage.classList.remove('show'); }); // Add animation on input focus const inputGroups = document.querySelectorAll('.input-group'); inputGroups.forEach(group => { const input = group.querySelector('input, textarea'); const icon = group.querySelector('.input-icon'); const label = group.querySelector('label'); if (input && icon && label) { input.addEventListener('focus', () => { icon.style.color = '#5c8d76'; }); input.addEventListener('blur', () => { icon.style.color = ''; }); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enterprise B2B Contact Form</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #34495e; --accent-color: #3498db; --light-color: #ecf0f1; --success-color: #27ae60; --error-color: #e74c3c; --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); background-color: #f5f7fa; color: var(--primary-color); display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; line-height: 1.6; } .container { width: 100%; max-width: 680px; background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; position: relative; } .header { background: var(--primary-color); padding: 25px 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.04) 10px, rgba(255, 255, 255, 0.04) 20px ); z-index: 1; } .header-content { position: relative; z-index: 2; } .header h1 { color: white; font-size: 1.8rem; margin-bottom: 5px; font-weight: 500; } .header p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; max-width: 90%; } .form-container { padding: 30px; } .form-group { margin-bottom: 22px; position: relative; transition: all var(--transition-speed); } .form-label { display: block; margin-bottom: 8px; color: var(--secondary-color); font-weight: 500; font-size: 0.9rem; } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #dce1e8; border-radius: 4px; font-size: 0.95rem; color: var(--primary-color); transition: border-color var(--transition-speed), box-shadow var(--transition-speed); background-color: #f9fafc; } .form-control:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); background-color: white; } select.form-control { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='%232c3e50'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 35px; } textarea.form-control { min-height: 120px; resize: vertical; } .checkbox-group { display: flex; align-items: center; margin-bottom: 8px; } .checkbox-input { display: none; } .checkbox-custom { width: 20px; height: 20px; border: 1px solid #dce1e8; border-radius: 3px; margin-right: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; position: relative; background-color: #f9fafc; } .checkbox-input:checked + .checkbox-custom { background-color: var(--accent-color); border-color: var(--accent-color); } .checkbox-input:checked + .checkbox-custom::after { content: ''; position: absolute; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); top: 3px; } .checkbox-label { font-size: 0.9rem; color: var(--secondary-color); cursor: pointer; } .conditional-section { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease-in-out; margin-left: 15px; border-left: 2px solid rgba(52, 152, 219, 0.2); padding-left: 15px; } .conditional-active { max-height: 1000px; opacity: 1; margin-top: 15px; margin-bottom: 15px; } .btn { display: inline-block; background-color: var(--accent-color); color: white; border: none; padding: 12px 25px; border-radius: 4px; font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: all var(--transition-speed); text-align: center; } .btn:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .btn:active { transform: translateY(0); } .btn-secondary { background-color: #e5e9ed; color: var(--secondary-color); } .btn-secondary:hover { background-color: #d4d9de; box-shadow: 0 5px 15px rgba(44, 62, 80, 0.1); } .form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .required-field::after { content: '*'; color: var(--error-color); margin-left: 3px; } .form-footer { padding: 15px 30px; background-color: #f5f7fa; border-top: 1px solid #e5e9ed; font-size: 0.85rem; color: #7f8c8d; text-align: center; } .form-footer a { color: var(--accent-color); text-decoration: none; } .form-footer a:hover { text-decoration: underline; } .feedback-message { display: none; padding: 20px; border-radius: 4px; text-align: center; margin-bottom: 20px; animation: fadeIn 0.5s ease-in-out; } .success-message { background-color: rgba(39, 174, 96, 0.1); color: var(--success-color); border: 1px solid rgba(39, 174, 96, 0.2); } .error-message { background-color: rgba(231, 76, 60, 0.1); color: var(--error-color); border: 1px solid rgba(231, 76, 60, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .field-indicator { position: absolute; bottom: -18px; left: 0; font-size: 0.75rem; color: var(--error-color); opacity: 0; transition: opacity 0.3s; } .field-indicator.visible { opacity: 1; } .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .progress-bar { position: relative; height: 5px; background-color: #e5e9ed; margin-top: 30px; margin-bottom: 15px; border-radius: 5px; overflow: hidden; } .progress-indicator { position: absolute; height: 100%; width: 0%; background: linear-gradient(to right, #3498db, #2980b9); transition: width 0.5s ease; } .form-progress-text { display: flex; justify-content: space-between; font-size: 0.8rem; color: #7f8c8d; margin-bottom: 25px; } @media (max-width: 600px) { .header { padding: 20px; } .header h1 { font-size: 1.5rem; } .form-container { padding: 20px; } .form-actions { flex-direction: column; gap: 15px; } .btn { width: 100%; } } /* Complex hover effect for buttons */ .btn { position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transform: translateX(-100%) skewX(-15deg); transition: transform 0.4s ease; } .btn:hover::after { transform: translateX(100%) skewX(-15deg); } /* Focus indicator for better accessibility */ .form-control:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25); } .focused-label { color: var(--accent-color); transform: translateY(-3px); transition: all 0.3s ease; } /* Tooltip styling */ .tooltip { position: relative; display: inline-block; margin-left: 5px; } .tooltip-icon { width: 16px; height: 16px; border-radius: 50%; background-color: rgba(52, 152, 219, 0.15); color: var(--accent-color); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; } .tooltip-content { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 220px; background-color: var(--secondary-color); color: white; padding: 10px; border-radius: 4px; font-size: 0.75rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; line-height: 1.4; margin-bottom: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--secondary-color) transparent transparent transparent; } .tooltip:hover .tooltip-content { opacity: 1; visibility: visible; } </style> </head> <body> <div class="container"> <div class="header"> <div class="header-content"> <h1>Enterprise Solutions Inquiry</h1> <p>Connect with our B2B specialists to discuss tailored enterprise solutions for your organization</p> </div> </div> <div class="form-container"> <div id="feedbackMessage" class="feedback-message"></div> <div class="progress-bar"> <div id="progressIndicator" class="progress-indicator"></div> </div> <div class="form-progress-text"> <span>Basic Information</span> <span id="progressPercentage">0% Complete</span> </div> <form id="enterpriseForm"> <div class="form-group"> <label for="fullName" class="form-label required-field">Full Name</label> <input type="text" id="fullName" class="form-control" required> <div class="field-indicator" id="fullNameIndicator">Please enter your full name</div> </div> <div class="form-group"> <label for="companyName" class="form-label required-field">Company Name</label> <input type="text" id="companyName" class="form-control" required> <div class="field-indicator" id="companyNameIndicator">Please enter your company name</div> </div> <div class="form-group"> <label for="businessEmail" class="form-label required-field">Business Email</label> <input type="email" id="businessEmail" class="form-control" required> <div class="field-indicator" id="businessEmailIndicator">Please enter a valid business email</div> </div> <div class="form-group"> <label for="phoneNumber" class="form-label">Phone Number</label> <input type="tel" id="phoneNumber" class="form-control"> </div> <div class="form-group"> <label for="companySize" class="form-label">Company Size</label> <select id="companySize" class="form-control"> <option value="" selected disabled>Select company size</option> <option value="1-50">1-50 employees</option> <option value="51-200">51-200 employees</option> <option value="201-500">201-500 employees</option> <option value="501-1000">501-1000 employees</option> <option value="1001+">1001+ employees</option> </select> </div> <div class="form-group"> <label for="inquiryType" class="form-label required-field">Inquiry Type</label> <select id="inquiryType" class="form-control" required> <option value="" selected disabled>Select inquiry type</option> <option value="product-demo">Product Demo Request</option> <option value="pricing">Pricing Information</option> <option value="technical">Technical Consultation</option> <option value="partnership">Partnership Opportunity</option> <option value="other">Other</option> </select> <div class="field-indicator" id="inquiryTypeIndicator">Please select an inquiry type</div> </div> <!-- Conditional Field for Product Demo --> <div id="productDemoSection" class="conditional-section"> <div class="form-group"> <label for="preferredDemo" class="form-label">Preferred Demo Format</label> <select id="preferredDemo" class="form-control"> <option value="live-walkthrough">Live Walkthrough</option> <option value="recorded-demo">Recorded Demo with Q&A Follow-up</option> <option value="in-person">In-Person Presentation</option> </select> </div> <div class="form-group"> <label for="specificProducts" class="form-label">Products of Interest</label> <div class="checkbox-group"> <input type="checkbox" id="enterpriseSuite" class="checkbox-input"> <span class="checkbox-custom"></span> <label for="enterpriseSuite" class="checkbox-label">Enterprise Suite</label> </div> <div class="checkbox-group"> <input type="checkbox" id="dataAnalytics" class="checkbox-input"> <span class="checkbox-custom"></span> <label for="dataAnalytics" class="checkbox-label">Data Analytics Platform</label> </div> <div class="checkbox-group"> <input type="checkbox" id="securitySolution" class="checkbox-input"> <span class="checkbox-custom"></span> <label for="securitySolution" class="checkbox-label">Security Solutions</label> </div> <div class="checkbox-group"> <input type="checkbox" id="cloudServices" class="checkbox-input"> <span class="checkbox-custom"></span> <label for="cloudServices" class="checkbox-label">Cloud Services</label> </div> </div> </div> <!-- Conditional Field for Pricing --> <div id="pricingSection" class="conditional-section"> <div class="form-group"> <label for="budgetRange" class="form-label">Budget Range</label> <select id="budgetRange" class="form-control"> <option value="" selected disabled>Select budget range</option> <option value="under-10k">Under $10,000</option> <option value="10k-50k">$10,000 - $50,000</option> <option value="50k-100k">$50,000 - $100,000</option> <option value="100k-500k">$100,000 - $500,000</option> <option value="500k+">$500,000+</option> </select> </div> <div class="form-group"> <label for="timeframe" class="form-label">Implementation Timeframe</label> <select id="timeframe" class="form-control"> <option value="immediate">Immediate (0-3 months)</option> <option value="short-term">Short-term (3-6 months)</option> <option value="medium-term">Medium-term (6-12 months)</option> <option value="long-term">Long-term planning (12+ months)</option> </select> </div> </div> <!-- Conditional Field for Technical Consultation --> <div id="technicalSection" class="conditional-section"> <div class="form-group"> <label for="currentSystems" class="form-label">Current Systems</label> <input type="text" id="currentSystems" class="form-control" placeholder="What systems are you currently using?"> </div> <div class="form-group"> <label for="integrationNeeds" class="form-label">Integration Requirements</label> <textarea id="integrationNeeds" class="form-control" placeholder="Describe your integration needs and technical environment"></textarea> </div> </div> <!-- Conditional Field for Partnership --> <div id="partnershipSection" class="conditional-section"> <div class="form-group"> <label for="partnershipType" class="form-label">Partnership Type</label> <select id="partnershipType" class="form-control"> <option value="reseller">Reseller Partnership</option> <option value="technology">Technology Integration</option> <option value="strategic">Strategic Alliance</option> <option value="channel">Channel Partnership</option> </select> </div> <div class="form-group"> <label for="partnershipGoals" class="form-label">Partnership Goals</label> <textarea id="partnershipGoals" class="form-control" placeholder="What are your primary objectives for this partnership?"></textarea> </div> </div> <!-- Conditional Field for Other --> <div id="otherSection" class="conditional-section"> <div class="form-group"> <label for="inquiryDetails" class="form-label">Inquiry Details</label> <textarea id="inquiryDetails" class="form-control" placeholder="Please provide details about your inquiry"></textarea> </div> </div> <div class="form-group"> <label for="message" class="form-label">Additional Information <span class="tooltip"> <span class="tooltip-icon">i</span> <span class="tooltip-content">Share any specific requirements, challenges, or questions that will help us prepare for our conversation.</span> </span> </label> <textarea id="message" class="form-control" rows="4" placeholder="Share any additional information that will help us understand your needs"></textarea> </div> <div class="form-group"> <div class="checkbox-group"> <input type="checkbox" id="privacyConsent" class="checkbox-input" required> <span class="checkbox-custom"></span> <label for="privacyConsent" class="checkbox-label">I consent to the processing of my data as per the <a href="#" onclick="return false;">Privacy Policy</a></label> </div> <div class="field-indicator" id="privacyConsentIndicator">Please accept the privacy policy</div> </div> <div class="form-actions"> <button type="button" id="resetBtn" class="btn btn-secondary">Clear Form</button> <button type="submit" id="submitBtn" class="btn">Submit Inquiry</button> </div> </form> </div> <div class="form-footer"> <p>Your information is secured with enterprise-grade encryption. <a href="#" onclick="return false;">Terms of Service</a> | <a href="#" onclick="return false;">Privacy Policy</a></p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('enterpriseForm'); const inquiryType = document.getElementById('inquiryType'); const productDemoSection = document.getElementById('productDemoSection'); const pricingSection = document.getElementById('pricingSection'); const technicalSection = document.getElementById('technicalSection'); const partnershipSection = document.getElementById('partnershipSection'); const otherSection = document.getElementById('otherSection'); const feedbackMessage = document.getElementById('feedbackMessage'); const progressIndicator = document.getElementById('progressIndicator'); const progressPercentage = document.getElementById('progressPercentage'); const resetBtn = document.getElementById('resetBtn'); const submitBtn = document.getElementById('submitBtn'); // Add focus events to form inputs for better UX const formControls = document.querySelectorAll('.form-control'); formControls.forEach(control => { control.addEventListener('focus', function() { const label = this.previousElementSibling; if (label && label.classList.contains('form-label')) { label.classList.add('focused-label'); } }); control.addEventListener('blur', function() { const label = this.previousElementSibling; if (label && label.classList.contains('form-label')) { label.classList.remove('focused-label'); } }); // Track progress as user fills the form control.addEventListener('input', updateProgress); control.addEventListener('change', updateProgress); }); // Hide all conditional sections initially function hideAllConditionalSections() { productDemoSection.classList.remove('conditional-active'); pricingSection.classList.remove('conditional-active'); technicalSection.classList.remove('conditional-active'); partnershipSection.classList.remove('conditional-active'); otherSection.classList.remove('conditional-active'); } // Show conditional sections based on inquiry type inquiryType.addEventListener('change', function() { hideAllConditionalSections(); switch(this.value) { case 'product-demo': productDemoSection.classList.add('conditional-active'); break; case 'pricing': pricingSection.classList.add('conditional-active'); break; case 'technical': technicalSection.classList.add('conditional-active'); break; case 'partnership': partnershipSection.classList.add('conditional-active'); break; case 'other': otherSection.classList.add('conditional-active'); break; } updateProgress(); }); // Custom checkbox styling and interaction const checkboxes = document.querySelectorAll('.checkbox-input'); checkboxes.forEach(checkbox => { checkbox.nextElementSibling.addEventListener('click', function() { checkbox.checked = !checkbox.checked; updateProgress(); }); }); // Form validation function validateForm() { let isValid = true; const requiredFields = form.querySelectorAll('[required]'); requiredFields.forEach(field => { const indicatorId = field.id + 'Indicator'; const indicator = document.getElementById(indicatorId); if (!field.value.trim()) { isValid = false; field.style.borderColor = 'var(--error-color)'; if (indicator) { indicator.classList.add('visible'); } } else { field.style.borderColor = ''; if (indicator) { indicator.classList.remove('visible'); } } // Email validation if (field.type === 'email' && field.value.trim()) { const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; if (!emailPattern.test(field.value)) { isValid = false; field.style.borderColor = 'var(--error-color)'; if (indicator) { indicator.textContent = 'Please enter a valid email address'; indicator.classList.add('visible'); } } } }); return isValid; } // Update progress bar function updateProgress() { const totalFields = formControls.length; let filledFields = 0; formControls.forEach(control => { if (control.value.trim() !== '' && !(control.tagName === 'SELECT' && control.value === '')) { filledFields++; } }); // Add progress for checked checkboxes checkboxes.forEach(checkbox => { if (checkbox.checked) { filledFields++; } }); // Calculate progress percentage, min 10% for better UX const percentage = Math.max(10, Math.floor((filledFields / totalFields) * 100)); progressIndicator.style.width = `${percentage}%`; progressPercentage.textContent = `${percentage}% Complete`; // Highlight progress with color changes if (percentage < 30) { progressIndicator.style.background = 'linear-gradient(to right, #e74c3c, #e67e22)'; } else if (percentage < 70) { progressIndicator.style.background = 'linear-gradient(to right, #f39c12, #3498db)'; } else { progressIndicator.style.background = 'linear-gradient(to right, #3498db, #27ae60)'; } } // Form submission handling form.addEventListener('submit', function(e) { e.preventDefault(); if (!validateForm()) { showFeedback('Please complete all required fields marked with *', 'error'); return; } // Simulating form submission submitBtn.disabled = true; submitBtn.textContent = 'Processing...'; submitBtn.classList.add('pulse'); setTimeout(() => { submitBtn.disabled = false; submitBtn.textContent = 'Submit Inquiry'; submitBtn.classList.remove('pulse'); showFeedback('Thank you for your inquiry. A B2B specialist will contact you within 1 business day.', 'success'); form.reset(); hideAllConditionalSections(); updateProgress(); }, 2000); }); // Reset form button resetBtn.addEventListener('click', function() { form.reset(); hideAllConditionalSections(); updateProgress(); // Clear validation styling formControls.forEach(control => { control.style.borderColor = ''; }); const indicators = document.querySelectorAll('.field-indicator'); indicators.forEach(indicator => { indicator.classList.remove('visible'); }); feedbackMessage.style.display = 'none'; }); // Show feedback message function showFeedback(message, type) { feedbackMessage.textContent = message; feedbackMessage.className = 'feedback-message'; feedbackMessage.classList.add(`${type}-message`); feedbackMessage.style.display = 'block'; // Scroll to top to show the message feedbackMessage.scrollIntoView({ behavior: 'smooth', block: 'start' }); if (type === 'success') { setTimeout(() => { feedbackMessage.style.display = 'none'; }, 6000); } } // Initialize progress updateProgress(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnBright - Education Contact Form</title> <style> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap'); :root { --primary: #4361ee; --secondary: #7209b7; --accent: #f72585; --success: #06d6a0; --warning: #ffd166; --light: #f8f9fa; --dark: #212529; --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Nunito', sans-serif; background-color: #f5f7ff; background-image: radial-gradient(circle at 20% 35%, rgba(255, 209, 102, 0.15) 0%, transparent 20%), radial-gradient(circle at 75% 15%, rgba(114, 9, 183, 0.1) 0%, transparent 20%), radial-gradient(circle at 40% 90%, rgba(6, 214, 160, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 75%, rgba(247, 37, 133, 0.1) 0%, transparent 20%); display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 1rem; overflow-x: hidden; } .contact-container { width: 100%; max-width: 600px; background: white; border-radius: var(--border-radius); padding: 2rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } .contact-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--success), var(--warning)); z-index: 1; } .contact-header { text-align: center; margin-bottom: 2rem; } .contact-header h1 { font-size: 1.8rem; color: var(--dark); margin-bottom: 0.5rem; position: relative; display: inline-block; } .contact-header h1::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; } .contact-header p { color: #6c757d; font-size: 1rem; margin-top: 1rem; } .form-icons { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; } .form-icon { position: absolute; opacity: 0.1; } .icon-book { top: 20%; left: 3%; transform: rotate(-15deg); font-size: 2rem; color: var(--primary); } .icon-pencil { top: 70%; right: 5%; transform: rotate(20deg); font-size: 1.8rem; color: var(--accent); } .icon-globe { top: 40%; right: 10%; font-size: 2.2rem; color: var(--success); } .form-group { margin-bottom: 1.5rem; position: relative; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--dark); transition: all 0.3s ease; display: flex; align-items: center; } .label-icon { margin-right: 0.5rem; color: var(--primary); transition: all 0.3s ease; } .form-control { width: 100%; padding: 1rem; border: 2px solid #e9ecef; border-radius: var(--border-radius); background: white; font-family: 'Nunito', sans-serif; font-size: 1rem; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .form-control::placeholder { color: #adb5bd; } textarea.form-control { resize: vertical; min-height: 120px; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; } .btn { display: inline-block; font-weight: 700; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; line-height: 1.5; border-radius: var(--border-radius); transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; } .btn-primary:hover { background: linear-gradient(90deg, var(--secondary), var(--primary)); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3); } .btn-primary:active { transform: translateY(0); } .btn-group { display: flex; justify-content: space-between; align-items: center; } .form-help { color: #6c757d; font-size: 0.85rem; margin-top: 0.5rem; } .form-row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; } .form-col { flex: 1; padding: 0 10px; } .success-message { display: none; text-align: center; padding: 2rem; color: var(--dark); animation: fadeIn 0.5s ease; } .success-icon { font-size: 4rem; color: var(--success); margin-bottom: 1.5rem; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } } .animated-element { animation: float 4s ease-in-out infinite; } .emoji-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--light); margin-bottom: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); animation: float 4s ease-in-out infinite; } .emoji-badge.primary { background: rgba(67, 97, 238, 0.1); } /* Input focus animation */ .form-group { position: relative; } .focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s ease; } .form-control:focus + .focus-border { width: 100%; } /* Responsive styles */ @media (max-width: 576px) { .contact-container { padding: 1.5rem; } .form-row { flex-direction: column; } .form-col + .form-col { margin-top: 1.5rem; } .contact-header h1 { font-size: 1.5rem; } } /* Checkbox styles */ .checkbox-group { margin-bottom: 1.5rem; } .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 0.95rem; color: #6c757d; } .checkbox-input { position: absolute; opacity: 0; } .checkbox-custom { width: 20px; height: 20px; border: 2px solid #e9ecef; border-radius: 4px; margin-right: 10px; position: relative; transition: all 0.3s ease; } .checkbox-input:checked + .checkbox-custom { background: var(--primary); border-color: var(--primary); } .checkbox-input:checked + .checkbox-custom::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-input:focus + .checkbox-custom { box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } /* Floating labels */ .form-group.floating { position: relative; } .form-group.floating .form-control { height: 60px; padding: 1.5rem 1rem 0.5rem; } .form-group.floating .form-label { position: absolute; top: 1rem; left: 1rem; pointer-events: none; transition: all 0.2s ease; } .form-group.floating .form-control:focus ~ .form-label, .form-group.floating .form-control:not(:placeholder-shown) ~ .form-label { top: 0.5rem; font-size: 0.75rem; color: var(--primary); } /* Animated submit button */ .btn-primary .btn-text { position: relative; z-index: 1; } .btn-primary .btn-wave { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease-out; } .btn-primary:hover .btn-wave { width: 300%; height: 300%; } /* Error styles */ .error-message { color: var(--accent); font-size: 0.85rem; margin-top: 0.5rem; display: none; } .form-control.is-invalid { border-color: var(--accent); } .form-control.is-invalid + .error-message { display: block; } /* Animation for form elements */ @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-group { animation: slideIn 0.4s ease-out forwards; opacity: 0; } .form-group:nth-child(1) { animation-delay: 0.1s; } .form-group:nth-child(2) { animation-delay: 0.2s; } .form-group:nth-child(3) { animation-delay: 0.3s; } .form-group:nth-child(4) { animation-delay: 0.4s; } .form-group:nth-child(5) { animation-delay: 0.5s; } .checkbox-group { animation-delay: 0.6s; animation: slideIn 0.4s ease-out 0.6s forwards; opacity: 0; } .btn-group { animation-delay: 0.7s; animation: slideIn 0.4s ease-out 0.7s forwards; opacity: 0; } </style> </head> <body> <div class="contact-container"> <div class="form-icons"> <div class="form-icon icon-book">📚</div> <div class="form-icon icon-pencil">✏️</div> <div class="form-icon icon-globe">🌍</div> </div> <div class="contact-header"> <div class="emoji-badge primary animated-element">🎓</div> <h1>Get in Touch with LearnBright</h1> <p>Have a question about our educational resources? We're here to help you discover the perfect learning tools!</p> </div> <form id="contact-form" class="contact-form"> <div class="form-row"> <div class="form-col"> <div class="form-group floating"> <input type="text" class="form-control" id="fullName" placeholder=" " required> <label for="fullName" class="form-label"> <span class="label-icon">👤</span> Full Name </label> <div class="error-message">Please enter your name</div> </div> </div> <div class="form-col"> <div class="form-group floating"> <input type="email" class="form-control" id="email" placeholder=" " required> <label for="email" class="form-label"> <span class="label-icon">✉️</span> Email Address </label> <div class="error-message">Please enter a valid email</div> </div> </div> </div> <div class="form-group"> <label for="userType" class="form-label"> <span class="label-icon">🧩</span> I am a... </label> <select class="form-control form-select" id="userType" required> <option value="" selected disabled>Select your role</option> <option value="student">Student</option> <option value="teacher">Teacher/Educator</option> <option value="parent">Parent/Guardian</option> <option value="schoolAdmin">School Administrator</option> <option value="other">Other</option> </select> <div class="form-help">This helps us tailor our response to your needs</div> </div> <div class="form-group"> <label for="subject" class="form-label"> <span class="label-icon">📝</span> Subject </label> <select class="form-control form-select" id="subject" required> <option value="" selected disabled>What can we help you with?</option> <option value="curriculum">Curriculum Resources</option> <option value="technology">Educational Technology</option> <option value="workshop">Workshops & Training</option> <option value="support">Technical Support</option> <option value="feedback">Feedback & Suggestions</option> <option value="other">Other Inquiry</option> </select> </div> <div class="form-group"> <label for="message" class="form-label"> <span class="label-icon">💬</span> Your Message </label> <textarea class="form-control" id="message" rows="5" placeholder="Tell us more about your educational needs or questions..." required></textarea> <div class="error-message">Please enter your message</div> </div> <div class="checkbox-group"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" id="newsletter"> <span class="checkbox-custom"></span> Subscribe to our educational resources newsletter with teaching tips, lesson plans and student activities </label> </div> <div class="btn-group"> <button type="submit" class="btn btn-primary" id="submit-btn"> <span class="btn-text">Send Message</span> <span class="btn-wave"></span> </button> <div class="form-help">We typically respond within 24 hours</div> </div> </form> <div class="success-message" id="success-message"> <div class="success-icon animated-element">✅</div> <h2>Message Sent Successfully!</h2> <p>Thank you for reaching out to LearnBright. Our education specialists will review your inquiry and get back to you shortly.</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('contact-form'); const successMessage = document.getElementById('success-message'); const inputs = document.querySelectorAll('.form-control'); // Focus effect for form controls inputs.forEach(input => { input.addEventListener('focus', function() { this.parentElement.classList.add('focused'); }); input.addEventListener('blur', function() { this.parentElement.classList.remove('focused'); validateField(this); }); }); // Form validation function validateField(field) { if (field.required && !field.value.trim()) { field.classList.add('is-invalid'); return false; } else if (field.type === 'email' && field.value) { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(field.value)) { field.classList.add('is-invalid'); return false; } } field.classList.remove('is-invalid'); return true; } // Form submission form.addEventListener('submit', function(e) { e.preventDefault(); let isValid = true; inputs.forEach(input => { if (!validateField(input)) { isValid = false; } }); if (isValid) { // Simulate form submission const submitBtn = document.getElementById('submit-btn'); submitBtn.disabled = true; submitBtn.innerHTML = '<span class="btn-text">Sending...</span>'; setTimeout(() => { form.style.display = 'none'; successMessage.style.display = 'block'; }, 1000); } }); // Button animation const button = document.querySelector('.btn-primary'); button.addEventListener('mouseenter', function() { const wave = this.querySelector('.btn-wave'); wave.style.width = '0'; wave.style.height = '0'; setTimeout(() => { wave.style.width = '300%'; wave.style.height = '300%'; }, 10); }); // Subject dropdown interaction const subjectSelect = document.getElementById('subject'); const messageField = document.getElementById('message'); subjectSelect.addEventListener('change', function() { let placeholders = { 'curriculum': "I'm looking for resources on [subject/grade level]. Specifically, I need help with...", 'technology': "I'm interested in integrating technology for [purpose]. Can you recommend tools for...", 'workshop': "I'd like information about workshops on [topic]. Our school/organization needs training in...", 'support': "I'm experiencing an issue with [product/service]. Here are the details of what's happening...", 'feedback': "I'd like to provide feedback about your [resource/service]. My experience has been...", 'other': "Tell us more about your educational needs or questions..." }; if (this.value in placeholders) { messageField.placeholder = placeholders[this.value]; } }); // User type interaction const userTypeSelect = document.getElementById('userType'); userTypeSelect.addEventListener('change', function() { const subjectOptions = document.getElementById('subject').options; // Reset options first while(subjectOptions.length > 1) { subjectOptions.remove(1); } // Customize options based on user type if (this.value === 'student') { addOption(subjectOptions, 'resources', 'Learning Resources'); addOption(subjectOptions, 'homework', 'Homework Help'); addOption(subjectOptions, 'technology', 'Learning Technology'); addOption(subjectOptions, 'feedback', 'Feedback'); addOption(subjectOptions, 'other', 'Other'); } else if (this.value === 'teacher') { addOption(subjectOptions, 'curriculum', 'Curriculum Resources'); addOption(subjectOptions, 'professional', 'Professional Development'); addOption(subjectOptions, 'technology', 'Classroom Technology'); addOption(subjectOptions, 'workshop', 'Workshops & Training'); addOption(subjectOptions, 'support', 'Technical Support'); addOption(subjectOptions, 'feedback', 'Feedback & Suggestions'); addOption(subjectOptions, 'other', 'Other Inquiry'); } else if (this.value === 'parent') { addOption(subjectOptions, 'resources', 'At-Home Learning Resources'); addOption(subjectOptions, 'support', 'Supporting My Child'); addOption(subjectOptions, 'technology', 'Learning Technology'); addOption(subjectOptions, 'feedback', 'Feedback'); addOption(subjectOptions, 'other', 'Other'); } else if (this.value === 'schoolAdmin') { addOption(subjectOptions, 'curriculum', 'School-wide Curriculum'); addOption(subjectOptions, 'licensing', 'Licensing & Pricing'); addOption(subjectOptions, 'technology', 'Educational Technology'); addOption(subjectOptions, 'workshop', 'Staff Training'); addOption(subjectOptions, 'support', 'Technical Support'); addOption(subjectOptions, 'other', 'Other Inquiry'); } else { addOption(subjectOptions, 'curriculum', 'Curriculum Resources'); addOption(subjectOptions, 'technology', 'Educational Technology'); addOption(subjectOptions, 'workshop', 'Workshops & Training'); addOption(subjectOptions, 'support', 'Technical Support'); addOption(subjectOptions, 'feedback', 'Feedback & Suggestions'); addOption(subjectOptions, 'other', 'Other Inquiry'); } }); function addOption(selectElement, value, text) { const option = document.createElement('option'); option.value = value; option.textContent = text; selectElement.add(option); } // Apply animation to select elements const selects = document.querySelectorAll('select'); selects.forEach(select => { select.addEventListener('change', function() { if (this.value) { this.style.color = '#212529'; } else { this.style.color = '#adb5bd'; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Financial Services Contact Form</title> <style> :root { --primary: #2C3E50; --primary-light: #34495E; --secondary: #1ABC9C; --secondary-light: #48c9af; --accent: #E74C3C; --light: #ECF0F1; --dark: #212B36; --gray: #7F8C8D; --white: #FFFFFF; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-y: auto; max-height: 700px; } .container { width: 100%; max-width: 650px; background-color: var(--white); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; position: relative; } .header { background-color: var(--primary); color: var(--white); padding: 25px 30px; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: -10px; right: -10px; width: 120px; height: 120px; background-color: var(--primary-light); border-radius: 50%; z-index: 1; opacity: 0.6; } .header::after { content: ''; position: absolute; bottom: -20px; left: 30%; width: 80px; height: 80px; background-color: var(--secondary); border-radius: 50%; z-index: 1; opacity: 0.4; } .header h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; position: relative; z-index: 2; } .header p { font-size: 16px; opacity: 0.9; line-height: 1.5; position: relative; z-index: 2; } .form-container { padding: 30px; position: relative; } .progress-bar { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; } .progress-bar::before { content: ''; position: absolute; top: 15px; left: 0; height: 3px; width: 100%; background-color: #eaeaea; z-index: 1; } .progress-bar .progress-fill { position: absolute; top: 15px; left: 0; height: 3px; width: 0%; background-color: var(--secondary); transition: width 0.6s ease; z-index: 2; } .step { width: 34px; height: 34px; border-radius: 50%; background-color: #eaeaea; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--gray); position: relative; z-index: 3; transition: all 0.3s ease; cursor: pointer; } .step.active { background-color: var(--secondary); color: var(--white); box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.2); } .step.completed { background-color: var(--secondary); color: var(--white); } .step.completed::after { content: '✓'; position: absolute; } .step-label { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--gray); white-space: nowrap; font-weight: 500; } .step.active .step-label { color: var(--primary); font-weight: 600; } .form-step { display: none; animation: fadeIn 0.5s; } .form-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .form-group { margin-bottom: 24px; position: relative; } .form-group label { display: block; margin-bottom: 8px; color: var(--dark); font-weight: 500; font-size: 15px; } .input-group { position: relative; } .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); } .form-control { width: 100%; padding: 15px 15px 15px 45px; border: 2px solid #eaeaea; border-radius: 8px; font-size: 15px; transition: all 0.3s; background-color: #f9f9f9; color: var(--dark); } .form-control:focus { outline: none; border-color: var(--secondary); background-color: var(--white); box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1); } .form-control.error { border-color: var(--accent); background-color: rgba(231, 76, 60, 0.05); } .help-text { font-size: 12px; margin-top: 6px; color: var(--gray); } .error-message { display: none; color: var(--accent); font-size: 13px; margin-top: 6px; font-weight: 500; } .form-select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8C8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 15px center; background-size: 15px; } .checkbox-group { display: flex; align-items: flex-start; margin-bottom: 15px; } .checkbox-group input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox-group label { position: relative; padding-left: 30px; cursor: pointer; font-size: 15px; user-select: none; margin: 0; color: var(--dark); line-height: 1.5; } .checkbox-group .checkmark { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #f9f9f9; border: 2px solid #eaeaea; border-radius: 4px; transition: all 0.2s; } .checkbox-group:hover input ~ .checkmark { background-color: #f0f0f0; } .checkbox-group input:checked ~ .checkmark { background-color: var(--secondary); border-color: var(--secondary); } .checkbox-group .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-group input:checked ~ .checkmark:after { display: block; } .btn-group { display: flex; justify-content: space-between; margin-top: 30px; gap: 15px; } .btn { padding: 14px 25px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background-color: var(--secondary); color: var(--white); flex: 1; } .btn-primary:hover { background-color: var(--secondary-light); box-shadow: 0 4px 10px rgba(26, 188, 156, 0.2); transform: translateY(-2px); } .btn-outline { background-color: transparent; color: var(--primary); border: 2px solid #eaeaea; padding: 12px 25px; } .btn-outline:hover { border-color: var(--primary-light); background-color: rgba(44, 62, 80, 0.05); } .success-message { text-align: center; padding: 40px 0; display: none; } .success-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: rgba(26, 188, 156, 0.1); border-radius: 50%; margin: 0 auto 20px; } .success-icon svg { width: 40px; height: 40px; color: var(--secondary); } .success-message h2 { color: var(--primary); margin-bottom: 15px; } .success-message p { color: var(--gray); margin-bottom: 25px; line-height: 1.6; } .tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: pointer; } .tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background-color: #eaeaea; color: var(--gray); border-radius: 50%; font-size: 12px; font-weight: bold; } .tooltip-text { visibility: hidden; width: 200px; background-color: var(--dark); color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 12px; line-height: 1.4; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Media Queries */ @media (max-width: 600px) { .header { padding: 20px; } .header h1 { font-size: 24px; } .form-container { padding: 20px; } .step-label { display: none; } .btn-group { flex-direction: column; } .btn { width: 100%; } } /* Animation for the validation icon */ @keyframes validPulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } } .validation-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.3s; } .validation-icon.valid { color: var(--secondary); opacity: 1; animation: validPulse 1s ease-in-out; } .validation-icon.invalid { color: var(--accent); opacity: 1; } /* Loading spinner */ .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Slide & fade out animation */ @keyframes slideOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-20px); opacity: 0; } } /* Slide & fade in animation */ @keyframes slideIn { 0% { transform: translateX(20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* Privacy policy modal */ .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s ease; } .modal.active { display: flex; align-items: center; justify-content: center; opacity: 1; } .modal-content { background-color: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .modal.active .modal-content { transform: scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eaeaea; } .modal-title { font-size: 22px; color: var(--primary); font-weight: 600; } .modal-close { cursor: pointer; background: none; border: none; font-size: 24px; color: var(--gray); } .modal-body { font-size: 15px; line-height: 1.6; color: var(--dark); } .modal-body h3 { font-size: 18px; margin: 20px 0 10px; color: var(--primary); } .modal-body p { margin-bottom: 15px; } .modal-body ul { margin: 15px 0; padding-left: 20px; } .modal-body li { margin-bottom: 8px; } .service-icon { width: 60px; height: 60px; background-color: rgba(26, 188, 156, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; transition: all 0.3s ease; } .service-option { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 2px solid #eaeaea; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; background-color: #f9f9f9; flex: 1; min-width: 120px; text-align: center; } .service-option:hover { border-color: var(--secondary-light); background-color: rgba(26, 188, 156, 0.05); transform: translateY(-3px); } .service-option.selected { border-color: var(--secondary); background-color: rgba(26, 188, 156, 0.1); } .service-option.selected .service-icon { background-color: var(--secondary); color: white; } .service-option-title { font-weight: 600; color: var(--primary); margin-bottom: 5px; font-size: 15px; } .service-option-desc { font-size: 12px; color: var(--gray); line-height: 1.4; } .services-grid { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-top: 15px; } @media (max-width: 500px) { .services-grid { flex-direction: column; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Wealth Management Inquiry</h1> <p>Tell us about your financial goals and a specialist will contact you within 24 hours</p> </div> <div class="form-container"> <div class="animated-bg"></div> <div class="progress-bar"> <div class="progress-fill"></div> <div class="step active" data-step="1"> 1 <div class="step-label">Personal Info</div> </div> <div class="step" data-step="2"> 2 <div class="step-label">Financial Status</div> </div> <div class="step" data-step="3"> 3 <div class="step-label">Service Selection</div> </div> <div class="step" data-step="4"> 4 <div class="step-label">Confirmation</div> </div> </div> <form id="financial-form" novalidate> <!-- Step 1: Personal Information --> <div class="form-step active" data-step="1"> <div class="form-group"> <label for="fullname">Full Name</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="text" id="fullname" name="fullname" class="form-control" placeholder="e.g. John Smith" required data-validate="name"> <div class="validation-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="error-message" id="fullname-error">Please enter your full name</div> </div> <div class="form-group"> <label for="email">Email Address</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="email" id="email" name="email" class="form-control" placeholder="[email protected]" required data-validate="email"> <div class="validation-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="error-message" id="email-error">Please enter a valid email address</div> </div> <div class="form-group"> <label for="phone">Phone Number</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22 16.92V19.92C22 20.4704 21.7893 20.9978 21.4142 21.3728C21.0391 21.7479 20.5117 21.9586 19.96 21.96C16.5356 21.7303 13.2207 20.5354 10.38 18.51C7.78144 16.6911 5.65191 14.5616 3.83 11.96C1.7991 9.11053 0.604193 5.78575 0.38 2.35C0.36134 1.80005 0.570055 1.27301 0.942678 0.895516C1.3153 0.518023 1.83996 0.305124 2.39 0.305H5.39C6.35761 0.292121 7.18878 0.985872 7.39 1.93C7.5 2.57 7.68 3.19 7.93 3.79C8.20651 4.46156 8.0465 5.22897 7.56 5.74L6.17 7.13C7.85748 9.85368 10.1463 12.1425 12.87 13.83L14.26 12.44C14.771 11.9535 15.5384 11.7935 16.21 12.07C16.81 12.32 17.43 12.5 18.07 12.61C19.0304 12.8138 19.7206 13.6644 19.7 14.65L19.7 16.92H22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <input type="tel" id="phone" name="phone" class="form-control" placeholder="e.g. (555) 123-4567" required data-validate="phone"> <div class="validation-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="error-message" id="phone-error">Please enter a valid phone number</div> <div class="help-text">We'll only use this for follow-up regarding your inquiry</div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary next-step">Continue <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg></button> </div> </div> <!-- Step 2: Financial Status --> <div class="form-step" data-step="2"> <div class="form-group"> <label for="investment-horizon">Investment Horizon</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.05001 11C3.27151 8.19836 4.48061 5.58053 6.44215 3.6557C8.40368 1.73086 10.9938 0.669626 13.7061 0.635078C16.4185 0.60053 19.0337 1.59578 21.0429 3.46686C23.0521 5.33795 24.3223 7.92201 24.5981 10.717C24.8739 13.512 24.1349 16.3144 22.5089 18.6199C20.8829 20.9254 18.4753 22.5705 15.7303 23.2321C12.9853 23.8938 10.0943 23.5233 7.61781 22.1907C5.14126 20.8582 3.2372 18.6597 2.22001 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <select id="investment-horizon" name="investment-horizon" class="form-control form-select" required> <option value="">Select an option</option> <option value="short-term">Short-term (< 3 years)</option> <option value="medium-term">Medium-term (3-7 years)</option> <option value="long-term">Long-term (> 7 years)</option> <option value="retirement">Retirement Planning</option> </select> </div> <div class="error-message" id="investment-horizon-error">Please select an investment horizon</div> </div> <div class="form-group"> <label for="investment-amount">Approximate Investment Amount</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1V23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <select id="investment-amount" name="investment-amount" class="form-control form-select" required> <option value="">Select an option</option> <option value="under-50k">Under $50,000</option> <option value="50k-100k">$50,000 - $100,000</option> <option value="100k-250k">$100,000 - $250,000</option> <option value="250k-500k">$250,000 - $500,000</option> <option value="500k-1m">$500,000 - $1 million</option> <option value="over-1m">Over $1 million</option> </select> </div> <div class="error-message" id="investment-amount-error">Please select an investment amount</div> </div> <div class="form-group"> <label for="risk-tolerance">Risk Tolerance</label> <div class="input-group"> <div class="input-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.29 3.86L1.82 18C1.64537 18.3024 1.55296 18.6453 1.55199 18.9945C1.55101 19.3437 1.64149 19.6871 1.81442 19.9905C1.98736 20.2939 2.23675 20.5467 2.53773 20.7239C2.83871 20.901 3.18058 20.9962 3.53 21H20.47C20.8194 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5467 22.0126 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2807 3.32312 12.9812 3.15448C12.6817 2.98585 12.3437 2.89726 12 2.89726C11.6563 2.89726 11.3183 2.98585 11.0188 3.15448C10.7193 3.32312 10.4683 3.56611 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <select id="risk-tolerance" name="risk-tolerance" class="form-control form-select" required> <option value="">Select an option</option> <option value="conservative">Conservative - Preservation of capital is primary goal</option> <option value="moderate">Moderate - Balance between growth and capital preservation</option> <option value="aggressive">Aggressive - Seeking maximum growth, can tolerate volatility</option> </select> </div> <div class="error-message" id="risk-tolerance-error">Please select your risk tolerance</div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline prev-step"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Freelance Portfolio Contact Form</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #3d405b; --secondary: #e07a5f; --accent: #81b29a; --light: #f4f1de; --dark: #252422; } body { font-family: 'Montserrat', sans-serif; background-color: var(--light); color: var(--dark); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .background-elements { position: absolute; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .circle { position: absolute; border-radius: 50%; opacity: 0.15; animation: float 15s infinite ease-in-out; } .circle:nth-child(1) { width: 150px; height: 150px; background-color: var(--secondary); top: -30px; left: 10%; animation-delay: 0s; animation-duration: 25s; } .circle:nth-child(2) { width: 80px; height: 80px; background-color: var(--accent); bottom: 10%; right: 15%; animation-delay: 5s; animation-duration: 18s; } .circle:nth-child(3) { width: 200px; height: 200px; background-color: var(--primary); bottom: -50px; left: 20%; animation-delay: 2s; animation-duration: 20s; } .squiggle { position: absolute; width: 100px; height: 20px; opacity: 0.2; } .squiggle:nth-child(4) { top: 25%; right: 10%; transform: rotate(45deg); } .squiggle:nth-child(5) { bottom: 30%; left: 5%; transform: rotate(-20deg); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(10deg); } } .container { width: 90%; max-width: 600px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 20px 50px rgba(61, 64, 91, 0.15); padding: 40px; position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.5); } .hand-drawn-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .hand-drawn-border:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid transparent; border-radius: 20px; } h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; position: relative; z-index: 1; } h1::after { content: ''; position: absolute; width: 80px; height: 8px; background: var(--secondary); bottom: -5px; left: 0; border-radius: 4px; mask-image: url("data:image/svg+xml,%3Csvg width='100' height='8' viewBox='0 0 100 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5C20 1.5 30 6.5 50 3.5C70 0.5 80 7.5 99 4.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A"); mask-size: cover; } p.intro { font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; color: var(--dark); } .form-group { margin-bottom: 1.5rem; position: relative; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--primary); position: relative; } label::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--accent); bottom: -2px; left: 0; } input, textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--light); border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; color: var(--dark); background-color: white; transition: all 0.3s ease; position: relative; z-index: 1; } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 5px 15px rgba(129, 178, 154, 0.2); transform: translateY(-2px); } textarea { min-height: 120px; resize: vertical; } .input-illustration { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; opacity: 0.5; transition: all 0.3s ease; z-index: 0; } .form-group:hover .input-illustration, input:focus ~ .input-illustration, textarea:focus ~ .input-illustration { opacity: 1; transform: translateY(-50%) scale(1.1); } button { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; padding: 12px 30px; background-color: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } button:hover { background-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(61, 64, 91, 0.2); } button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); } button:hover::before { animation: shine 1.5s infinite; } @keyframes shine { 100% { transform: translateX(100%); } } .success-message { display: none; text-align: center; padding: 20px; } .success-message h2 { color: var(--accent); margin-bottom: 10px; } .success-message p { margin-bottom: 20px; } .back-btn { background-color: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; } .form-doodle { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.1; } .doodle { position: absolute; stroke: var(--primary); fill: none; stroke-width: 1.5px; } .doodle-1 { top: 20px; right: 20px; width: 60px; } .doodle-2 { bottom: 20px; left: 20px; width: 80px; } .cursor-trail { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--secondary); opacity: 0.6; pointer-events: none; mix-blend-mode: multiply; z-index: 1000; transition: transform 0.1s, opacity 0.3s; } @media (max-width: 600px) { .container { padding: 30px 20px; width: 95%; } h1 { font-size: 2rem; } .circle:nth-child(1) { width: 100px; height: 100px; } .circle:nth-child(3) { width: 150px; height: 150px; } } </style> </head> <body> <div class="background-elements"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <svg class="squiggle" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 10C10 5 20 15 30 10C40 5 50 15 60 10C70 5 80 15 90 10C100 5 110 15 120 10" stroke="var(--primary)" stroke-width="4" fill="none"/> </svg> <svg class="squiggle" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 10C10 5 20 15 30 10C40 5 50 15 60 10C70 5 80 15 90 10C100 5 110 15 120 10" stroke="var(--secondary)" stroke-width="4" fill="none"/> </svg> </div> <div class="container"> <div class="hand-drawn-border"></div> <div class="form-doodle"> <svg class="doodle doodle-1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> <path d="M30 5C40 20 50 10 55 30C60 50 40 55 30 55C20 55 0 50 5 30C10 10 20 -10 30 5Z" /> </svg> <svg class="doodle doodle-2" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20C15 5 25 25 40 15C55 5 65 25 75 15" /> </svg> </div> <div id="contact-form"> <h1>Let's Create Together</h1> <p class="intro">I'm currently available for freelance projects that need a touch of artistry and imagination. Tell me about your vision and let's craft something exceptional.</p> <form id="form"> <div class="form-group"> <label for="name">Your Name</label> <input type="text" id="name" name="name" required> <svg class="input-illustration" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="var(--primary)" stroke-width="1.5"/> <path d="M20 21C20 16.5817 16.4183 13 12 13C7.58172 13 4 16.5817 4 21" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> <svg class="input-illustration" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="var(--primary)" stroke-width="1.5"/> <path d="M22 6L12 13L2 6" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <div class="form-group"> <label for="project">Project Type</label> <input type="text" id="project" name="project" placeholder="Web Design, Illustration, Branding, etc."> <svg class="input-illustration" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 9L12 5L22 9L12 13L2 9Z" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 9V15" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 11V16.5C6 16.5 8.5 19 12 19C15.5 19 18 16.5 18 16.5V11" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="form-group"> <label for="message">Tell Me About Your Project</label> <textarea id="message" name="message" required placeholder="Share your vision, timeline, and any other details that will help me understand what you're looking for..."></textarea> </div> <button type="submit" id="submit-btn">Send Your Message</button> </form> </div> <div id="success-message" class="success-message"> <h2>Message Sent Successfully!</h2> <p>Thanks for reaching out. I'll get back to you within 24-48 hours to discuss your creative project.</p> <button class="back-btn" id="back-btn">Send Another Message</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Form submission handling const form = document.getElementById('form'); const contactForm = document.getElementById('contact-form'); const successMessage = document.getElementById('success-message'); const backBtn = document.getElementById('back-btn'); form.addEventListener('submit', function(e) { e.preventDefault(); // Simulate form submission setTimeout(() => { contactForm.style.display = 'none'; successMessage.style.display = 'block'; // Reset form form.reset(); }, 800); }); backBtn.addEventListener('click', function() { contactForm.style.display = 'block'; successMessage.style.display = 'none'; }); // Interactive cursor trails const body = document.querySelector('body'); let trailElements = []; const maxTrails = 15; function createTrailElement() { const element = document.createElement('div'); element.className = 'cursor-trail'; element.style.opacity = '0'; body.appendChild(element); return element; } for (let i = 0; i < maxTrails; i++) { trailElements.push(createTrailElement()); } body.addEventListener('mousemove', function(e) { const trail = trailElements.shift(); // Position the trail element at cursor position trail.style.left = e.clientX + 'px'; trail.style.top = e.clientY + 'px'; trail.style.opacity = '0.6'; trail.style.transform = 'scale(' + (Math.random() * 0.5 + 0.5) + ')'; // Add the element back to the end of the array trailElements.push(trail); // Fade out the oldest trail setTimeout(() => { trail.style.opacity = '0'; }, 500); }); // Hand-drawn border animation const handDrawnBorder = document.querySelector('.hand-drawn-border'); function animateBorder() { const borderLength = 2 * (handDrawnBorder.offsetWidth + handDrawnBorder.offsetHeight); handDrawnBorder.style.setProperty('--borderLength', borderLength + 'px'); handDrawnBorder.style.animation = 'none'; handDrawnBorder.offsetHeight; // Force reflow handDrawnBorder.style.animation = 'drawBorder 8s ease-in-out infinite'; } // Hover animations for input fields const inputs = document.querySelectorAll('input, textarea'); inputs.forEach(input => { input.addEventListener('focus', function() { this.parentElement.style.transform = 'translateY(-5px)'; }); input.addEventListener('blur', function() { this.parentElement.style.transform = 'translateY(0)'; }); }); // Animate background elements on load const circles = document.querySelectorAll('.circle'); circles.forEach((circle, index) => { circle.style.transform = `scale(${0.8 + Math.random() * 0.4}) rotate(${Math.random() * 20}deg)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Culinary Experience Feedback</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500&display=swap'); :root { --primary: #8B4513; --primary-light: #A0522D; --secondary: #FFDEAD; --tertiary: #F5DEB3; --accent: #DC582A; --text: #333; --background: #FFFAF0; --rating-inactive: #D1C4AF; --success: #4A7C59; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: var(--background); color: var(--text); line-height: 1.6; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; } .container { width: 100%; max-width: 700px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(139, 69, 19, 0.15); overflow: hidden; position: relative; height: 650px; display: flex; flex-direction: column; } .form-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 25px 30px; color: white; position: relative; overflow: hidden; } .form-header h1 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 10px; letter-spacing: 0.5px; } .form-header p { font-weight: 300; opacity: 0.9; max-width: 80%; } .pattern { position: absolute; top: 10px; right: 10px; width: 120px; height: 120px; opacity: 0.1; } .form-content { padding: 30px; overflow-y: auto; flex-grow: 1; } .form-group { margin-bottom: 25px; position: relative; } .form-group label { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; color: var(--primary); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-family: 'Montserrat', sans-serif; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(220, 88, 42, 0.2); } .rating-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; } .rating-item { position: relative; flex: 1; min-width: calc(20% - 10px); } .rating-item input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .rating-item label { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; border: 1px solid var(--rating-inactive); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.9rem; color: var(--text); margin: 0; } .rating-item input:checked + label { background-color: var(--primary); border-color: var(--primary); color: white; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(139, 69, 19, 0.3); } .rating-item:hover label { border-color: var(--primary-light); transform: translateY(-2px); } textarea.form-control { min-height: 120px; resize: vertical; } .form-footer { padding: 20px 30px; background-color: var(--tertiary); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(139, 69, 19, 0.1); } .btn { background-color: var(--accent); color: white; border: none; padding: 12px 25px; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn:hover { background-color: #c24825; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 88, 42, 0.3); } .btn-reset { background-color: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-reset:hover { background-color: rgba(139, 69, 19, 0.05); box-shadow: none; } .thank-you { display: none; text-align: center; padding: 40px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .thank-you h2 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2.5rem; color: var(--success); margin-bottom: 20px; } .thank-you p { font-size: 1.1rem; max-width: 500px; margin-bottom: 30px; } .checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; box-shadow: 0 0 0 var(--success); animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; margin-bottom: 30px; position: relative; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: var(--success); fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: 0 0 0 30px var(--success); } } .form-section { position: absolute; width: 100%; height: 100%; opacity: 0; transform: translateX(50px); transition: all 0.5s ease; pointer-events: none; } .form-section.active { opacity: 1; transform: translateX(0); pointer-events: all; } .progress-container { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; } .progress-container::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 2px; width: 100%; background-color: var(--rating-inactive); z-index: 0; } .progress-step { width: 40px; height: 40px; background-color: var(--rating-inactive); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; position: relative; z-index: 1; transition: all 0.3s ease; } .progress-step.active { background-color: var(--accent); transform: scale(1.1); } .progress-step.completed { background-color: var(--success); } .cutlery-icon { position: absolute; width: 35px; height: 35px; opacity: 0.7; transition: all 0.3s ease; } .dish-pattern { position: absolute; bottom: -50px; right: -50px; width: 200px; height: 200px; opacity: 0.05; z-index: 0; } .highlight-text { color: var(--accent); font-weight: 500; } @media (max-width: 600px) { .form-header h1 { font-size: 1.8rem; } .rating-item { min-width: calc(33.33% - 10px); } .form-footer { flex-direction: column; gap: 15px; } .btn { width: 100%; } } .back-button { background: none; border: none; color: var(--primary); cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: 500; transition: all 0.3s ease; } .back-button:hover { color: var(--accent); transform: translateX(-3px); } .custom-select { position: relative; display: inline-block; width: 100%; } .custom-select select { display: none; } .select-selected { background-color: white; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; user-select: none; } .select-selected:after { position: absolute; content: ""; top: 50%; right: 15px; transform: translateY(-50%); width: 0; height: 0; border: 6px solid transparent; border-color: var(--primary) transparent transparent transparent; } .select-selected.select-arrow-active:after { border-color: transparent transparent var(--primary) transparent; top: calc(50% - 6px); } .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid #ddd; border-radius: 0 0 6px 6px; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: none; } .select-items div { padding: 10px 15px; cursor: pointer; user-select: none; transition: all 0.2s; } .select-items div:hover, .same-as-selected { background-color: var(--tertiary); } .section-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--primary); margin-bottom: 20px; position: relative; padding-bottom: 10px; } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 3px; background: var(--accent); border-radius: 2px; } .dish-rating { margin-top: 5px; } .custom-radio { display: flex; align-items: center; margin-bottom: 10px; } .custom-radio input[type="radio"] { position: absolute; opacity: 0; } .custom-radio label { position: relative; padding-left: 30px; cursor: pointer; line-height: 24px; margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1rem; color: var(--text); width: 100%; display: flex; justify-content: space-between; } .custom-radio label:before { content: ''; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border: 2px solid var(--rating-inactive); border-radius: 50%; transition: all 0.3s ease; } .custom-radio input[type="radio"]:checked + label:before { border-color: var(--accent); } .custom-radio input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 7px; left: 5px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; transition: all 0.3s ease; } .custom-radio label span { margin-left: auto; display: inline-block; color: var(--primary); } .tooltip { position: relative; display: inline-block; margin-left: 5px; color: var(--primary-light); cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: var(--primary); color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; font-weight: 400; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--primary) transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .form-note { font-size: 0.85rem; color: var(--primary-light); margin-top: 10px; font-style: italic; } .highlight-box { background-color: rgba(255, 222, 173, 0.3); border-left: 3px solid var(--accent); padding: 15px; border-radius: 0 6px 6px 0; margin-bottom: 25px; } .highlight-box p { margin: 0; font-size: 0.9rem; } .form-divider { height: 1px; background: linear-gradient(to right, transparent, var(--rating-inactive), transparent); margin: 25px 0; } .dish-name { font-weight: 500; color: var(--primary); } </style> </head> <body> <div class="container"> <!-- Form Section 1: Initial Ratings --> <div class="form-section active" id="section1"> <div class="form-header"> <h1>Your Dining Experience</h1> <p>Help us enhance your future visits by sharing your thoughts on today's meal.</p> <svg class="pattern" viewBox="0 0 100 100"> <path fill="white" d="M30,20 Q50,5 70,20 T100,40 T70,60 T30,80 T0,60 T30,40 T60,20" /> </svg> </div> <div class="form-content"> <div class="progress-container"> <div class="progress-step active">1</div> <div class="progress-step">2</div> <div class="progress-step">3</div> </div> <div class="highlight-box"> <p>Thank you for dining at <span class="highlight-text">Gourmet Garden</span>. Your feedback helps us craft better culinary experiences.</p> </div> <div class="form-group"> <label for="visitDate">Date of Visit</label> <input type="date" id="visitDate" class="form-control" required> </div> <div class="form-group"> <label>Overall Experience</label> <div class="rating-group"> <div class="rating-item"> <input type="radio" name="experience" id="exp1" value="1"> <label for="exp1">Poor</label> </div> <div class="rating-item"> <input type="radio" name="experience" id="exp2" value="2"> <label for="exp2">Fair</label> </div> <div class="rating-item"> <input type="radio" name="experience" id="exp3" value="3"> <label for="exp3">Good</label> </div> <div class="rating-item"> <input type="radio" name="experience" id="exp4" value="4"> <label for="exp4">Very Good</label> </div> <div class="rating-item"> <input type="radio" name="experience" id="exp5" value="5"> <label for="exp5">Excellent</label> </div> </div> </div> <div class="form-group"> <label>Food Quality</label> <div class="rating-group"> <div class="rating-item"> <input type="radio" name="food" id="food1" value="1"> <label for="food1">Poor</label> </div> <div class="rating-item"> <input type="radio" name="food" id="food2" value="2"> <label for="food2">Fair</label> </div> <div class="rating-item"> <input type="radio" name="food" id="food3" value="3"> <label for="food3">Good</label> </div> <div class="rating-item"> <input type="radio" name="food" id="food4" value="4"> <label for="food4">Very Good</label> </div> <div class="rating-item"> <input type="radio" name="food" id="food5" value="5"> <label for="food5">Excellent</label> </div> </div> </div> <div class="form-group"> <label>Service Quality</label> <div class="rating-group"> <div class="rating-item"> <input type="radio" name="service" id="service1" value="1"> <label for="service1">Poor</label> </div> <div class="rating-item"> <input type="radio" name="service" id="service2" value="2"> <label for="service2">Fair</label> </div> <div class="rating-item"> <input type="radio" name="service" id="service3" value="3"> <label for="service3">Good</label> </div> <div class="rating-item"> <input type="radio" name="service" id="service4" value="4"> <label for="service4">Very Good</label> </div> <div class="rating-item"> <input type="radio" name="service" id="service5" value="5"> <label for="service5">Excellent</label> </div> </div> </div> </div> <div class="form-footer"> <div></div> <button type="button" class="btn btn-next" onclick="nextSection(1)">Next Step <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 9L13 5M13 5L9 1M13 5H1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg></button> </div> </div> <!-- Form Section 2: Dish Ratings --> <div class="form-section" id="section2"> <div class="form-header"> <h1>Your Dining Experience</h1> <p>Tell us about the specific dishes you enjoyed.</p> <svg class="pattern" viewBox="0 0 100 100"> <path fill="white" d="M30,20 Q50,5 70,20 T100,40 T70,60 T30,80 T0,60 T30,40 T60,20" /> </svg> </div> <div class="form-content"> <div class="progress-container"> <div class="progress-step completed">1</div> <div class="progress-step active">2</div> <div class="progress-step">3</div> </div> <div class="form-group"> <label>Which dishes did you try today? <span class="tooltip">ⓘ<span class="tooltiptext">Select all dishes you ordered during your visit</span></span></label> <div class="dish-rating"> <div class="custom-radio"> <input type="checkbox" name="dishes" id="dish1" value="Seasonal Risotto"> <label for="dish1">Seasonal Truffle Risotto <span>$24</span></label> </div> <div class="custom-radio"> <input type="checkbox" name="dishes" id="dish2" value="Herb-Crusted Salmon"> <label for="dish2">Herb-Crusted Salmon <span>$28</span></label> </div> <div class="custom-radio"> <input type="checkbox" name="dishes" id="dish3" value="Filet Mignon"> <label for="dish3">Filet Mignon <span>$36</span></label> </div> <div class="custom-radio"> <input type="checkbox" name="dishes" id="dish4" value="Wild Mushroom Ravioli"> <label for="dish4">Wild Mushroom Ravioli <span>$22</span></label> </div> <div class="custom-radio"> <input type="checkbox" name="dishes" id="dish5" value="Other"> <label for="dish5">Other</label> </div> </div> </div> <div class="form-divider"></div> <div class="form-group"> <label>Favorite Dish</label> <div class="custom-select"> <select id="favoriteDish"> <option value="">Select your favorite dish</option> <option value="Seasonal Truffle Risotto">Seasonal Truffle Risotto</option> <option value="Herb-Crusted Salmon">Herb-Crusted Salmon</option> <option value="Filet Mignon">Filet Mignon</option> <option value="Wild Mushroom Ravioli">Wild Mushroom Ravioli</option> <option value="Other">Other</option> </select> </div> </div> <div class="form-group"> <label>What did you enjoy most about your favorite dish?</label> <textarea class="form-control" id="favoriteDishWhy" placeholder="The flavors, presentation, etc..."></textarea> </div> <div class="form-group"> <label>Any dish that didn't meet your expectations?</label> <div class="custom-select"> <select id="disappointingDish"> <option value="">Select a dish (if any)</option> <option value="Seasonal Truffle Risotto">Seasonal Truffle Risotto</option> <option value="Herb-Crusted Salmon">Herb-Crusted Salmon</option> <option value="Filet Mignon">Filet Mignon</option> <option value="Wild Mushroom Ravioli">Wild Mushroom Ravioli</option> <option value="Other">Other</option> <option value="None">None - All dishes were excellent</option> </select> </div> <p class="form-note">Your honest feedback helps our chefs improve.</p> </div> </div> <div class="form-footer"> <button type="button" class="back-button" onclick="prevSection(2)"> <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 1L1 5M1 5L5 9M1 5H13" stroke="#8B4513" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back </button> <button type="button" class="btn btn-next" onclick="nextSection(2)">Next Step <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 9L13 5M13 5L9 1M13 5H1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg></button> </div> </div> <!-- Form Section 3: Final Comments --> <div class="form-section" id="section3"> <div class="form-header"> <h1>Your Dining Experience</h1> <p>Share your final thoughts to help us improve.</p> <svg class="pattern" viewBox="0 0 100 100"> <path fill="white" d="M30,20 Q50,5 70,20 T100,40 T70,60 T30,80 T0,60 T30,40 T60,20" /> </svg> </div> <div class="form-content"> <div class="progress-container"> <div class="progress-step completed">1</div> <div class="progress-step completed">2</div> <div class="progress-step active">3</div> </div> <div class="form-group"> <label>Would you recommend Gourmet Garden to friends or family?</label> <div class="rating-group"> <div class="rating-item"> <input type="radio" name="recommend" id="rec1" value="Definitely Not"> <label for="rec1">Definitely Not</label> </div> <div class="rating-item"> <input type="radio" name="recommend" id="rec2" value="Probably Not"> <label for="rec2">Probably Not</label> </div> <div class="rating-item"> <input type="radio" name="recommend" id="rec3" value="Maybe"> <label for="rec3">Maybe</label> </div> <div class="rating-item"> <input type="radio" name="recommend" id="rec4" value="Probably"> <label for="rec4">Probably</label> </div> <div class="rating-item"> <input type="radio" name="recommend" id="rec5" value="Definitely"> <label for="rec5">Definitely</label> </div> </div> </div> <div class="form-group"> <label>If you had a specific server, who helped you today?</label> <input type="text" class="form-control" id="serverName" placeholder="Server's name (optional)"> </div> <div class="form-group"> <label>Additional Comments</label> <textarea class="form-control" id="comments" placeholder="Share any other thoughts or suggestions about your experience..."></textarea> </div> <div class="form-group"> <label>Your Name (Optional)</label> <input type="text" class="form-control" id="guestName" placeholder="Your name"> </div> <div class="form-group"> <label>Email Address (Optional)</label> <input type="email" class="form-control" id="guestEmail" placeholder="For follow-up if needed"> <p class="form-note">We respect your privacy and will never share your information.</p> </div> </div> <div class="form-footer"> <button type="button" class="back-button" onclick="prevSection(3)"> <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 1L1 5M1 5L5 9M1 5H13" stroke="#8B4513" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Back </button> <button type="button" class="btn" id="submitBtn" onclick="submitForm()">Submit Feedback</button> </div> </div> <!-- Thank You Section --> <div class="form-section" id="thankYou"> <div class="thank-you"> <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> </svg> <h2>Thank You!</h2> <p>Your feedback is invaluable to us. We appreciate you taking the time to share your dining experience at Gourmet Garden.</p> <p>We look forward to serving you again soon.</p> <button type="button" class="btn" onclick="resetForm()">Submit Another Response</button> </div> <svg class="dish-pattern" viewBox="0 0 100 100"> <path fill="#8B4513" d="M50,0 C60,10 90,10 100,0 L100,100 C90,90 60,90 50,100 C40,90 10,90 0,100 L0,0 C10,10 40,10 50,0 Z"/> </svg> </div> </div> <script> // Initialize custom select elements document.addEventListener('DOMContentLoaded', function() { let x, i, j, l, ll, selElmnt, a, b, c; x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; // Create a new DIV that will act as the selected item a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); // Create a new DIV that will contain the option list b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { // For each option in the original select element, // create a new DIV that will act as an option item c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { // When an item is clicked, update the original select box, // and the selected item let y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { // When the select box is clicked, close any other select boxes, // and open/close the current select box e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { // A function that will close all select boxes in the document, // except the current select box let x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } // If the user clicks anywhere outside the
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DailyPlanner Mobile App Contact Form</title> <style> :root { --primary-color: #5C6BC0; --secondary-color: #FF5722; --accent-color: #FFC107; --success-color: #4CAF50; --light-color: #F5F5F5; --dark-color: #263238; --transition-time: 0.3s; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--dark-color); overflow: hidden; } .container { width: 100%; max-width: 420px; height: 600px; position: relative; perspective: 1000px; overflow: hidden; } .phone-frame { width: 100%; height: 100%; background-color: white; border-radius: 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .app-title { font-size: 24px; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; } .app-title span { display: inline-block; margin-left: 8px; } .app-icon { width: 30px; height: 30px; background-color: var(--primary-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; } .form-container { flex: 1; position: relative; width: 100%; overflow: hidden; } .form-step { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; transform: translateX(100%); opacity: 0; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; padding: 10px 5px; } .form-step.active { transform: translateX(0); opacity: 1; } .form-step.left { transform: translateX(-100%); opacity: 0; } .step-title { font-size: 22px; font-weight: 600; margin-bottom: 20px; color: var(--primary-color); } .step-subtitle { font-size: 16px; margin-bottom: 30px; color: #546E7A; } .form-group { margin-bottom: 25px; position: relative; } .form-group label { display: block; margin-bottom: 10px; font-weight: 500; font-size: 16px; transition: var(--transition-time); } input, textarea, select { width: 100%; padding: 16px; font-size: 16px; border: 2px solid #E0E0E0; border-radius: 16px; background-color: #FAFAFA; transition: all var(--transition-time); font-family: var(--font-family); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.2); } textarea { resize: none; height: 120px; } .button-row { display: flex; justify-content: space-between; margin-top: auto; } .btn { padding: 16px 24px; font-size: 16px; border: none; border-radius: 16px; cursor: pointer; font-weight: 600; transition: all 0.3s; display: flex; align-items: center; justify-content: center; min-width: 120px; position: relative; overflow: hidden; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-secondary { background-color: #ECEFF1; color: var(--dark-color); } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn:active { transform: translateY(0); } .btn .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .progress-bar { width: 100%; height: 5px; background-color: #ECEFF1; border-radius: 10px; margin-bottom: 20px; overflow: hidden; } .progress { height: 100%; background-color: var(--primary-color); border-radius: 10px; width: 25%; transition: width 0.5s ease; } .radio-group { display: flex; flex-wrap: wrap; gap: 10px; } .radio-option { flex: 1 0 calc(50% - 10px); position: relative; } .radio-option input { position: absolute; opacity: 0; width: 0; height: 0; } .radio-option label { display: block; padding: 15px; text-align: center; background-color: #ECEFF1; border-radius: 16px; cursor: pointer; transition: all 0.3s; font-weight: 500; margin: 0; } .radio-option input:checked + label { background-color: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3); } .checkmark-icon, .success-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .success-icon { background-color: var(--success-color); color: white; font-size: 40px; animation: bounce 1s ease; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .form-step.success-step { text-align: center; justify-content: center; } .success-message { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: var(--success-color); } .success-details { color: #546E7A; margin-bottom: 30px; } .swipe-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #78909C; font-size: 12px; display: flex; align-items: center; animation: pulse 2s infinite; } .swipe-indicator svg { margin-right: 5px; } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .form-error { color: #FF5252; font-size: 14px; margin-top: 8px; display: none; } .form-error.visible { display: block; animation: shake 0.5s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } .rating-container { display: flex; justify-content: space-between; margin: 20px 0; } .rating-option { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #E0E0E0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; position: relative; background-color: white; } .rating-option:hover, .rating-option.selected { transform: scale(1.1); border-color: var(--primary-color); background-color: var(--primary-color); color: white; } .floating-pattern { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(92, 107, 192, 0.1) 10%, transparent 70%); border-radius: 50%; z-index: -1; animation: float 8s infinite alternate ease-in-out; } .pattern-1 { top: -150px; right: -150px; } .pattern-2 { bottom: -150px; left: -150px; animation-delay: 2s; } @keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(20px, 20px); } } .social-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .social-button { width: 50px; height: 50px; border-radius: 50%; background-color: #ECEFF1; display: flex; align-items: center; justify-content: center; transition: all 0.3s; cursor: pointer; color: #546E7A; } .social-button:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .social-button.twitter:hover { background-color: #1DA1F2; color: white; } .social-button.facebook:hover { background-color: #4267B2; color: white; } .social-button.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; } /* Touch indicators */ .touch-hint { position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(92, 107, 192, 0.2); display: flex; align-items: center; justify-content: center; z-index: 10; animation: pulse-hint 1.5s infinite; pointer-events: none; opacity: 0; } .touch-hint.visible { opacity: 1; } @keyframes pulse-hint { 0% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(0.8); opacity: 0.8; } } @media (max-width: 420px) { .container { width: 90%; height: 90vh; } .phone-frame { border-radius: 20px; padding: 15px; } .step-title { font-size: 20px; } .btn { padding: 14px 20px; font-size: 15px; } } </style> </head> <body> <div class="container"> <div class="phone-frame"> <div class="floating-pattern pattern-1"></div> <div class="floating-pattern pattern-2"></div> <div class="top-bar"> <div class="app-title"> <div class="app-icon">DP</div> <span>DailyPlanner</span> </div> </div> <div class="progress-bar"> <div class="progress" id="progress-bar"></div> </div> <div class="form-container"> <div class="form-step active" data-step="1"> <h2 class="step-title">Let's Connect</h2> <p class="step-subtitle">Tell us a bit about yourself so we can personalize your DailyPlanner experience.</p> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Enter your name"> <div class="form-error" id="name-error">Please enter your name</div> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="[email protected]"> <div class="form-error" id="email-error">Please enter a valid email</div> </div> <div class="button-row"> <div></div> <button class="btn btn-primary" id="step1-next">Continue</button> </div> </div> <div class="form-step" data-step="2"> <h2 class="step-title">Planning Style</h2> <p class="step-subtitle">Help us understand how you prefer to organize your day.</p> <div class="form-group"> <label>What's your planning preference?</label> <div class="radio-group"> <div class="radio-option"> <input type="radio" id="plan-daily" name="plan-style" value="daily"> <label for="plan-daily">Daily Focus</label> </div> <div class="radio-option"> <input type="radio" id="plan-weekly" name="plan-style" value="weekly"> <label for="plan-weekly">Weekly View</label> </div> <div class="radio-option"> <input type="radio" id="plan-monthly" name="plan-style" value="monthly"> <label for="plan-monthly">Monthly Goals</label> </div> <div class="radio-option"> <input type="radio" id="plan-project" name="plan-style" value="project"> <label for="plan-project">Project Based</label> </div> </div> <div class="form-error" id="plan-error">Please select a planning style</div> </div> <div class="form-group"> <label for="productivity">How would you rate your current productivity?</label> <div class="rating-container"> <div class="rating-option" data-value="1">1</div> <div class="rating-option" data-value="2">2</div> <div class="rating-option" data-value="3">3</div> <div class="rating-option" data-value="4">4</div> <div class="rating-option" data-value="5">5</div> </div> <input type="hidden" id="productivity-rating" value=""> <div class="form-error" id="rating-error">Please rate your productivity</div> </div> <div class="button-row"> <button class="btn btn-secondary" id="step2-prev">Back</button> <button class="btn btn-primary" id="step2-next">Continue</button> </div> </div> <div class="form-step" data-step="3"> <h2 class="step-title">Your Message</h2> <p class="step-subtitle">Tell us what you need help with or any questions you have.</p> <div class="form-group"> <label for="subject">Subject</label> <select id="subject"> <option value="">Select a topic</option> <option value="feature-request">Feature Request</option> <option value="bug-report">Bug Report</option> <option value="account-help">Account Help</option> <option value="subscription">Subscription Question</option> <option value="feedback">General Feedback</option> </select> <div class="form-error" id="subject-error">Please select a subject</div> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" placeholder="Enter your message here..."></textarea> <div class="form-error" id="message-error">Please enter your message</div> </div> <div class="button-row"> <button class="btn btn-secondary" id="step3-prev">Back</button> <button class="btn btn-primary" id="step3-next">Submit</button> </div> </div> <div class="form-step success-step" data-step="4"> <div class="success-icon">✓</div> <h2 class="success-message">Thank You!</h2> <p class="success-details">We've received your message and will get back to you within 24 hours. Meanwhile, explore more DailyPlanner features!</p> <button class="btn btn-primary" id="restart-form">Send Another Message</button> <div class="social-buttons"> <div class="social-button twitter"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </div> <div class="social-button facebook"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <div class="social-button instagram"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </div> </div> </div> <div class="touch-hint" id="touch-hint"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { let currentStep = 1; const totalSteps = 4; const formSteps = document.querySelectorAll('.form-step'); const progressBar = document.getElementById('progress-bar'); const touchHint = document.getElementById('touch-hint'); let touchStartX = 0; let touchEndX = 0; let formData = {}; let selectedRating = null; // Initial display updateProgressBar(); showTouchHint(); // Add ripple effect to buttons document.querySelectorAll('.btn').forEach(button => { button.addEventListener('click', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); }); }); // Setup rating options document.querySelectorAll('.rating-option').forEach(option => { option.addEventListener('click', function() { document.querySelectorAll('.rating-option').forEach(opt => { opt.classList.remove('selected'); }); this.classList.add('selected'); document.getElementById('productivity-rating').value = this.dataset.value; selectedRating = this.dataset.value; }); }); // Navigation event listeners document.getElementById('step1-next').addEventListener('click', () => { if (validateStep(1)) { goToStep(2); } }); document.getElementById('step2-prev').addEventListener('click', () => { goToStep(1); }); document.getElementById('step2-next').addEventListener('click', () => { if (validateStep(2)) { goToStep(3); } }); document.getElementById('step3-prev').addEventListener('click', () => { goToStep(2); }); document.getElementById('step3-next').addEventListener('click', () => { if (validateStep(3)) { submitForm(); } }); document.getElementById('restart-form').addEventListener('click', () => { resetForm(); goToStep(1); }); // Touch swipe detection const formContainer = document.querySelector('.form-container'); formContainer.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, false); formContainer.addEventListener('touchend', function(e) { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, false); function handleSwipe() { if (touchEndX < touchStartX - 50) { // Swipe left if (currentStep < totalSteps && validateStep(currentStep)) { goToStep(currentStep + 1); } } if (touchEndX > touchStartX + 50) { // Swipe right if (currentStep > 1) { goToStep(currentStep - 1); } } } function goToStep(step) { // Hide all steps formSteps.forEach(formStep => { if (parseInt(formStep.dataset.step) < step) { formStep.classList.remove('active'); formStep.classList.add('left'); } else { formStep.classList.remove('active', 'left'); } }); // Show current step document.querySelector(`.form-step[data-step="${step}"]`).classList.add('active'); currentStep = step; updateProgressBar(); showTouchHint(); } function updateProgressBar() { const progress = ((currentStep - 1) / (totalSteps - 1)) * 100; progressBar.style.width = `${progress}%`; } function validateStep(step) { let isValid = true; if (step === 1) { // Validate name const name = document.getElementById('name').value.trim(); if (name === '') { showError('name-error'); isValid = false; } else { hideError('name-error'); formData.name = name; } // Validate email const email = document.getElementById('email').value.trim(); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showError('email-error'); isValid = false; } else { hideError('email-error'); formData.email = email; } } if (step === 2) { // Validate planning style const planStyle = document.querySelector('input[name="plan-style"]:checked'); if (!planStyle) { showError('plan-error'); isValid = false; } else { hideError('plan-error'); formData.planStyle = planStyle.value; } // Validate productivity rating if (!selectedRating) { showError('rating-error'); isValid = false; } else { hideError('rating-error'); formData.productivityRating = selectedRating; } } if (step === 3) { // Validate subject const subject = document.getElementById('subject').value; if (subject === '') { showError('subject-error'); isValid = false; } else { hideError('subject-error'); formData.subject = subject; } // Validate message const message = document.getElementById('message').value.trim(); if (message === '') { showError('message-error'); isValid = false; } else { hideError('message-error'); formData.message = message; } } return isValid; } function showError(id) { const errorElement = document.getElementById(id); errorElement.classList.add('visible'); // Create touch hint at the error location const errorParent = errorElement.parentNode; const rect = errorParent.getBoundingClientRect(); touchHint.style.top = `${rect.top + 30}px`; touchHint.style.left = `${rect.left + rect.width / 2}px`; touchHint.classList.add('visible'); setTimeout(() => { touchHint.classList.remove('visible'); }, 1500); } function hideError(id) { document.getElementById(id).classList.remove('visible'); } function showTouchHint() { if (currentStep < 4) { const nextBtn = document.querySelector(`.form-step[data-step="${currentStep}"] .btn-primary`); if (nextBtn) { const rect = nextBtn.getBoundingClientRect(); touchHint.style.top = `${rect.top + rect.height/2 - 20}px`; touchHint.style.left = `${rect.left + rect.width/2 - 20}px`; touchHint.classList.add('visible'); setTimeout(() => { touchHint.classList.remove('visible'); }, 1500); } } } function submitForm() { // Simulate form submission console.log('Form submitted with data:', formData); // Show success step goToStep(4); } function resetForm() { // Reset form fields document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.querySelectorAll('input[name="plan-style"]').forEach(radio => { radio.checked = false; }); document.querySelectorAll('.rating-option').forEach(option => { option.classList.remove('selected'); }); document.getElementById('productivity-rating').value = ''; selectedRating = null; document.getElementById('subject').value = ''; document.getElementById('message').value = ''; // Reset errors document.querySelectorAll('.form-error').forEach(error => { error.classList.remove('visible'); }); // Reset form data formData = {}; } }); </script> </body> </html>
