Contact Forms

Overview

Contact forms are one of the most common use cases for transactional email APIs. With Notify'n, you can easily receive notifications when someone submits your contact form.

1. Create Your HTML Form

<form id="contact-form" action="/api/contact" method="POST">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

2. Create Server-side Handler

Create an API endpoint to handle form submissions and send the notification email:

// /api/contact.js (Node.js/Express example)export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }  const { name, email, message } = req.body;  // Validate input
  if (!name || !email || !message) {
    return res.status(400).json({ error: 'All fields are required' });
  }  try {
    const response = await fetch(`${API_URL}/api/v1/emails`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.NOTIFYN_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        from: 'notifications@yourdomain.com',
        to: 'you@yourdomain.com',
        replyTo: email,
        subject: `New Contact Form: ${name}`,
        html: `
          <h2>New Contact Form Submission</h2>
          <p><strong>Name:</strong> ${name}</p>
          <p><strong>Email:</strong> ${email}</p>
          <p><strong>Message:</strong></p>
          <p>${message}</p>
        `,
      }),
    });    if (!response.ok) {
      throw new Error('Failed to send email');
    }    return res.status(200).json({ success: true });
  } catch (error) {
    console.error('Contact form error:', error);
    return res.status(500).json({ error: 'Failed to send message' });
  }
}

3. Send Auto-Reply (Optional)

You can also send an automatic confirmation to the person who submitted the form:

// Send both emails using batch endpoint
const response = await fetch(`${API_URL}/api/v1/emails/batch`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.NOTIFYN_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    emails: [
      // Notification to you
      {
        from: 'notifications@yourdomain.com',
        to: 'you@yourdomain.com',
        replyTo: email,
        subject: `New Contact Form: ${name}`,
        html: `<h2>New message from ${name}</h2><p>${message}</p>`,
      },
      // Auto-reply to sender
      {
        from: 'hello@yourdomain.com',
        to: email,
        subject: 'Thanks for reaching out!',
        html: `
          <h2>Thanks for your message, ${name}!</h2>
          <p>We've received your message and will get back to you within 24 hours.</p>
          <p>Best regards,<br>The Team</p>
        `,
      },
    ],
  }),
});

Best Practices