Send an email with Resend when a form is submitted

Trigger: eventTrigger

Sends an email using Resend when a form is submitted. The email is built using React and the data from the form.

Framework:

Next.js

APIs used:

Resend

Repository:

/resend-email-form

Categories:

Marketing

Overview

In this project the user can submit a form which triggers a background job which sends an email using Resend. The email is built using React and the data from the form.

To get started with this project follow the instructions on the GitHub README page.

Key features:

Sending a React email using our Resend integration.
A form which triggers the background job when submitted.

Sending a React email using our Resend integration

The email is built using React, styled with CSS and sent using our Resend integration.

sendReactEmail.tsx

client.defineJob({
  id: "resend-email-form",
  name: "Resend: send email on form submit",
  version: "1.0.0",
  trigger: eventTrigger({
    name: "send.email",
    schema: z.object({
      to: z.string(),
      subject: z.string(),
      text: z.string(),
      name: z.string(),
      from: z.string(),
    }),
  }),
  integrations: {
    resend,
  },
  run: async (payload, io, ctx) => {
    await io.resend.sendEmail("send-email", {
      to: payload.to,
      subject: payload.subject,
      text: payload.text,
      from: payload.from,
      // BasicEmail is the custom React component that will be used to style the email
      react: <BasicEmail name={payload.name} text={payload.text} />,
    });
  },
});
// Email styling
const main = {
  padding: "10px 0",
  backgroundColor: "#222094",
};
const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
};
const section = {
  padding: "24px",
  border: "solid 2px #dedede",
  backgroundColor: "#fff",
  borderRadius: "5px",
  textAlign: "center" as const,
};
const text = {
  textAlign: "left" as const,
  fontSize: "16px",
};
const button = {
  fontSize: "14px",
  font: "bold",
  backgroundColor: "#28a745",
  color: "#fff",
  lineHeight: 1.5,
  borderRadius: "0.2em",
  textAlign: "center" as const,
};
function BasicEmail({ name, text }: { name: string; text: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme Inc!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={section}>
            <Text>Hey {name}!</Text>
            <Text>{text}</Text>
            <Button
              style={button}
              pY={4}
              pX={4}
              href="https://acmecompany.inc/"
            >
              Get started
            </Button>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

A form which triggers the background job when submitted

When the form is submitted the email is populated with the form content, the background job is triggered, and the email is sent.

sendEmailForm.tsx

"use client";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { sendEmail } from "../_actions";
const SendEmailForm = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [to, setTo] = useState("");
  const [from, setFrom] = useState("");
  const router = useRouter();
  const handleRefresh = () => {
    setIsSubmitted(false);
    console.log(isSubmitted);
    router.refresh();
  };
  async function action(data: FormData) {
    const to = data.get("to");
    if (typeof to !== "string" || !to) return;
    const subject = data.get("subject");
    if (typeof subject !== "string" || !subject) return;
    const name = data.get("name");
    if (typeof name !== "string" || !name) return;
    const text = data.get("text");
    if (typeof text !== "string" || !text) return;
    const from = data.get("from");
    if (typeof from !== "string" || !from) return;
    //send the event to trigger the email.
    //You can use the returned event with the @trigger.dev/react package if you want more detailed Job progress in your UI
    const event = await sendEmail(to, subject, name, text, from);
    setIsSubmitted(true);
  }
  return (
    <form
      action={action}
      className="flex flex-col gap-y-4 px-4 pb-4 sm:w-96 sm:px-0"
    >
      <input
        type="text"
        name="to"
        placeholder="Enter a 'to' email address"
        className="text-charcoal-800 rounded p-1.5"
        value={to}
        onChange={(e) => setTo(e.target.value)}
      />
      <input
        type="text"
        name="subject"
        placeholder="Enter a subject"
        className="text-charcoal-800 rounded p-1.5"
      />
      <input
        type="text"
        name="name"
        placeholder="Enter the name of the recipient"
        className="text-charcoal-800 rounded p-1.5"
      />
      <textarea
        name="text"
        placeholder="Enter email text"
        className="text-charcoal-800 rounded p-1.5"
      />
      <input
        type="text"
        name="from"
        placeholder="Enter a 'from' email address"
        className="text-charcoal-800 rounded p-1.5"
        onChange={(e) => setFrom(e.target.value)}
      />
      <p className="text-sm text-gray-500">
        ⚠️ The &quot;from&quot; email address must be a verified domain in your
        Resend account to work.
      </p>
      {!isSubmitted ? (
        <button
          type="submit"
          disabled={!isValidEmail(to) || !isValidEmail(from)}
          className="bg-lavender-600 hover:bg-lavender-500 mt-2 h-10 w-full rounded font-bold transition disabled:opacity-20"
        >
          ✉️ Send email
        </button>
      ) : (
        <div className="flex gap-2">
          <p>✅ Email sent! - </p>
          <button
            onClick={handleRefresh}
            className="text-charcoal-300 hover:text-charcoal-100 underline underline-offset-2 transition"
          >
            Send another
          </button>
        </div>
      )}
    </form>
  );
};
function isValidEmail(email: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
export default SendEmailForm;

How to run this project

Follow the instructions on the GitHub README page.

Product features

Trigger.dev Realtime

Concurrency & queues

Scheduled tasks

Observability & monitoring

Roadmap

Latest changelogs

New run filters

Example tasks using Fal.ai and Realtime

The Trigger.dev Realtime beta is now available

Latest blog posts

Everything we launched during launchweek[0]

Run Engine 2.0 (alpha)

Batch processing

Documentation

Guides