Prescription Form

Prescription Information Collection Form body { font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif; } /* Custom file upload button style */ input[type="file"]::file-selector-button { background-color: #4f46e5; color: white; border: 1px solid #4f46e5; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s; } input[type="file"]::file-selector-button:hover { background-color: #4338ca; } Prescription Information Please fill out your prescription information carefully so we can provide you with the most accurate service. 1. Personal Information Your Name * Email * Backer Number * 2. Prescription Details Right Eye (OD) Sphere (SPH) Cylinder (CYL) Axis Left Eye (OS) Sphere (SPH) Cylinder (CYL) Axis 3. Pupillary Distance (PD) Single PD 4. Additional Information (Optional) ADD (For Reading/Progressive Lenses) Right (R) Left (L) Prism Right Value Right Base Select Up Down In Out Left Value Left Base Select Up Down In Out 5. Upload & Notes Upload Prescription File (Optional) If you have a photo or scan of your prescription, please upload it here. Supports JPG, PNG, PDF. Notes or Special Instructions (Optional) I have read and agree to the Terms of Service and Privacy Policy . * Submit Information document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('prescriptionForm'); const formMessage = document.getElementById('form-message'); form.addEventListener('submit', function(event) { event.preventDefault(); formMessage.classList.add('hidden'); formMessage.textContent = ''; let isValid = true; const requiredFields = form.querySelectorAll('[required]'); requiredFields.forEach(field => { let fieldIsValid = true; if (field.type === 'checkbox') { if (!field.checked) fieldIsValid = false; } else if (!field.value.trim()) { fieldIsValid = false; } if(!fieldIsValid) { isValid = false; field.classList.add('border-red-500'); field.classList.remove('border-gray-300'); } else { field.classList.remove('border-red-500'); field.classList.add('border-gray-300'); } }); if (!isValid) { formMessage.textContent = 'Please fill in all required fields marked with *.'; formMessage.classList.remove('hidden'); const firstInvalidField = form.querySelector('.border-red-500'); if(firstInvalidField) { firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' }); } return; } const formData = new FormData(form); // IMPORTANT: This is where you connect to a backend service. // Follow the guide to set up a service like Formspree. /* // --- Step 1: UNCOMMENT THE CODE BLOCK BELOW --- fetch('https://formspree.io/f/your_unique_id', { // { if (response.ok) { formMessage.textContent = 'Submission successful! Thank you for filling out the form.'; formMessage.classList.remove('hidden', 'bg-red-50', 'text-red-700'); formMessage.classList.add('bg-green-50', 'text-green-700'); form.reset(); // Clear the form on success } else { response.json().then(data => { if (Object.hasOwn(data, 'errors')) { formMessage.textContent = data["errors"].map(error => error["message"]).join(", "); } else { formMessage.textContent = 'Oops! There was a problem submitting your form.'; } formMessage.classList.remove('hidden'); formMessage.classList.add('bg-red-50', 'text-red-700'); }) } }) .catch(error => { console.error('Error:', error); formMessage.textContent = 'Submission failed. Please try again later.'; formMessage.classList.remove('hidden'); formMessage.classList.add('bg-red-50', 'text-red-700'); }); */ // For demo purposes ONLY. You should REMOVE this block after uncommenting the fetch block above. formMessage.textContent = 'Submission successful! Thank you for filling out the form.'; formMessage.classList.remove('hidden', 'bg-red-50', 'text-red-700'); formMessage.classList.add('bg-green-50', 'text-green-700'); window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); // form.reset(); }); });