Dental Upload form

Case Submission — Aligner Portal
New Case Submission
Aligner Portal — Dental Practice
STL Scans
STL Upper
Click or drag file
STL Lower
Click or drag file
Patient Photos
Full Face Smiling
Click or drag photo
Full Face Not Smiling
Click or drag photo
Profile Not Smiling
Click or drag photo
Intraoral Photos
Upper Occlusal
Click or drag
Right Lateral
Click or drag
Front View
Click or drag
Left Lateral
Click or drag
Lower Occlusal
Click or drag
X-Rays
Panoramic
Click or drag file
Cephalometric
Click or drag file
✓ Case submitted successfully. Confirmation sent to your email.
DEV GUIDE
Connecting Gmail — Integration Options
For your web designer / developer. Three approaches ranked by ease of implementation.
Option A — EmailJS (no server needed)
★ Recommended

EmailJS is a service that sends email directly from the browser using your Gmail account. No backend server required. Files are attached individually with their category label (e.g. "STL Upper — Patient: John Smith"). Free plan allows 200 emails/month; paid plans start at $15/month.

  1. Create a free account at emailjs.com and connect your Gmail under Email Services → Add Service → Gmail.
  2. Create an Email Template. In the template body use variables like {{patient_name}}, {{doctor}}, and {{file_list}}. Set To Email to your clinic's Gmail address.
  3. Copy your Service ID, Template ID, and Public Key from the EmailJS dashboard.
  4. Add the EmailJS SDK to this HTML file just before the closing </body> tag:
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
  5. Replace the submitCase() function in this file with the EmailJS send call. Example:
    // Initialize once (put in <head>)
    emailjs.init('YOUR_PUBLIC_KEY');

    // Inside submitCase():
    const params = {
      patient_name: document.getElementById('patName').value,
      patient_id: document.getElementById('patId').value,
      doctor: document.getElementById('drName').value,
      file_list: getUploadedList()
    };
    emailjs.send('SERVICE_ID', 'TEMPLATE_ID', params)
      .then(() => showToast())
      .catch(err => alert('Error: ' + err.text));
File size limit: EmailJS free tier limits attachments to ~50 KB per email. For STL and photo files (which are often larger), use Option B instead, which uploads files to Google Drive first and sends a Drive link to your Gmail.
Option B — Google Drive + Gmail via Make.com (handles large files)
Best for large files

When files are large (STL files can be 10–50 MB), email attachments won't work reliably. This approach uploads the files to a shared Google Drive folder and sends you an email with the organized folder link. Uses Make.com (formerly Integromat) as the automation bridge — no coding required after setup.

  1. Your developer adds a backend endpoint (Node.js, PHP, or Python — even a serverless function on Vercel/Netlify) that receives the form data via fetch() POST.
  2. That endpoint uses the Google Drive API to create a folder named Patient — John Smith — 2025-06-12 and uploads each file into it with its category as the filename prefix.
  3. After upload, the endpoint triggers the Gmail API (or Make.com webhook) to send you an email: "New case submitted by Dr. [Name] — Patient: [Name] — View files: [Drive link]"
  4. On Make.com: create a scenario with trigger Webhook → Google Drive: Upload File → Gmail: Send Email. No code needed on Make.com side.
  5. In the form's submitCase(), replace the placeholder with a fetch('YOUR_WEBHOOK_URL', formData) POST call using FormData to include all the files.
Cost: Make.com free plan covers ~1,000 operations/month. Google Drive uses your existing storage quota. Gmail API is free for standard send volumes.
Option C — Formspree (simplest, limited file size)
Quickest setup

Formspree is the simplest drop-in: point the form action to your Formspree endpoint, and file uploads go straight to your Gmail as attachments. Good for testing or low-volume use. File size limit is 10 MB per submission on the free plan.

  1. Sign up at formspree.io and create a new form. Copy the form endpoint URL (looks like https://formspree.io/f/xyzabcde).
  2. Change the form's submit handler to POST to that URL using the standard FormData API.
  3. In the Formspree dashboard, set the notification email to your Gmail. Every submission will arrive there with all uploaded files attached.
  4. Formspree labels each field by the input's name attribute — make sure each <input> in this file has a descriptive name (e.g. name="stl_upper"). Your designer only needs to add those name attributes.
Recommendation: Use Formspree only to validate the flow end-to-end during development. Switch to Option A or B for production, especially once STL files are involved.
Summary for your designer: The form frontend is complete and ready. The only tasks remaining are: (1) add name="..." attributes to each file input, (2) choose one of the three options above, (3) replace the submitCase() placeholder function with the chosen email-send call, and (4) add your clinic's Gmail address as the destination. Estimated developer time: 1–3 hours depending on the option chosen.