Why Your EmailJS Template Variables Aren't Showing Up — And the 60-Second Fix

The Problem

You’ve built a contact form. You integrated EmailJS — free, no backend, works directly from the browser. Your template looks clean. Your JavaScript looks right. You test it.

The email arrives — but every `` field is blank.

Why It Happens

EmailJS templates use `` placeholders. When you call emailjs.send(), the third argument is a plain JavaScript object. EmailJS matches the object keys to the template placeholder names — character for character, case sensitive.

Any mismatch — different name, extra underscores, different casing — and that variable renders empty. No warning. No error. Just blank.

Here’s the exact mismatch pattern:

// Template uses: , , , , 

// ❌ WRONG — keys don't match template placeholders
emailjs.send(SERVICE_ID, TEMPLATE_ID, {
  from_email: email,   // template expects , not 
  topic:      topic,   // ✓ matches
  message:    message, // ✓ matches
  reply_to:   email,   // not a template variable
});

The template expects and — the payload sends from_email and reply_to. EmailJS finds no match, renders blank.

The Fix

Every key in your emailjs.send() payload must exactly match a `` in your template. Go to your template, list every variable used, mirror them in your JS object.

// ✅ CORRECT — every key matches a template placeholder
await emailjs.send(SERVICE_ID, TEMPLATE_ID, {
  name:    email,          // → 
  email:   email,          // →   (used in Reply To)
  topic:   topic,          // → 
  message: message || '(No message provided)', // → 
  time:    new Date().toLocaleString('en-IN', {
             timeZone:  'Asia/Kolkata',
             dateStyle: 'medium',
             timeStyle: 'short'
           }),             // →   IST timestamp
});

Variable Mapping Reference

“Most engineers spend 30 minutes Googling a blank email bug. I looked at the pattern — variable name mismatch — and fixed it in 60 seconds. That’s not luck. That’s systems thinking.”

Quick Checklist Before Going Live

1. Open your EmailJS template and list every `` used
2. Confirm every template variable has a matching key in the JS payload
3. Set Reply To in template settings to ``
4. Use Test It in the EmailJS dashboard before deploying
5. Check Email History if a send seems to work but no email arrives

If you’re wiring up a contact form and hitting something the checklist above doesn’t cover — template variables still blank, emails going to spam, Reply To not routing correctly — I’m happy to help. Reach out at bilalmeccai.com/#contact or bilalmeccai@gmail.com.

Frequently Asked Questions