Migrating from EmailJS

This guide helps you migrate your email forms from EmailJS to mailiam, providing better performance, security, and developer experience.

Why Migrate to mailiam?

Advantages Over EmailJS

Feature	EmailJS	mailiam
Configuration	Dashboard only	Declarative YAML config
Security	Client-side keys	Server-side API keys
Rate Limiting	Basic	Advanced with IP-based rules
Spam Protection	Minimal	Comprehensive built-in
Email Forwarding	Not supported	Full email forwarding
Custom Templates	Limited	Complete HTML/CSS support
Pricing	Per email	SaaS model with higher limits
Developer UX	Manual setup	CLI-based workflow

Migration Benefits

Better Security: No exposed API keys in frontend
Improved Performance: Faster form processing
Enhanced Spam Protection: Built-in honeypot and filtering
Email Forwarding: Route emails to multiple destinations
Version Control: Configuration as code
Team Collaboration: Shared configuration files

Pre-Migration Assessment

Inventory Your EmailJS Setup

List all forms using EmailJS
Document email templates you’re using
Note recipient addresses for each form
Identify custom styling or features
Review current usage volume

EmailJS Configuration Audit

Export your EmailJS configuration:

Log into EmailJS dashboard
Note your Service ID and Template IDs
Document email recipients
Save template content and styling
Record any custom JavaScript integration

Step-by-Step Migration

1. Install mailiam CLI

npm install -g mailiam

2. Create mailiam Account

mailiam signup
# Follow the prompts to create your account and get API key

3. Initialize mailiam Project

mkdir my-website && cd my-website
mailiam init

4. Configure Your Domain

Add your domain to the configuration:

project:
  name: "My Website"
  slug: "my-website"

domains:
  example.com:
    forms:
      contact:
        name: "Contact Form"
        replies: true
        replyTo: "hello@example.com"
        acknowledgment:
          enabled: true
          template: "contact-acknowledgment"
          subject: "Thanks for contacting us!"

    forwarding:
      "hello@example.com": "team@company.com"
      "support@example.com": "support@company.com"

templates:
  contact-acknowledgment:
    type: "acknowledgment"
    subject: "Thanks for contacting us!"
    text: |
      Hi {{ form.name }},

      Thanks for reaching out! We received your message and will get back to you soon.

      Best regards,
      The Team

5. Deploy Configuration

mailiam push

6. Set Up DNS

mailiam domains setup example.com
# Follow the instructions to add DNS records

Converting EmailJS Forms

Basic EmailJS Form

Before (EmailJS):

<form id="contact-form">
  <input type="text" name="user_name" placeholder="Name" required>
  <input type="email" name="user_email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

<script type="text/javascript">
  (function() {
    emailjs.init("YOUR_USER_ID");
  })();

  document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();

    emailjs.sendForm('service_abc123', 'template_xyz789', this)
      .then(function() {
        alert('SUCCESS!');
      }, function(error) {
        alert('FAILED...', error);
      });
  });
</script>

After (mailiam):

<form action="https://api.mailiam.dev/example.com/contact" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>

  <!-- Spam protection honeypot -->
  <input type="text" name="_mailiam_honeypot" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
</form>

JavaScript-Enhanced Form

For dynamic form handling:

mailiam with JavaScript:

<form id="contact-form">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>

  <input type="text" name="_mailiam_honeypot" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
  <div id="form-status"></div>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async function(event) {
  event.preventDefault();

  const formData = new FormData(this);
  const statusDiv = document.getElementById('form-status');

  try {
    const response = await fetch('https://api.mailiam.dev/example.com/contact', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      statusDiv.innerHTML = '<p style="color: green;">Message sent successfully!</p>';
      this.reset();
    } else {
      statusDiv.innerHTML = '<p style="color: red;">Failed to send message. Please try again.</p>';
    }
  } catch (error) {
    statusDiv.innerHTML = '<p style="color: red;">Network error. Please try again.</p>';
  }
});
</script>

Field Mapping

Common Field Names

Map EmailJS field names to mailiam conventions:

EmailJS	mailiam	Notes
`user_name`	`name`	Standardized field name
`user_email`	`email`	Must be valid email format
`message`	`message`	Main message content
`subject`	`subject`	Optional subject line
`company`	`company`	Company/organization
`phone`	`phone`	Phone number

Field Validation

mailiam automatically validates:

Email addresses must be valid format
Required fields must be present
Honeypot fields must be empty
Message content for spam patterns

Template Migration

EmailJS Template

EmailJS template example:

Subject: New contact from {{user_name}}

Name: {{user_name}}
Email: {{user_email}}
Message: {{message}}

mailiam Template

Equivalent mailiam template:

# In mailiam.config.yaml
templates:
  contact-form:
    type: "form"
    subject: "New contact from {{ form.name }}"
    text: |
      Name: {{ form.name }}
      Email: {{ form.email }}
      Message: {{ form.message }}
    html: |
      <h2>New Contact Form Submission</h2>
      <p><strong>Name:</strong> {{ form.name }}</p>
      <p><strong>Email:</strong> {{ form.email }}</p>
      <p><strong>Message:</strong></p>
      <p>{{ form.message }}</p>

# Reference in form configuration
domains:
  example.com:
    forms:
      contact:
        name: "Contact Form"
        template: "contact-form"

Advanced Template Features

mailiam templates support additional features:

templates:
  enhanced-contact:
    type: "form"
    subject: "New contact from {{ form.name }} - {{ form.subject || 'General Inquiry' }}"
    variables:
      company_name: "My Company"
      support_email: "support@company.com"
    html: |
      <div style="font-family: Arial, sans-serif; max-width: 600px;">
        <h1 style="color: #333;">{{ company_name }}</h1>
        <h2>New Contact Form Submission</h2>

        <table style="border-collapse: collapse; width: 100%;">
          <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"><strong>Name</strong></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{{ form.name }}</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"><strong>Email</strong></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{{ form.email }}</td>
          </tr>
          {% if form.company %}
          <tr>
            <td style="border: 1px solid #ddd; padding: 8px;"><strong>Company</strong></td>
            <td style="border: 1px solid #ddd; padding: 8px;">{{ form.company }}</td>
          </tr>
          {% endif %}
        </table>

        <h3>Message:</h3>
        <div style="background: #f9f9f9; padding: 15px; border-left: 4px solid #007cba;">
          {{ form.message | nl2br }}
        </div>

        <hr>
        <p style="color: #666; font-size: 12px;">
          Submitted: {{ timestamp | date: '%Y-%m-%d %H:%M:%S' }}<br>
          IP Address: {{ ip }}<br>
          Form: {{ domain }}/contact
        </p>
      </div>

Framework-Specific Migration

React/Next.js Migration

EmailJS React Component:

import emailjs from 'emailjs-com';

function ContactForm() {
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('service_id', 'template_id', e.target, 'user_id')
      .then((result) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
  };

  return (
    <form onSubmit={sendEmail}>
      <input type="text" name="user_name" />
      <input type="email" name="user_email" />
      <textarea name="message" />
      <button type="submit">Send</button>
    </form>
  );
}

mailiam React Component:

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    const formData = new FormData(e.target);

    try {
      const response = await fetch('https://api.mailiam.dev/example.com/contact', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />

      {/* Honeypot for spam protection */}
      <input type="text" name="_mailiam_honeypot" style={{ display: 'none' }} tabIndex="-1" autoComplete="off" />

      <button type="submit" disabled={loading}>
        {loading ? 'Sending...' : 'Send'}
      </button>

      {status === 'success' && <p style={{color: 'green'}}>Message sent successfully!</p>}
      {status === 'error' && <p style={{color: 'red'}}>Failed to send message. Please try again.</p>}
    </form>
  );
}

Vue.js Migration

EmailJS Vue Component:

<template>
  <form @submit="sendEmail">
    <input type="text" name="user_name" v-model="form.name">
    <input type="email" name="user_email" v-model="form.email">
    <textarea name="message" v-model="form.message"></textarea>
    <button type="submit">Send</button>
  </form>
</template>

<script>
import emailjs from 'emailjs-com';

export default {
  data() {
    return {
      form: { name: '', email: '', message: '' }
    };
  },
  methods: {
    sendEmail(e) {
      e.preventDefault();
      emailjs.sendForm('service_id', 'template_id', e.target, 'user_id');
    }
  }
};
</script>

mailiam Vue Component:

<template>
  <form @submit="handleSubmit">
    <input type="text" name="name" v-model="form.name" placeholder="Name" required>
    <input type="email" name="email" v-model="form.email" placeholder="Email" required>
    <textarea name="message" v-model="form.message" placeholder="Message" required></textarea>

    <!-- Honeypot -->
    <input type="text" name="_mailiam_honeypot" style="display: none" tabindex="-1" autocomplete="off">

    <button type="submit" :disabled="loading">
      {{ loading ? 'Sending...' : 'Send' }}
    </button>

    <p v-if="status === 'success'" style="color: green;">Message sent successfully!</p>
    <p v-if="status === 'error'" style="color: red;">Failed to send message. Please try again.</p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '', email: '', message: '' },
      status: '',
      loading: false
    };
  },
  methods: {
    async handleSubmit(e) {
      e.preventDefault();
      this.loading = true;

      const formData = new FormData(e.target);

      try {
        const response = await fetch('https://api.mailiam.dev/example.com/contact', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          this.status = 'success';
          this.form = { name: '', email: '', message: '' };
        } else {
          this.status = 'error';
        }
      } catch (error) {
        this.status = 'error';
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

Security Improvements

Enhanced Spam Protection

mailiam provides better spam protection than EmailJS:

domains:
  example.com:
    forms:
      contact:
        name: "Contact Form"
        # Built-in spam protection
        spam_protection:
          level: "normal"
          honeypot: "_mailiam_honeypot"
          rate_limit: 10
          content_filter: true

Rate Limiting

Configure appropriate rate limits:

forms:
  contact:
    rateLimit: 10  # 10 submissions per hour per IP

  newsletter:
    rateLimit: 2   # 2 signups per hour per IP

Testing Your Migration

1. Test Form Submission

# Test with curl
curl -X POST https://api.mailiam.dev/example.com/contact \
  -F "name=Test User" \
  -F "email=test@example.com" \
  -F "message=Testing migration from EmailJS"

2. Test Spam Protection

# Test honeypot (should be blocked)
curl -X POST https://api.mailiam.dev/example.com/contact \
  -F "name=Spam Bot" \
  -F "email=spam@example.com" \
  -F "message=Spam content" \
  -F "_mailiam_honeypot=bot-content"

3. Test Rate Limiting

# Test rate limiting (should be blocked after limit)
for i in {1..15}; do
  curl -X POST https://api.mailiam.dev/example.com/contact \
    -F "name=Test $i" \
    -F "email=test$i@example.com" \
    -F "message=Rate limit test $i"
done

4. Verify Email Delivery

# Send test email
mailiam test send your@email.com

Post-Migration Steps

1. Update DNS Records

Ensure your domain is properly configured:

mailiam domains verify example.com
mailiam domains status

2. Monitor Performance

Track form submissions and performance:

# View recent submissions
mailiam instant list

# Generate analytics report
mailiam analytics --last-30d

3. Remove EmailJS

Once migration is complete:

Remove EmailJS JavaScript from your site
Delete unused EmailJS templates
Cancel EmailJS subscription
Update documentation

4. Train Your Team

Ensure your team knows how to:

Update form configurations
Deploy changes with mailiam push
Monitor form submissions
Troubleshoot issues

Common Migration Issues

Missing Form Submissions

Problem: Forms not sending emails

Solution:

# Check domain verification
mailiam domains verify example.com

# Test form endpoint
curl -X POST https://api.mailiam.dev/example.com/contact \
  -F "name=Test" \
  -F "email=test@example.com" \
  -F "message=Test"

# Check configuration
mailiam test config

CORS Issues

Problem: Browser blocking requests

Solution: mailiam automatically handles CORS for verified domains. Ensure your domain is verified:

mailiam domains status

Template Variables Not Working

Problem: Email templates not rendering variables

Solution: Check template syntax and variable names:

templates:
  contact:
    type: "form"
    subject: "New contact from {{ form.name }}"  # Use form.name, not user_name
    text: "Email: {{ form.email }}"              # Use form.email, not user_email

Need Help?

Migration Support

Documentation: Configuration Reference
Community: Join our Discord for migration help
Email Support: migration-help@mailiam.dev
Migration Service: Professional migration assistance available

Migration Checklist

mailiam account created and CLI installed
Domain configured and DNS records added
Forms migrated and tested
Templates converted and verified
Spam protection configured
Rate limiting set up appropriately
Team trained on new workflow
EmailJS code removed from site
EmailJS subscription cancelled

Migrating from EmailJS to mailiam provides better security, performance, and developer experience. Take advantage of mailiam’s advanced features like email forwarding, comprehensive spam protection, and configuration as code.